第2章 Bootstrap概述

2.1 Bootstrap简介

2.1.1 初识Bootstrap

Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，是目前最受欢迎的前端框架之一。在Bootstrap之前，每位网页设计师对于版面的布局都有不同的排版方式，布局的命名也有所不同。除了版面布局之外，还有版面上的各种元素，如表格、列表、窗体、表单等的排版，都会使CSS样式文件变得非常庞大且复杂，这样很容易导致不一致，增加维护的负担。

Bootstrap是由Twitter公司的Mark Otto和Jacob Thornton开发的，是一个基于HTML、CSS、JavaScript的技术框架，符合HTML、CSS规范，且代码简洁、视觉优美。该框架设计时尚、直观、强大，可用于快速、简单地构建网页或网站。

Bootstrap目前常用的版本是Bootstrap 3，最新版本是Bootstrap 4，其颇受关注的亮点如下。

● Bootstrap 4的栅格系统由4个类定义了5类，具体包括特小设备（<576px）、平板（≥576px）、桌面显示器（≥768px）、大桌面显示器（≥992px）、超大桌面显示器（≥1200px）。

● Bootstrap 4使用弹性盒（flexbox）模型来布局，而不是使用浮动（float）来布局，弹性盒子更适合响应式的设计。

● Bootstrap 4所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来更方便。

● Bootstrap 4放弃对IE 8的支持，使用rem和em代替px单位，更适合做响应式布局和控制组件大小。

● Bootstrap 4全面引入ECMAScript 6新特性重写了所有插件。

● Bootstrap 4的源码是采用Sass语言编写的；Bootstrap3的源码是采用Less语言编写的。

2.1.2 使用Bootstrap的优势

Bootstrap包括十几个组件，如菜单、导航、警告框、弹出框等等，每个组件都很自然地结合了设计与开发，具有完整的实例文档。无论是何种技术水平、处在哪个工作流程的开发者，都可以使用Bootstrap快速、方便地构建自己喜欢的应用程序。

Bootstrap引入了12个列栅格结构的布局理念，包含HTML、CSS和JavaScript三大部分，使得设计质量高、风格统一的网页变得十分容易。

Bootstrap的HTML基于HTML5的最新前沿技术。它不同于古老陈旧的其他网页标准，灵活高效，简洁流畅，抛弃了那些复杂而毫无意义的标签，引入了全新的<canvas>、<audio>、<video>、<source>、<header>、<footer>、<nav>、<aside>及<article>等标签，使网页的语义性大大增加，从而使得网页不再是提供机器阅读的枯燥代码，而是可供人们欣赏的优美的作品。

Bootstrap的CSS是使用Less（Leaner Style Sheets，更薄的样式表）创建的，是新一代的动态CSS。对设计人员来说，代码写得更少；对浏览器来说，解析更容易；对用户来说，阅读更轻松。

Bootstrap的JavaScript是在使用jQuery框架基础上的优秀的JavaScript，它不会使每个用户为了相似的功能在每个网站上都下载一份相同的代码，而是用一个代码库将常用的函数封装起来，供用户按需取用，用户的浏览器只需下载一份代码，便可在各个网站上使用。

Bootstrap框架的特性如下。

● 移动设备优先：自Bootstrap 3起，框架包含了贯穿整个库的移动设备优先的样式。

● 浏览器支持：IE、Firefox、Google等主流的浏览器都支持Bootstrap。

● 响应式设计：Bootstrap的响应式CSS能够自适应台式机、平板计算机和手机等设备。

● 为开发人员创建接口提供了一个简洁统一的解决方案。

● 包含了功能强大的内置组件，易于定制。

● 提供了基于Web的定制。

● 免费、开源。

在之前的Bootstrap版本中（直到2.x），用户需要手动引用另一个CSS，才能让整个项目友好地支持移动设备。而Bootstrap 3的设计目标是移动设备优先，然后才是桌面设备，它其默认的CSS本身就对移动设备友好支持。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。为了让Bootstrap开发的网站对移动设备友好支持，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewport meta标签，代码如下。

其中，width属性控制设备的宽度。假设网站将被通过不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现。代码“initial-scale=1.0”确保网页加载时以1:1的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为viewport meta标签添加“user-scalable=no”，可以禁用其缩放（zooming）功能。

通常情况下，“maximum-scale=1.0”与“user-scalable=no”一起使用，这样，用户只需滚动屏幕，就能让网站看上去更像原生应用的感觉。

注意，这种方式并不推荐所有网站使用，还是要根据开发者自身的情况而定！

2.1.3 浏览器与设备支持

基于浏览器的兼容性现状，国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack，使用Bootstrap仍然无法完全避免这些额外的编码。自从Bootstrap 3推出以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以，如果项目开发涉及IE8、IE7，就需要好好考虑是否还要执着于Bootstrap 3了。

不过，如果想跟随时代潮流，而且恰巧客户也推崇更为先进的前端技术，那么Bootstrap 3或4肯定是首选方案。

Bootstrap支持的最新版本的浏览器和平台如表2-1所示。

2.1.4 环境搭建

1．用于生产环境的Bootstrap下载

Bootstrap的安装是比较容易的，可以从网站http://getbootstrap.com/上下载Bootstrap的最新版本，目前最新版本是Bootstrap 4。如果想使用V3版本，可以到中文网http://v3.bootcss.com进行下载，如图2-1所示，本书使用的版本为v3.3.7。如果要使用V4版本，可以到中文网http://v4.bootcss.com进行下载。

不管是使用Bootstrap V3还是V4版本，方法都是类似的。

单击“下载Bootstrap”按钮即可跳转到下载页面，如图2-2所示，有3个选项可选择。如果处于初级使用阶段，或直接用在生产环境下，初学者可以直接单击“用于生产环境的Bootstrap”栏下方的“下载Bootstrap”按钮进行下载。

下载成功后可以得到一个zip文件，解压后可以得到一个包含css、fonts和js文件夹的文件夹。

如果使用未编译的源代码，需要编译Less文件来生成可重用的CSS文件。对于Less文件的编译，Bootstrap官方只支持Recess，这是Twitter的基于less.js的CSS提示。

Bootstrap中文网为Bootstrap专门构建了免费的CDN（Content Delivery Network，内容分发网络）加速服务，访问速度更快，加速效果更明显，没有速度和带宽限制，永久免费。BootCDN还对大量前端开源工具库提供了CDN加速服务，进入BootCDN主页（https://www.bootcdn.cn/）可以查看更多可用的工具库。

2．预编译版本介绍

为了更好地了解和更方便地使用Bootstrap，本书中将使用Bootstrap的预编译版本。

下载Bootstrap的预编译版本，解压缩zip文件，将看到如下目录结构。

上面展示的就是Bootstrap的基本文件结构：预编译文件可以直接使用到任何Web项目中，提供了编译好的CSS和JavaScript文件，还有经过压缩的CSS和JavaScript文件；还提供了CSS源码对应表，可以在某些浏览器的开发工具中使用；同时还包含了来自Glyphicons的图标字体，附带的Bootstrap主题中使用到了这些图标。

3．Bootstrap源码

Bootstrap源码包含预先编译的CSS、JavaScript和图标字体文件，并且还有Less、JavaScript和文档的源码。

具体来说，Bootstrap的主要文件组织结构如下。

less/、js/和fonts/目录中分别包含了CSS、JavaScript和字体图标文件的源码。dist/目录中包含了上面所说的预编译Bootstrap包内的所有文件，docs/包含了所有文档的源码文件，examples/目录是Bootstrap官方提供的实例工程。除了这些，还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等其他文件。

2.1.5 Hello World实例

【实例2-1】 使用CDN加载Bootstrap的样例代码。

代码运行后的效果如图2-3a所示，如果删除3行CDN的Bootstrap代码调用，运行结果如图2-3b所示。