由浅入深 定制Bootstrap开发自己网站的六种方法

对于Bootstrap这个CSS框架，很多程序员持鄙视的态度，就如鄙视jQuery一般。诚然，就算不用这个框架，而是纯手写，或者借助JS框架的模板，一样可以写出一套页面，至于页面的精良程度、是否可二次开发、是否主流浏览器全兼容、是否可复用、可扩展、那就看开发者的个人能力了——如果一些人拿着公司的高额薪水或者甲方的高额酬金，却干着一锤子的买卖，代码不可复用，不可扩展，不可二次开发，浏览器不全兼容，他只是非常快速的胡七八凑了一套页面，应付到上线，然后潇洒的鄙视一下Bootstrap，我只能对这种人说俩字：呵呵。

言归正传，定制Bootstrap的方法，从简单到复杂，大致有下面这么几种，前几种方法虽然简单，但有时候其实够用了。另外，本文涉及的Bootstrap版本其实有点乱，因为v4版在Alpha阶段，本文涉及的官网页面都是v3的，所以，凡是说源代码的场合，都是在讲v4，凡是说官网页面，都是针对v3，因为我相信v4会在2016年内或者2017年年第一季度正式发布，这时候本文读起来才是正常的。现在凑合看吧。

一、从官网抄代码

直接从官网文档抄代码片段，需要什么组件就copy什么组件的代码，然后稍微修改一下HTML就完工。做出来的页面，大约只是DEMO级的，或者是企业主页站级的。

二、利用官网给组件做减法定制

这里假设你不懂Sass，所以你只能利用官网的Customize and download功能定制Bootstrap。这里定制又分成两种：给组件做减法定制，和修改变量定制。

先说给组件做减法定制，就是给Common CSS、Components、JavaScript components以及jQuery plugins做减法，页面下方的变量一律保持默认。这种定制要求你清楚这些可定制项各自代表的涵义，这种定制的意义在于减小CSS文件和JS文件的字节数。

再说修改变量定制，这其实还是需要你学习Sass才能看得懂这些变量的值。然而，你如果已经掌握Sass，反而不用在官网页面修改变量，因为非常的低效，你只需看本文第五节。

三、套用网上优秀模板

直接套用互联网上的优秀模板。当你暂时没有自己制作模板的能力的时候，上网寻找优秀的模板是一个好主意，GitHub、Google上搜索Bootstrap template有很多精品，down下来之后，把区块、组件挪挪位置搬搬家，就成了为自己所用的新页面。

四、另创建CSS文件覆盖Bootstrap或模板的CSS声明

这种定制方式就是按部就班加载Bootstrap或模板的相关文件之后，再加载你的另写的CSS文件，这种开发方式已经可以满足架构简单的网站的开发了，甚至在你掌握了Sass之后，你依然可以仍采用这种方式开发网站，只不过明显的缺陷就是另写的CSS文件产生了更多的HTTP请求，以及更多的文件加载，当然不是大型网站应该采用的方式。

五、利用Sass删减组件以及修改变量值

使用Sass以及使用构建工具Grunt的教程，请另参考我的以构建Bootstrap v4为例练习使用Grunt，这里假设你熟练掌握了Sass和Grunt，所以我只说删减组件和修改变量值的过程。

1、利用Sass删减组件

• 删减各种CSS组件：scss\bootstrap.scss文件是Bootstrap的主文件，将希望删减的组件用//注释掉即可。
• 删减CSS组件配套的JS组件、删减jQuery组件：官方推荐的是用Grunt来合并所有JS组件，当然前提是你需要学习掌握Grunt。如果你并不想学习Grunt，那么利用官网定制页面来定制也是可以的。

2、利用Sass修改变量

1、我可以修改哪些变量？

借助官网的Customize and download我们可以清晰的看到我们能修改哪些变量。或者打开scss\_variables.scss也可以看到所有的变量。

2、根据变量名，我如何弄清变量指代的CSS属性值？

方法一，从字面猜。没错，由于变量名并不对应具体的类名或者元素名，而是比类名或者元素名更具体，所以猜是一个好主意，比如@font-size-h6是什么意思？猜的话肯定是h6元素的字体大小，事实上也是这样。接着看，@font-size-h6的默认值是ceil((@font-size-base * 0.85))，也就是@font-size-base的值（14px）乘以0.85，得到11.9px，再经过ceil运算，也就是向上取整计算，得到12px。假设你的项目中的h6元素的字体大小想改成跟@font-size-base的值（14px）一样，那么就改成@font-size-base就算定制完了。

方法二，从Bootstrap源文件的customize.min.js文件里查找变量名。比如@breadcrumb-padding-vertical，假设你看不懂它代表的属性值，那么可以在customize.min.js文件里查找一下，然后可以找到两处，第一处是.breadcrumb {padding: @breadcrumb-padding-vertical @breadcrumb-padding-horizontal;}，第二处是@breadcrumb-padding-vertical: 8px;，可见，@breadcrumb-padding-vertical表示的就是.breadcrumb元素的上下内间距，默认值为8px。改成你希望的值就算定制成功。

3、怎么利用Sass重置变量：

Bootstrap官方给的方案是修改scss\_custom.scss，看看官方的注释：

Bootstrap overrides Copy variables from _variables.scss to this file to override default values without modifying source files.

所以，从_variables.scss文件拷贝所有内容到本文件内，然后就可以复写变量的默认值了。

当变量修改OK了，利用Grunt就可以生成生产环境需要的css和js文件了。

六、自己写模板

Bootstrap使用者的终极形态：能够自己写模板。

很多人看不起Bootstrap的主要原因，就是用bs做出来的页面一眼就能看出是利用bs制作的，所以，你需要达到的能力就是让人看不出这是一套Bootstrap模板。

从优秀的模板文件我们可以看出，模板项目可以分为下面几个文件夹，我的举例仅供参考，并不是标准。

boostrap - 存放bs源文件，其中dist文件夹内的文件就是你先定制、后编译后的css和js文件，当然你也可以选择不定制，而是另写CSS文件覆盖bs的声明，虽然会加大几K的体积，但更好维护，而且几K的体积增加并不是大问题。 pages - 你的模板html，按页面名称分文件。 js - 你的模板js文件，按模块分文件，可以有一个common文件夹放公共文件。 css - 你的模板css文件，按模块分文件，可以有一个common文件夹放公共文件。 img - 你的模板涉及的图片，按模块分子文件夹，可以有一个common文件夹放公共文件。 plugins - 存放第三方插件、组件的文件夹，内部按插件名、组件名给文件夹命名。

强调一下关于css的定制，从上文可以看到，定制分为两个部分，一部分是修改bs自身的css变量值，另一部分是写模板专用的css。从实践来看，这两种修改不要同时进行，可以先只写模板专用的css，等做出一两个页面，形成了自己模板统一的合理的风格之后，再总结出对bs的css变量的修改，然后再去改bs的css变量。

css类的命名，尽量按照BEM规范命名。

bs的js组件方面，尽量不要修改bs自身的js组件，只需要补充bs没有的js组件，比如更华丽的焦点图效果、更漂亮的手风琴效果，等等。如果你认为一些bs的官方js组件确实很不好用或是很丑，那么也没必要加工它，而是可以直接另写一个，官方的该组件就直接减掉即可。

我们自己写模板可以从制作首页开始，首页从制作顶部导航开始，做出一个让人无法看出这是用Bootstrap制作的导航，接下来可以是制作BANNER模块，以及BANNER下方的导航模块，然后是正文第一屏、第二屏，直到页脚模块。

比如首页我们命名为index.html，顶部导航用header元素，然后内部逐级构建代码。接着是nav元素，然后是#wrap元素，然后是footer元素，最后是#fixed元素（用于漂浮、弹出层等），不再细说。