看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。
1. 创建基本的页面
我们先创建一个基本的 HTML 模板页面，使用 sublime + emmet 可以直接创建这个页面。
1.1 新建一个文件， Ctrl + N
1.2 保存到页面文件中，Ctrl + S，命名为 index.html
1.3 在这个空白页面中，输入 html:5，然后直接按制表键 Tab，就应该可以看到一个基本的 HTML5 模板页面了。
1.4 再次保存，按 Ctrl + S.
页面内容应该如下：
<!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 的样式引用。注意路径。
<link href="https://www.jb51.net/css/bootstrap/css/bootstrap.min.css"/> <link href="https://www.jb51.net/css/bootstrap/css/bootstrap-theme.min.css"/>
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="https://www.jb51.net/lib/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/css/bootstrap/js/bootstrap.min.js"></script> </body>
3. 添加 bootstrap 容器
bootstrap的 .container 类是非常有用的，它能在页面中创建一个居中的区域，然后我们能够把其他位置的内容放到里面。container类等价于创建了一个具有静态宽度并且magin值为auto的一个居中的div框。twitter bootstrap的 container类的优点在于它是响应式的，它会以当前屏幕的宽度为基础计算出最佳的宽度予以使用。
.container-fluid 则是一个全宽的容器，使用整个宽度。
.container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 768px) { .container { width: 750px; } } @media (min-width: 992px) { .container { width: 970px; } } @media (min-width: 1200px) { .container { width: 1170px; } } .container-fluid { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }
在body标签中，使用container类创建一个div。它会作为页面主要的放置其他代码的外层包裹.
顺便还可以添加一个 title，现在你的页面应该是这样的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Twitter Bootstrap Tutorial - A responsive layout tutorial</title> <link href="https://www.jb51.net/css/bootstrap/css/bootstrap.min.css"/> <link href="https://www.jb51.net/css/bootstrap/css/bootstrap-theme.min.css"/> </head> <body> <div> </div> <script type="text/javascript" src="https://www.jb51.net/lib/jquery.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/css/bootstrap/js/bootstrap.min.js"></script> </body> </html>
虽然现在在浏览器中还看不到什么内容，但是，已经为后面的操作打好了基础。
4. 标题和导航
现在我们可以为页面添加一些可见的内容了。
4.1 标题
添加标题非常简单，直接添加一个 h1 元素就可以了。
<div> <h1>Twitter bootstrap tutorial</h1> </div>
刷新页面应该看到一个醒目的标题了。下面我们看导航。
4.2 导航
使用 nav 元素可以创建导航，而且我们希望创建一个导航条来组织导航项目，在 bootstrap 中，导航条称为 navbar，继续在容器中添加导航条。
<div> <h1>Twitter bootstrap tutorial</h1> <nav> </nav> </div>