下载掌阅APP，畅读海量书库
立即打开
Bootstrap的原名为Twitter Blueprint（推特蓝图），是由2010年就职于美国推特公司的马克·奥托（Mark Otto）和雅各布·桑顿（Jacob Thornton）共同编写的，他们的目的是设计一套具有一致性的框架。在Bootstrap出现之前，对于页面布局，不同的Web开发人员有不同的设计方式，页面布局的命名方式也各具特色。
Bootstrap包含丰富的Web组件，读者可以使用组件快速搭建结构合理、页面美观、功能完备的网站。同时，Bootstrap还自带丰富的jQuery插件，这些插件可为Bootstrap中的组件提供功能支持。读者可对Bootstrap的CSS样式进行修改，编写出满足项目需求的代码。
2011年初，马克以及另一位创始人雅各布还只是两个在推特工作的普通人，雅各布是负责开发内部工具的工程师，马克是负责设计广告的产品设计师。当马克负责的产品需要使用内部应用程序来管理推特的广告时，他们的工作开始出现交集。在几个月的时间里，他们频繁地进行合作，出于提高内部一致性和工作效率的目的，他们决定成立兴趣小组，期望设计出伟大的产品，即创建一个具有统一性的前端工具包，并允许任何人在推特内部使用该前端工具包。后来，这个前端工具包演化为一个利于创建新项目的应用系统。在其基础之上，Bootstrap的构想诞生。
经过兴趣小组几个月的努力之后，Twitter Blueprint更名为Bootstrap，并于2011年8月19日正式发布第一个版本。当时Bootstrap的定位是“一个用于快速开发Web应用的前端工具包”。Bootstrap集合了HTML和CSS的常见用法，可为读者提供丰富且风格统一的排版和组件。Bootstrap在GitHub上作为开源项目受到广大开发者的喜爱。在过去的6年里，Bootstrap每天的下载量平均为180 000次，被全网超过22%的网站使用，在GitHub上有超过270万个项目使用Bootstrap，关于它的代码进行了超过211 730次commit（提交）。Bootstrap拥有几十个组件，已成为目前最受欢迎的前端框架之一。GitHub的Bootstrap页面如图2.1所示。
图2.1 GitHub的Bootstrap页面
在Bootstrap 2中，开发者为Bootstrap添加了对响应式布局的支持，但这种支持仅作为可选的样式表来提供。在Bootstrap 3中，开发者重写Bootstrap，并将“移动设备优先”这一理念融入整个框架中。在Bootstrap 4中，开发者再次重写整个项目，在架构方面做出两个关键改变：一个是使用Sass编写代码；另一个是采用CSS的Flexbox布局。Bootstrap 4的目的在于通过推动大部分浏览器所支持的CSS新属性、更少的依赖项以及各项新技术的应用，以自身微薄之力推动Web开发社区不断地向前发展。
与Bootstrap 3相比，Bootstrap 4的变化主要有以下6点。
1. CSS预处理器不同
Bootstrap 3采用Less处理器，Bootstrap 4采用Sass处理器，后者提高了编译速度。
2. 网格种类不同
Bootstrap 3可提供4种网格宽度，依次是超小型（xs）、小型（sm）、中型（md）、大型（lg）。Bootstrap 4可提供5种网格宽度，依次是超小型（xs）、小型（sm）、中型（md）、大型（lg）、超大型（xl）。
3. 布局方式不同
Bootstrap 3使用浮动（Float）布局，Bootstrap 4使用弹性盒子（Flexbox）布局。Bootstrap 4利用Flexbox的优势可实现快速布局。
4. 使用单位不同
Bootstrap 3使用px作为单位，Bootstrap 4使用rem和em作为单位，不再支持IE8。不再支持IE8意味着读者可尽情利用CSS的优点，不必顾虑CSS的兼容问题。
5. jQuery插件的不同
出于利用JavaScript新特性的目的，Bootstrap 4利用ES6重写了Bootstrap 3的所有插件。
6. 文档的不同
Bootstrap 4使用Markdown格式重新编写了文档，添加了丰富的插件示例和代码片段，增加了参考文档的可阅读性和趣味性。
Bootstrap 3发布时，曾放弃对Bootstrap 2的支持，导致很多基于Bootstrap 2设计的项目出现版本不兼容的问题，因此，当发布Bootstrap 4时，开发团队决定继续修复Bootstrap 3的bug，支持版本兼容并更新文档。Bootstrap 4发布之后，Bootstrap 3不会下线，读者可继续使用Bootstrap 3进行Web开发。
Bootstrap是由推特发布并开源的前端框架，受到广大开发者的喜爱。Bootstrap的主要优势如下。
（1）成熟可靠。Bootstrap由推特这样的大公司发布并开源，经历了推特内部的长久检验，可减少使用者的检测工作。
（2）一致性。Bootstrap能以超快的速度与效率适应不同平台，保证页面在不同平台中的统一性，如在IE、谷歌及火狐等浏览器中，可以保持统一的页面。
（3）Bootstrap支持响应式开发。Bootstrap的网格系统（Grid System）十分先进，它搭建了响应式网页设计的基础框架，该框架易于修改，拥有较高的灵活性。
（4）丰富的组件与插件。由于Bootstrap的火爆，出现了不少围绕Bootstrap而开发的jQuery插件，这些插件使得开发人员的工作效率得到了极大的提高。
（5）保持持续更新。Bootstrap仍在不停地改进，它的发展具备规律性和持续性。开发人员一旦发现新问题，Bootstrap团队便会立刻着手解决相应问题。
Bootstrap可提供丰富的通用样式与功能，读者可运用Bootstrap提高Web开发效率。Bootstrap的主要内容包括页面布局、页面内容、工具类、基本组件和jQuery插件等。下面简单介绍Bootstrap的主要内容。
1. 页面布局
页面布局对于每一个项目都是必不可少的，Bootstrap的网格布局能够适应各种设备进而实现高效开发。Bootstrap的网格布局用法十分简单，按照HTML模板使用即可达到快速布局的目的。
2. 页面内容
页面内容排版的好坏直接决定网页风格，决定页面的美观度。Bootstrap从全局出发，定制页面排版、代码、表单、表格、图片等的格式，从而实现页面统一。
3. 工具类
Bootstrap定义了全局的通用样式类与可扩充类，以增强基本HTML的样式（包括边框、颜色、文本、阴影、浮动和隐藏等）呈现。读者可使用这些工具类实现快速开发页面的目的，减少CSS样式的代码编写量。
4. 基本组件
基本组件是Bootstrap的核心之一，Bootstrap拥有几十个可重复使用的交互组件。例如，按钮、弹出框、下拉菜单、分页、导航栏等。使用这些组件可大幅提升用户的交互体验，使产品更具吸引力。
5. jQuery插件
Bootstrap内含大量jQuery插件，这些jQuery插件主要用于丰富页面的互动性。常见插件包括工具提示框（Tooltip）、模态框（Modal）、折叠（Collaspe）、轮播（Carousel）等。