CSS 和 Bootstrap

Bootstrap何许人也

既然这节课都叫CSS 和 Bootstrap了，那这个Bootstrap想必和CSS有些关系：

事实上，Bootstrap是一套现成的CSS样式集合，是Twitter于2011年8月在Github上发布的一个开源项目。起初这只是几个推特工程师为了提高他们内部的分析和管理能力，用业余时间构建的一套前端工具集，但在Github上开源之后，逐渐成为了目前最受欢迎的HTML、CSS和JS框架。

这边有两个概念大家可能相对来说比较陌生：

其一是Github，这个在我们接下来的课程中很快会讲到，但是为了更好地理解，大家在这里可以简单地将其视作一个共享资源的网站，其中的资源就是一个一个项目工程（里面是代码和一些相关的文档）。而其中有一些项目的工程师们同意让他人使用、复制或是修改自己的项目，这些项目也就被称为开源项目。

另外一个是框架，它是为解决一个（一类）问题而开发的集成的代码。大家可能觉得这跟之前学的C语言在开头通过#include<xxx>调的库是一样的，都是代码的集合，但其实这两者是不同的。简单地来讲，程序员在使用库时有更高的自由度，可以根据自己的意愿决定在什么时候什么地方调用库中的库函数，也就是程序员决定了程序的流程；而使用框架时，自由度相对较低，程序的流程由框架定义，程序员更像是在填表一样，在框架规定的位置插入自定义的代码来实现定制的程序。

上面的这两个概念大家如果读完还不是特别清楚其实问题也不大，目前对它们有一个感性的认知即可，因为今天我们的主角还是Bootstrap。

Bootstrap能做什么

在看别的资料怎么描述Bootstrap能做什么前，我们不如看看Bootstrap自己的官方文档是如何定义自己的:

Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。

也就是说，首先它是一个前端框架，其次它可以开发响应式布局、移动设备优先的WEB项目（好像是废话QAQ）。

做为前端框架，它封装了很多的CSS样式以及各式各样的组件以及JavaScript插件，这些往往可以通过设定原生HTML元素的class来使用。比方说，如果我们觉得原生HTML中定义的button很丑，但我们又不想自己设计一个样式，那我们就可以上Bootstrap的官方文档，找到导航栏的“全局CSS样式”，然后在里面找到按钮的版块，从它提供的EXAMPLE里找到我们想要样式的按钮，大喊一声“拿来吧你”就可以了——才怪。为了能够使用Bootstrap提供的样式以及丰富的组件和插件，我们除了需要设置对应的class以及其他一些可能需要的属性之外（也就是之前讲框架时所说的填空），还需要正确地引入相关的CSS文件和JavaScript文件（还记得之前Web三件套讲的外部引入的方式吗），不然谁知道我们这空往哪道题填，对吧？当然这些实操部分的细节我们在Practice中再给大家细讲。

除开上面所述的做为前端框架最基本的功能外，Bootstrap还支持移动设备优先（mobile-first）。这指的是Bootstrap的设计目标首先是移动设备，然后是桌面设备。什么意思呢？这就要追溯到Bootstrap诞生的时间了（2011年8月，据史料记载彼时iPhone4s还有两个月就问世了）：那时WEB还是在桌面设备上用的比较多，因此在Bootstrap3之前的版本中都需要手动引入另外的CSS才能让项目支持移动设备，而随着近些年来移动端的快速发展，大势所趋之下，Bootstrap从第三代开始便默认支持移动端的CSS，也就是设计目标成了移动设备优先。当然这里大家了解一下就可以了。By the way，现在Bootstrap已经发展到了第五代。

而在定义中提到的另一个词——响应式布局（responsive design）就比较重要了，它是Bootstrap的一个灵魂特性。

什么叫响应式布局呢？从这个名字大家应该就能猜出一些端倪——它大概是一个会根据某些环境因素的变化而变化的布局。那么是什么环境因素呢？其实也很好猜，就是呈现网页的屏幕分辨率。也就是说响应式布局就是一个能够随着屏幕不同分辨率而 改变布局 的布局（有一点点绕orz）。这样的好处也显而易见，一个网站就能够兼容不同类型的终端（小到手机大到荧幕），而不需要程序员们苦逼地去为每一种终端都定制一个网页。事实上，这个响应式布局是通过CSS的@media查询实现的。关于@media大家可以理解为一组关于屏幕分辨率的If Statement：

if(970px < 屏幕宽度 < 1170px):
    ...
else if(...):
    ...

同样地，大家也是对它有个感性的认知即可，因为正如我们之前在框架中所介绍的那样，在使用框架的时候，我们只需要当作填空就好了，背后的复杂流程一般来说是不需要我们操心的。@media查询会由Bootstrap帮我们完成的，我们只需要针对不同情况定义不同的布局就能和框架配合着完成整个的响应式布局了。

光靠上面的文字描述大家可能还不能对什么叫响应式布局有一个非常直观的概念，那么接下来我们上点具体的，就拿Bootstrap的下载页面作为例子好了。

在电脑上看，这个页面长这样子：

而在手机上，它长这样：

可以很明显地看到，本来三种不同的下载：“用于生产环境的Bootstrap”、“Bootstrap源码”和“Sass”在电脑上是呈水平方向排布的，而到了手机上，便成了竖直方向排布。这也就是一个很典型的响应式布局的例子。

Bootstrap的布局方式

上面讲了Bootstrap具有响应式布局的特性，而这样的特性正是由它的布局方式所决定的。

为了使用Bootstrap的布局系统，我们需要将要布局的内容放在Bootstrap所定义的布局容器内。这样的布局容器有两种，<div class="container">......</div>以及<div class="container-fluid">......</div>,简单来说，前一种容器不占据整个屏幕的宽度，两边有一定留白，而后一种占据100%的宽度（两种布局容器不可以嵌套使用）。通常来说，前一种我们用的多一点，就比如大家常逛的淘宝京东等等：

很明显白色的大块<div>并没有占据100%的宽度，而是两侧有留白。

而满足了前提条件后，我们便可以使用Bootstrap的布局系统进行布局了。

Bootstrap的布局系统是栅格系统（Grid system）。栅格系统，顾名思义，就是通过行和列来把页面分成一个个小格子，从而进行定位。在Bootstrap中，我们往往先在容器中定义行（<div class="row">......</div>），然后再在行元素中创建列元素。与在原生的CSS中定义栅格系统不同，Bootstrap做为框架会通过计算自动地帮我们将一行分为12份（有时也会分为24份或36份，但一般都是12份），所以在做粗略布局的时候，我们可以直接通过指定一个列元素所占份数来改变其的宽度（当然也是通过指定<div>元素的class实现），就像下图这样：

显而易见，每一行的所有列元素所对应的class最后的数字相加都等于12，这也正符合了我们上面所说的一行被分为12份。除开这些数字，大家也许会对每个class名前半部分的col-md感到疑惑，可能col的含义还好猜一点，毕竟本身“列”的英文就叫column，那md又代表了什么意思呢（反正肯定不是在骂人）？这就又要说回到我们在上面讲的响应式布局了。

我们在Bootstrap能做什么里只说了响应式布局能随着屏幕分辨率的改变而改变布局，但具体变成什么样的布局，还是要由我们提起去定义好的。所以整个响应式布局的流程其实是这样的：Bootstrap先通过@media查询得到屏幕分辨率，然后再根据分辨率所在的范围执行对应的布局代码。为了区分不同分辨率范围对应的布局，Bootstrap在列元素类名的col和数字中间加入了两位字母，分别为xs（extra small）、sm（small）、md（medium）和lg（large），而它们对应的分辨率范围如下表：

对于具体的数值，大家并不需要背下来，只要有一个大概的印象即可——xs对应手机，sm对应平板，md对应一桌面显示器，lg对应大桌面显示器。真要是不确定，再查一下表格，也是很方便的。

那么到此为止，Bootstrap最为基础与最为核心的部分我们也就讲完了，当然除了那些讲不完的样式、插件和组件之外，还有一些基础的部分，比如列偏移、列排序、列嵌套等等也没有涉及到。但其实这些都不难，只要大家愿意去官方文档读一读，看一看对应的示例代码，想必这些对大家来讲都没什么难度。即使有时候真的不懂原理，其实也只要把示例代码复制下来，改一改对应的地方，也就是把别人填的空改成你填的空，问题也就解决了。而我想框架给我们带来的便利正是在于此。