Question

不久之前，我们只是为 PC 做页面。比如经典的左中右结构网页布局就可以使用 bootstrap 直接搞定：

<nav class="container">
    <section class="row">
        <div  class="col-md-2">
            left
        </div>
        <div  class="col-md-8">
         middle
        </div>
        <div  class="col-md-2">
          right
        </div> 
    </section>
</nav>

在进一步解释之前，我们首先背下来一个事实：bootstrap 布局系统会把每个屏划分为 12 等分，并提供划分这个等分的方法。

然后继续。每个.container 的容器内都可以加入.row 作为行，在行内通过 col-md-来指定划分每个子元素的占据宽度。解释下 col-md- :

1. col-md-*采用连字符分为三个部分，第一部分都是 col，标识列
2. 第二部分标识屏幕大小。md 标识 middle（中等屏幕大小）
3. 最后一部分是一个在 12 内的数字，它表示在总宽度下，当前元素占据的比例。比如 col-md-2 指定为 2/12，col-md-8 标识占据 8/12。

这段代码的含义，换成白话就是：在中等屏幕大小的情况下，三个 div 块分别占据当前行总宽度的 2/12、8/12、2、12。

屏幕大小使用代号，全面屏幕和代号列表如下：

屏     代号 范围            
大屏幕  lg  大于等于 1200px
中等屏  md 宽度在 992px 和 1200px 之间
小屏幕  sm  宽度大于 768px 和 992px 之间
超小屏  xs  宽度小于 768px

所以，几个屏幕大小的临界点值为 768px、992px、1200px。

这个左中右结构，在小屏情况下就会显得太挤了（比如 ipad 的竖屏情况下屏宽刚刚好 768px）。此时我希望把前两个 div 占据一行，分别占据 3/12、9/12 ,第 3 个 div 放到下一行。怎么办？只要使用 col-sm-*来指定比例即可：

 <nav class="container">
    <section class="row">
        <div  class="col-sm-3 col-md-2">
            left
        </div>
        <div  class="col-sm-9 col-md-8">
         middle
        </div>
        <div  class="col-sm-12 col-md-2">
          right
        </div> 
    </section>
</nav>

就是说，在小屏幕的情况下，第一个 div 占据第一行的 3/12，第二个 div 占据第一行的 9/12，第三个 div 占据下一个的 12/12。

如何验证这样做的效果确实是如我的期望呢？现在隆重请出 chrome devtools。只要：

1. 打开 devtools
2. 点击 toggle device toolbar

就可以打开页面，它会在原来的页面上方加入一行，显示 responsible 的下拉菜单以及设备的宽度和高度输入框。我们可以在设备宽度输入框内填写我们想要的设备宽度。并使用 768px、992px 做边界值测试。

• 当输入 768px 时，此时为小屏幕，页面输出如期望的分为 2 行。
• 当输入 769px 时，此时为小屏幕，页面输出如期望的分为 2 行。
• 当输入 767px 时，此时为超小屏幕，页面输出如期望的分为 3 行。
• 当输入 992px 时，此时为中等屏幕，页面输出如期望的分为 1 行。
• 当输入 1200px 时，此时为超大屏幕，因为并没有定义超大屏幕下的占据比例，它会沿用上一级屏幕的定义，也就是中等屏幕的定义，页面输出如期望的依然为 1 行。

成了。我们的页面可以因应屏幕的大小而显示不同的页面组合。这就是响应式编程了。

几乎每个人都会想要问，为什么 bootstrap 布局划分屏幕空间采用的是 12 等分，而不是别的什么等分？确实奇妙，这里的 12 太舒服了。它可以被 1、2、3、4、6、12 共 6 个数字整除，本来就是用来分空间的系统，当然可以更好的被整除最好了，这样怎么分都愉快。比如

1. 两个 div 分空间，分别占用 50%，或者一个 1/3 一个 2/3，或者 1/4 对 3/4
2. 3 个 div 分空间，分别占用 1/3，或者两个 1/6 一个 2/3，或者两个 1/4 对 1/2

使用 12 等分都是很方便的事情。相比之下，10 等分的话，1，2，5，10 整除，被 3、4 都不能整除，划分比例就不那么爽。更多的可选列表：

1. 数字 11 质数不用考虑
2. 数字 9 ，被 1，3，9 整除
3. 数字 8，被 1，2，4，8 整除
4. 数字 7，质数不用考虑
5. 数字 6，被 1，2，3，6 整除
6. 数字 5，质数不用考虑
7. 数字 4，被 1，2，4 整除
8. 数字 3，质数，只能被 1，3 整除，想要等分就太麻烦
9. 数字 2，1，2，想要 1/3 就麻烦
10. 数字 1，想要 1/3、1/2 就麻烦

所以，12 就是最好的。弄明白这一点，让我觉得自由。。。

我们从使用角度，暂时不想要查看 bootstrap 的源代码，而是直接使用它预编译好的包。包内容如下：

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

包括有：

1. 编译好的 CSS 和 JS (bootstrap.)，和压缩过的 css，JS (bootstrap.min.)
2. 还有一个 CSS source map 文件 (bootstrap.*.map) ，这个文件有些浏览器的开发工具需要它
3. 来自 Glyphicons 的字体图标
4. 可选的 Bootstrap theme（主题）

稍作解释：

1.Bootstrap theme 文件是什么?其实就是 bootstrap2.0 的主题样式。你可以把 html 内对 bootstrap.css 的引用删除，添加对此 theme 文件的引用，查看同样的 html 组件下，样式是有变化的。此文件也有 CDN，供不想下载的人使用。地址如下： https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css

2.何为字体图标？字体图标看起来就像图标，实际上则是字体。和字体不同的地方在于，它的内容不是字母或者数字，而是图形和符号。可以使用 css 风格化这些字体，就像风格化一般的文字一样。bootstrap 默认提供来自 Glyphicons 的字体图标，承载在字体文件中（在 fonts 目录内）

3.何为 css source map 文件？bootstrap 的 css 文件谁有 sass、less 编译而成的，当运行调试时，需要根据当前 css 的位置反推源代码 less、sass 文件的代码行。此 sourcemap 文件就是可以帮助调试工具定位代码行的。在编译器技术领域，sourcemap 是一个同样的，从目标代码反推源代码代码行的文件。