一、概述
首先我们来说说 Bootstrap 是什么。
进入 Bootstrap 的官方网站（http://getbootstrap.com/），我们可以看到这样一句话：Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
这句话的意思是：Bootstrap是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备优先的Web项目。大家也可进入 Bootstrap 中文网（http://www.bootcss.com/）学习 Bootstrap 的框架内容。
二、优势
Bootstrap是由 Twitter 发布并开源的前端框架，使用非常火爆。据我们调查，目前在各大中小型公司和企业中，前端项目非常多的都在全面推行使用 Bootstrap。当然如此火爆自然有它的道理，下面为大家简单的分析一下：
首先，Bootstrap 出自 Twitter。由大公司发布，并且完全开源，自然久经考验，减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上，不重复造轮子。
其次，Bootstrap 的代码有着非常良好的代码规范。在使用 Bootstrap 时也有助于我们去养成良好的编码习惯，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。
第三，Bootstrap 是基于 Less 打造的，并且也有 Sass版本。Less/Sass是CSS的预处理技术，正因如此，它一经推出就包含了一个非常实用的 Mixin 库供我们调用，使得我们在开发过程中对CSS的处理更加简单。
第四，响应式开发。Bootstrap响应式的栅格系统（Grid System）非常先进，它已经帮你搭建好了实现响应式设计的基础框架，并且非常容易修改，如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。
第五，丰富的组件与插件。Bootstrap 的 HTML组件和 JS组件非常丰富，并且代码简洁，非常易于修改，如果你觉得它设计的样子不是你所想要的，你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的JS插件，这就使得开发的工作效率得到极大提升。
以上这些都是使用 Bootstrap 所带来的优势。当然 Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。
三、体验
我们来看两个使用 Bootstrap 布局的页面。
第一个页面：http://home.baidu.com/。
我们仅看页首导航部分，在PC端浏览器查看时效果如下：
打开开发者工具，模拟移动设备端在宽度为 768 像素下的查看效果：
我们发现，页首导航条现在不见了，在首行居中部分显示了 LOGO 图片，最前边显示了一个可折叠/展开的菜单，将菜单展开：
原来被隐藏的页首导航栏被折叠到了菜单中。
这是非常典型的一个响应式的使用，因为如果保持导航布局结构，在低分辨率显示情况下，导航布局宽度可能会超出水平显示的宽度，那么浏览器中就会出现水平滚动条，在移动设备端，这是不友好的体现。如果折叠到菜单中，当需要使用时再展开，通过上下滑动来选择菜单导航，这样既使得页面布局更简洁，又提升了用户体验，所以这是经常使用到的响应式布局结构。
第二个页面：https://www.fairchildsemi.com/。
在PC端浏览器中（水平1280像素分辨率）打开页面，显示效果如下：
切换到移动设备端在水平方向 768 像素下查看显示效果：
大家仔细比较这两张图，在顶部通栏显示的效果、LOGO行显示效果及导航栏显示效果都发生了变化，在低分辨率下查看时，页面会变得更加简洁，这也体现的是响应式布局的优势。
该页面导航栏下方是通栏的大图轮播效果，切换不同显示分辨率的情况下，该轮播效果都能自动适应各不同分辨率，这是通过 Bootstrap 中的JS插件来完成的。如果是原生的JS写法，这个轮播图可能就要写两个小时，使用 Bootstrap 的情况，即使使用不熟练，也能够在10分钟以内完成该轮播图效果了。
四、示例
好，体会了一下 Bootstrap 在开发时带来的好处后，下面我们来自己动手，编写一个使用 Bootstrap 布局的登录页面。
俗话说，工欲善其事，必先利其器。要使用 Bootstrap 就需要先下载 Bootstrap 用于生产环境的资源。大家可以从 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载用于生产环境的 Bootstrap。
下载的资源目录结构：
css 目录中放置的是使用 Bootstrap 时所需要使用到的全局的CSS样式表文件，包括编译好的 css 文件、压缩过的 css 文件，还提供了 css 的源码映射表 .map文件；fonts 目录中放置的是字体图标的文件；js 目录中放置的是用于开发环境的 js 插件。需要注意的是，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以jQuery必须在 Bootstrap 之前引入。
将下载好的资源放到自己项目目录下：
新建登录的 html 页面，为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签，再使用 <link> 引入外部 css 样式表文件。源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>用户登录</title>
<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
</body>
</html>
对于登录表单的布局，我们使用 Bootstrap 的栅格系统（Grid System）来实现。
栅格系统会随着屏幕或视口（viewport）尺寸的变化，自动分为最多12列，我们可以直接使用 Bootstrap 中预定义的类来实现布局。
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，待布局的内容就可以放入这些创建好的布局中。
“行（row）”必须包含在布局容器 .container （固定宽度）或 .container-fluid （100% 宽度）中，通过行可以在水平方向创建一组“列（column）”，待布局的内容就放置于“列”中。
“行”可以使用预定义类 .row 来创建，“列”也有类似的预定义类，规则如下表所示：
|
| 超小屏幕 手机 (<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) |
| .container 最大宽度 | （自动） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
使用“列”的类前缀，后跟布局所占据列宽（1~12）即可。那么我们可以设计如下布局：
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8"></div>
</div>
</div>
登录表单在中等屏幕时布局占用6列的宽度，在小屏幕时占用8列宽度。如下所示：
但通常我们会将登录表单在水平方向居中位置显示出来，当然方式也有多种，可以使用栅格系统中列的偏移来完成。使用 .col-md-offset-* 类可以将列向右侧偏移，通过使用 * 选择器为当前元素增加了左侧的边距（margin），如.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。那么上述布局可以更新为：
<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2"></div>
如下图所示效果：
使用 h1 标签来描述页面标题，使用预定义类 .text-center 让文本在 h1 块中居中显示：
<h1 class="text-center">用户登录</h1>
接下来开始实现表单内容的布局。我们可以使用 Bootstrap 中定义好的输入框组来布局，如下所示效果：
这时我们需要使用到预定义类 .input-group 来表示输入框组，可以使用 .input-group-addon 在输入框的任意一侧添加额外元素或按钮，如果需要输入框宽度自适应布局容器大小，则可使用 .form-control 类来实现。该布局结构代码如下：
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Username">
</div>
可以将输入框前的元素替换为一个图标的表示，这时可以使用 Bootstrap 提供的 Glyphicons 字体图标。在字体图标下方直接提供了预定义的类样式名，如：
则修改布局如下：
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
显示效果如下：
以同样的方式添加密码框布局，再添加一个是否记住用户名的复选框。效果如下：
最后布局登录按钮。
在 Bootstrap 中也设置了许多预定义好的按钮样式，可以直接拿来使用。Bootstrap 可以使用预定义好的类 .btn将元素变成按钮的样子，这里还是使用表单提交按钮来布局，只是使用Bootstrap的样式：
<input type="submit" class="btn" value="登录">
现在布局好之后的效果：
这样登录按钮显得很别扭，继续使用 .btn-block 可以将按钮变成块级元素，拉伸到父元素的 100% 宽度，同时使用 .btn-success 样式设置按钮成功样式：
最后在布局的列结构上使用 .well 样式，就能加上嵌入的简单效果。完整代码清单如下：
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2 well">
<h1 class="text-center">用户登录</h1>
<form>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> 记住用户名
</label>
</div>
<input type="submit" class="btn btn-success btn-block" value="登录">
</form>
</div>
</div>
</div>
效果：
到此，一个简单的使用 Bootstrap 布局的登录表单就完成了。我们回顾一下，实现这个布局时，完全不用自己书写 CSS 样式代码，直接使用 Bootstrap 预定义好的类来完成即可。如果自己定义各样式内容，要达到上述响应式布局效果，可能需要两个小时，但如果使用 Bootstrap 来实现，不用 10 分钟就完成了布局，这就是效率。
五、小结
从以上示例来看，Bootstrap 已为开发者预定义了非常多的有用的类，开发者只需要在使用过程中熟记这些类名即可，当然也可以在已经定义样式的基础上再来实现定制，这就需要十分熟练的使用了。
Bootstrap 中除了这些预定义好的类之外，还有非常多的其它组件与JS插件可以使用，大家可以继续通过 Bootstrap 文档进行查阅。
2782
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
