1.2 为什么使用Bootstrap

1.2.1 Bootstrap的优点

众所周知，随着移动设备越来越受广大人民的喜欢，响应式网页设计也越来越流行。但是通过媒体查询，针对每种终端做相应的设计甚至网页布局，代码量比较多，开发和维护起来比较麻烦。使用Bootstrap就可以很好地解决这些问题。因为Bootstrap中包含很多现成的带有各种样式和功能的代码片段，并且这些代码都是已经封装好的，所以进行响应式设计时，仅需引入Bootstrap文件，然后添加class属性或者添加几行代码就可以实现某个功能，而不必花费很多时间和精力，这大大提高了Web开发的效率。而且使用Bootstrap可以构建出非常精美的前端界面，并且占用的资源非常少。当然，Bootstrap的优势不止于此，它还有以下优点。

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

· 浏览器支持：所有的主流浏览器（包括IE、Chrome、Safari、Firefox、Opera）都支持Bootstrap。

· 容易上手：要使用Bootstrap，只需具备HTML、CSS的基础知识就可以。

· 响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备的屏幕。

1.2.2 Bootstrap包含的内容

Bootstrap包含的内容有重置样式、CSS样式、工具、布局和组件等，具体如下。

· 重置样式：HTML中的标签都有自己的样式，而Bootstrap则重置了这些标签的样式。

· CSS样式：除了设置各标签的默认样式以外，Bootstrap还提供了一些可选样式，以及设置组件样式，这些样式都可以在用户自己设计的网页中使用。

· 工具：Bootstrap自带边框、颜色等工具，这些工具可以快速应用于图像、按钮或者其他元素。

· 布局：Bootstrap包括包装容器、强大的网格系统、灵活的媒体查询以及多个响应式工具。

· 组件：Bootstrap提供了二十多个组件，用户可以根据需要将这些组件应用到自己设计的网页中。

1.2.3 Bootstrap的应用

利用Bootstrap可以方便地设计精美的网页。例如国外乒乓球排行榜网站Pong Up使用Bootstrap布局页面，其首页部分内容如图1-1所示；图1-2所示为DiviPay网站首页的部分页面。