详解Bootstrap实现基本布局的方法

时间 2019-11-18

标签详解 bootstrap 实现基本布局方法栏目 Bootstarp 繁體版

原文原文链接

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，从新使用bootstrap教程实现一下，将涉及的内容也尽量详细说明。javascript

1. 建立基本的页面
咱们先建立一个基本的 HTML 模板页面，使用 sublime + emmet 能够直接建立这个页面。php

1.1 新建一个文件， Ctrl + Ncss

1.2 保存到页面文件中，Ctrl + S，命名为 index.htmlhtml

1.3 在这个空白页面中，输入 html:5，而后直接按制表键 Tab，就应该能够看到一个基本的 HTML5 模板页面了。java

1.4 再次保存，按 Ctrl + S.jquery

页面内容应该以下：bootstrap

1ui

2spa

3code

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
   
</body>
</html>

2. 添加 Bootstrap 文件引用

在 index.html 文件所在的文件夹中，建立 css 文件夹，用来保存全部的样式文件，在 css 子文件夹中建立一个名为 bootstrap 的文件夹，用来保存咱们的 bootstrap 文件。

从 bootstrap 官网能够下载到 bootstrap 的包，其中有一个 dist 的文件夹，这个文件夹中包含了三个子文件夹：css, font 和 js。将这三个子文件夹复制到你的 css/bootstrap 文件夹中。

在页面中会涉及两部份内容，样式和脚本。

2.1 添加样式引用
在 header 中添加 bootstrap 的样式引用。注意路径。

1 2	`<link href="css/bootstrap/css/bootstrap.min.css"` `rel="stylesheet"/>` `<link href="css/bootstrap/css/bootstrap-theme.min.css"` `rel="stylesheet"/>`

bootstrap.min.css 是 bootstrap 的样式文件，包含了全部的 bootstrap 样式定义，bootstrap-theme.min.css 则是主题定义。

2.2 添加脚本引用
因为 bootstrap 使用了 jQuery 的脚本，因此，你还须要下载 jquery 脚本库。

在你的 index.html 文件所在目录中，建立一个名为 lib 的子目录，用来保存之后使用的脚本库，将下载获得的 jquery.min.js 复制到这个目录中。

在紧邻你的 </body> 之间添加 jquery 和 bootstrap 脚本库引用。

<script type="text/javascript" src="lib/jquery.min.js"></script>
 <script type="text/javascript" src="css/bootstrap/js/bootstrap.min.js"></script>
</body>

3. 添加 bootstrap 容器

bootstrap的 .container 类是很是有用的，它能在页面中建立一个居中的区域，而后咱们可以把其余位置的内容放到里面。container类等价于建立了一个具备静态宽度而且magin值为auto的一个居中的p框。twitter bootstrap的 container类的优势在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。

.container-fluid 则是一个全宽的容器，使用整个宽度。