前言

最近，网站需要改版，leader 买了一个模板，但是这个模板用了 BS 的框架。之前就会用 BS，也做过一些页面，比如极客学院数据库增删改查的后台等等。但是对于一些概念比较模糊，而且用起来主要就是通过引入编译后的 CSS 和 JS，然后拷贝相应的代码来实现的，再加上现在 BS 3 出来以后，也会有一些变化，所以就又打算重新开始学习 BS。不过在学习 BS 的过程中遇到了一些问题，这里简单做个总结。

问题及总结

注：我看的版本是 v3.3.7

首先说下载。下载有三个版本，Bootstrap, Source code, Sass。我下载的是第一个，是一个 bootstrap-3.3.7.zip 的压缩包。解压之后就开始我的问题之旅了。

有一段时间没有用 grunt 和 gulp 了，再加上当时对这些工具的了解也不算深刻，所以解压后的文件有 Gruntfile.js ，我以为可以直接用，就在终端输入 grunt 命令，结果报错。后来查了下，发现需要先 npm install，把依赖安装好。

npm install 的时候最好开着 VPN 或者 SS，否则有些内容不翻墙下不下来。npm install 之后，就直接运行 grunt，然后 grunt 会根据 Gruntfile.js 中的 task 进行执行，这里面报了几个 deprecated 警告，不算太严重，就没有管。还有一个 fallback background-color 的错误，这个在我的博客中 others 标签下有一篇文章讲到了，这里就不再赘述。

但是还有个错误就是，没有安装 jekyll，导致无法再本地查看 docs，也就是说你在解压的文件夹里看到有一个 docs 的 folder，打开这个 folder，里面很多 html 文件，如果通过直接双击打开的方式看到的是一些乱七八糟的内容，这个 docs 文件夹其实是可以通过 jekyll 进行本地查看的。

所以就需要安装 jekyll，但是 jekyll 是通过 gem 安装的，不是通过 npm 安装的，一定要注意，这个你需要去 jekyll 的官网察看安装方式。

安装好了 jekyll 之后，在终端输入 jekyll，还是会报错。不过，没有理会，依然再次运行 grunt 命令，发现大部分任务都可以完成了，不过还是会报错，说当前版本的 java 是 v1.6，而 v1.8 Is required。所以就需要安装 java 1.8。

回顾

上面的这些问题通过不断的 google，以及查看 overflow 和 github 等，终于解决了一些。今天又回头看了看 bootstrap 的官网 getting-started 部分，发现很多疑惑和问题其实官方文档都有详细的说明和解释。

首先是关于三个版本的区别。getting-started 上有三个版本的 Bootstrap 可以下载，第一个版本是 Bootstrap，第二个版本是 Source code，第三个版本是 Sass。第一个版本其实就是编译好的 css, js, font，也就是说如果你不修改任何 Bootstrap 的内容，想直接引用这个框架的话就可以直接下载第一部分的内容，然后像平时引入其他 css, js 库一样，通过 link 或者 script 标签引入这些外部链接，进而进行开发。

第二个版本是 Source code，这个就是我下载下来的版本，这个版本其实就是就是开发版，如果需要开发人员自己进行测试，配置，调试或者开发新的代码，就可以使用这个版本。这个版本里的 dist 文件其实就是第一个 Bootstrap 下载下来的按个文件。为了能够编译 CSS 和 JS，我们需要用到 grunt 这个工程化工具。关于 grunt 如何安装及使用，我们需要自己去看 grunt 相关的官网和教程。这里说，如果已经安装了 grunt 的情况，先运行 npm install 进行依赖安装，其实就是下载 node_modules。下载完这个就可以通过运行 grunt 的一些命令，来实现 grunt 的一些自动化任务了。比如 grunt dist, grunt watch, grunt test, grunt docs 以及 grunt等。在 grunt docs 这个命令下，有一个命令可以实现本地查看文档。

而通过运行 bundle exec jekyll serve 可以实现本地查看文档。

关于栅格系统

BS3之后，整个框架就变成了 mobile first 的理念，而不是原来的 mobile friendly 了。而且栅格系统从原来的支持三种尺寸变成了支持四种尺寸，即 col-xs-*, col-sm-*, col-md-*, col-lg-*（代表 1-12 的任意数字），分别支持 phones(<768px), tablets(="">=768px), media device desktop(>=992px), large device desktop(>=1200px)。那么这四种系统都是如何运转的话呢？每个系统都可以支持更大一级的系统，但是不支持小一级的系统，例如，col-md-4，在 >=992px 的尺寸下都是占 .row 的1/3宽度，如果这个 div 没有定义 col-ld-\ 的话。但是当媒体尺寸小于 992px 的时候，col-md-4 这个尺寸就失效了，它会根据实际情况展示，一般情况下就直接会展示为 100% 的宽度。所以你要想让界面也展示一定的尺寸，就必须也要定义一个 col-sm-*。
同时还要注意，.row 必须放入 .container 或者 .container-fluid 的内部，而只有 columns 可以是 .row 的 immediate children。