Bootstrap框架介绍（非常详细）

Bootstrap 源于推特，是基于 HTML、CSS 和 JavaScript 构建的，是目前最受欢迎的前端框架之一。Bootstrap 简洁、灵活且直观，可提供大量响应式组件，支持跨平台操作，是 Web 开发人员的首选框架。

Bootstrap 使 Web 开发更加快捷，可极大地提高工作效率。

Bootstrap 是什么？

Bootstrap 的原名为 Twitter Blueprint（推特蓝图），是由 2010 年就职于美国推特公司的马克·奥托（Mark Otto）和雅各布·桑顿（Jacob Thornton）共同编写的，他们的目的是设计一套具有一致性的框架。

在 Bootstrap 出现之前，对于页面布局，不同的 Web 开发人员有不同的设计方式，页面布局的命名方式也各具特色。

Bootstrap 包含丰富的 Web 组件，读者可以使用组件快速搭建结构合理、页面美观、功能完备的网站。同时，Bootstrap 还自带丰富的 jQuery 插件，这些插件可为 Bootstrap 中的组件提供功能支持。

读者可对 Bootstrap 的 CSS 样式进行修改，编写出满足项目需求的代码。

Bootstrap 的发展

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 页面如图1所示。


在 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 是由推特发布并开源的前端框架，受到广大开发者的喜爱。Bootstrap 的主要优势如下：

1) 成熟可靠

Bootstrap 由推特这样的大公司发布并开源，经历了推特内部的长久检验，可减少使用者的检测工作。

2) 一致性

Bootstrap 能以超快的速度与效率适应不同平台，保证页面在不同平台中的统一性，如在IE、谷歌及火狐等浏览器中，可以保持统一的页面。

3) Bootstrap支持响应式开发

Bootstrap的网格系统（Grid System）十分先进，它搭建了响应式网页设计的基础框架，该框架易于修改，拥有较高的灵活性。

4) 丰富的组件与插件

由于Bootstrap的火爆，出现了不少围绕Bootstrap而开发的jQuery插件，这些插件使得开发人员的工作效率得到了极大的提高。

5) 保持持续更新

Bootstrap仍在不停地改进，它的发展具备规律性和持续性。开发人员一旦发现新问题，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）等。

声明：《Web前端系列教程》为本站“54笨鸟”官方原创，由国家机构和地方版权局所签发的权威证书所保护。