1.2 Bootstrap功能介绍
Bootstrap为什么能这么流行？其易用性是很重要的一个原因。Twitter在GitHub上提供了方便的自定义Bootstrap的工具，用户可以自由地选择想要的元素和组件，并且自定义每个颜色的具体数值，然后再让它自动生成一份属于自己的、定制版的Bootstrap。所有不需要的代码已经被去掉，以节省网络下载时间。虽然整个Bootstrap并不大，但是毕竟能省一点是一点。对于大流量网站来说，为每个用户节省1KB流量，总量也是很可观的。下面简单介绍一下Bootstrap功能和特色，以便更详细地了解它。
1.2.1 Bootstrap主要特色
Bootstrap是非常棒的前端开发工具包，它拥有以下特色。
（1）由匠人造，为匠人用
与所有前端开发人员一样，Bootstrap团队是国际上最优秀的前端开发组织，他们乐于创造出色的Web应用，同时希望帮助更多同行从业者，为同行提供更高效、更简洁的产品。
（2）适应各种技术水平
Bootstrap适应不同技术水平的从业者，无论是设计师，还是程序开发人员，不管是骨灰级别的大牛，还是刚入门槛的菜鸟。使用Bootstrap既能开发简单的小东西，也能构造更为复杂的应用。
（3）跨设备、跨浏览器
最初设想的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器，甚至包括IE7。从Bootstrap 2开始，提供对平板和智能手机的支持。
（4）提供12列栅格布局
栅格系统不是万能的，不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。可以选用内置的栅格，或是自己手写。
（5）支持响应式设计
从Bootstrap 2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备灵活缩放，从而提供一致性的用户体验。
（6）样式化的文档
与其他前端开发工具包不同，Bootstrap优先设计了一个样式化的使用指南，不仅用来介绍特性，更用以展示最佳实践、应用以及代码示例。
（7）不断完善的代码库
尽管经过gzip压缩后，Bootstrap只有10KB大小，但是它却仍是最完备的前端工具包之一，提供了几十个全功能的随时可用的组件。
（8）可定制的jQuery插件
任何出色的组件设计，都应该提供易用、易扩展的人机界面。Bootstrap为此提供了定制的jQuery内置插件。
（9）选用LESS构建动态样式
当传统的枯燥CSS写法止步不前时，LESS技术横空出世。LESS使用变量、嵌套、操作、混合编码，帮助用户花费很小的时间成本，编写更快、更灵活的CSS。
（10）支持HTML5
Bootstrap支持HTML5标签和语法，要求建立在HTML5文档类型基础上进行设计和开发。
（11）支持CSS3
Bootstrap支持CSS3所有属性和标准，逐步改进组件以达到最终效果。
（12）提供开源代码
Bootstrap全部托管于GitHub（https://github.com/），完全开放源代码，并借助GitHub平台实现社区化开发和共建。
（13）由Twitter制造
Twitter是互联网的技术先驱，引领时代技术潮流，Twitter前端开发团队是公认的最棒的团队之一，整个Bootstrap项目由经验丰富的工程师和设计师奉献。
1.2.2 Bootstrap主要功能
Bootstrap的目的是提供一个便捷工具，方便快速开发项目，样式部分使用LESS写就，也提供了一些jQuery插件形式的扩展。
在样式方面，Bootstrap提供了如下解决方案：
❑栅格系统
栅格系统与著名的960 Grid大同小异，不过960 Grid默认是16栏、940像素宽，由于LESS带来的动态语言特性（变量、函数等），可以通过配置几个参数，自定义栅格。因为抛弃了对老旧浏览器的支持，可以直接用：last-child将最后一栏的margin-right去掉，这也是它与960 Grid的区别之一。
❑布局
布局主要包括一个固定宽度的居中，一个可变宽度的浮动布局。
❑字体样式
字体风格比较明显，标题、<em>、<strong>、<b>、<i>以及<address>和<blockquote>等语义标签都配了一些默认样式。然后是列表，通过.unstyled类样式获得样式充值效果，这个方式比较实用，特别是网站是以内容为主的时候。代码块也比较朴素，借鉴了Google Code Prettify风格。
标签样式设计得比较贴心，风格趋于内敛，效果如图1-2所示。
图1-2 贴心的 label 标签
❑多媒体展现
多媒体列表其实也比较简单，定义了3种缩略图尺寸：330像素×230像素、210像素×150像素和90像素×90像素。表格的样式也是简约风格。
❑表单
Bootstrap对表单进行了比较充分的定制，风格比较鲜明，label左浮动，圆角输入框，正确、错误的状态，表单legend的字号，前缀字符，输入、复选框等。文件选择比较朴素，没有提供更个性的解决方案，要想实现更个性的解决方案，需要与JavaScript配合设计。表单的按钮也十分细致，效果如图1-3所示。
图1-3 按钮样式
❑导航等
网站的全局导航栏保持一致，使用样式实现背景色渐变，固定在头部，因此不需要考虑浏览器兼容问题。此外，还实现了提示、警告、弹出对话框设计风格的统一。
以上样式的部分是Bootstrap框架的核心。在代码上，基本把样式重置与定制都做了，上述内容，除了比较明显的组件（如面包屑、翻页等），基本都直接用标签作选择器。
有许多风格是利用CSS3样式属性设计出来的，最明显的莫过于背景色渐变与圆角。因此，对于图省事、不介意早期浏览器的效果，不需要考虑IE6的开发者，Bootstrap是个好选择，因为它省时省力，而且美观大方。
在样式之外，Bootstrap还提供了十几个常用的JavaScript插件，如模态对话框、下拉菜单、滚动监听、标签页、工具提示等jQuery插件。