2018千锋HTML5视频教程全集学习知识点精选：Bootstrap框架技术

一、概述

首先我们来说说 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 页面，为了确保适当的绘制和触屏缩放，需要在  之中添加 viewport 元数据标签，再使用  引入外部 css 样式表文件。源码如下：

对于登录表单的布局，我们使用 Bootstrap 的栅格系统（Grid System）来实现。

栅格系统会随着屏幕或视口（viewport）尺寸的变化，自动分为最多12列，我们可以直接使用 Bootstrap 中预定义的类来实现布局。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，待布局的内容就可以放入这些创建好的布局中。

“行（row）”必须包含在布局容器 .container （固定宽度）或 .container-fluid （100% 宽度）中，通过行可以在水平方向创建一组“列（column）”，待布局的内容就放置于“列”中。“行”可以使用预定义类 .row 来创建，“列”也有类似的预定义类，规则如下表所示：

使用“列”的类前缀，后跟布局所占据列宽（1~12）即可。那么我们可以设计如下布局：

登录表单在中等屏幕时布局占用6列的宽度，在小屏幕时占用8列宽度。如下所示：

 但通常我们会将登录表单在水平方向居中位置显示出来，当然方式也有多种，可以使用栅格系统中列的偏移来完成。使用 .col-md-offset-* 类可以将列向右侧偏移，通过使用 * 选择器为当前元素增加了左侧的边距（margin），如.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。那么上述布局可以更新为：

五、小结

从以上示例来看，Bootstrap 已为开发者预定义了非常多的有用的类，开发者只需要在使用过程中熟记这些类名即可，当然也可以在已经定义样式的基础上再来实现定制，这就需要十分熟练的使用了。

Bootstrap 中除了这些预定义好的类之外，还有非常多的其它组件与JS插件可以使用，大家可以继续通过 Bootstrap 文档进行查阅。