对于Bootstrap这个CSS框架，很多程序员都抱着轻蔑的态度，就像jQuery一样。 确实，即使你不使用这个框架，你也可以手工编写一组页面，或者借助 JS 框架模板。 至于页面的精致程度，是否可以重新开发，是否完全兼容主流浏览器，是否可以复用，可扩展性，就看开发者的个人能力了——如果有人拿着高薪公司还是甲方报酬高，但是做一次性交易，代码不能复用，扩展，或者二次开发，浏览器不完全兼容，他只是很快凑了一套页面，处理了launch，然后冷酷地鄙视Bootstrap，对于这种人我只能说两个字：哈哈。
言归正传，定制Bootstrap的方法从简单到复杂大致有以下几种。 前几种方法虽然简单，但有时就足够了。 另外，本文涉及到的Bootstrap版本其实有点乱，因为v4版本正处于Alpha阶段，而本文涉及到的官网页面都是v3。 对于v3，因为我相信v4会在2016年或者2017年第一季度正式发布，所以这个时候看到这篇文章很正常。 我们现在就凑合吧。
1.复制官网代码
直接从官网文档复制代码片段，复制你需要的任意组件的代码，然后稍微修改一下HTML即可完成项目。 完成的页面大概只是DEMO级别，或者是企业首页级别。
2.使用官网减法定制组件
这里假设你不懂Sass，所以只能使用官网的定制下载功能来定制Bootstrap。 这里的定制分为两种：组件的减法定制和变量定制的修改。
先说组件的减式定制，即减去常见的CSS、组件、JavaScript组件、jQuery插件，保留页面底部的默认变量。 这种定制要求你清楚这些可定制项的含义。 这种定制的意义在于减少CSS文件和JS文件的字节数。
另外，修改变量定制实际上需要你学习Sass来理解这些变量的值。 不过，如果你掌握了Sass，就不需要在官网上修改变量了，因为效率很低。 您只需要阅读本文的第 5 节。
3.应用优秀的在线模板
直接套用网上优秀的模板。 当您没有能力自己制作模板时，在线搜索优秀的模板是一个好主意。 在GitHub和Google上搜索Bootstrap模板有很多优秀的产品。 创建了一个新页面供您自己使用。
4.创建另一个CSS文件来覆盖Bootstrap或模板的CSS声明
这种定制方法是一步步加载Bootstrap或模板的相关文件，然后加载你另外编写的CSS文件。 这种开发方式已经可以满足结构简单的网站的开发。 即使你掌握了Sass之后，你仍然可以用这种方式开发网站，但明显的缺点是额外编写的CSS文件会产生更多的HTTP请求和更多的文件加载，这当然不是大型网站应该采用的方式。
5.使用Sass删除组件和修改变量值
有关使用 Sass 和使用构建工具 Grunt 的教程，请参考我的构建 Bootstrap v4 教程作为示例来练习使用 Grunt。 假设你精通Sass和Grunt锤子手机网站模板，所以我只讲删除组件和修改变量值的过程。
1.使用Sass删除组件 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即可完成定制。
方法2、从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，参见官方说明：
引导程序覆盖
将变量从 _variables.scss 复制到此文件以覆盖默认值，而无需修改源文件。
因此，将 _variables.scss 文件中的所有内容复制到此文件中，然后您可以覆盖变量的默认值。
当变量修改OK后，使用Grunt生成生产环境所需的css和js文件。
6. 编写自己的模板
Bootstrap 用户的终极形式：编写自己的模板的能力。
很多人看不起Bootstrap的主要原因是用bs做的页面一眼就能看出是用bs做的，所以你需要实现的能力就是让人看不出这是一套引导程序模板。
从优秀的模板文件中我们可以看到，模板项目可以分为以下几个文件夹。 我的例子仅供参考，不作为标准。
boostrap - 存放bs源文件，dist文件夹中的文件是你先自定义然后编译的css和js文件。 当然，你也可以选择不定制，而是另外写一个CSS文件来覆盖bs的声明，虽然会增加几K较大的体积，但是更好维护，而且几K体积增加问题不大。
页面 - 您的模板 html，按页面名称分为文件。
js - 你的模板js文件，按模块分为文件，你可以有一个公共文件夹来存放公共文件。
css - 你的模板css文件，按模块分为文件，你可以有一个公共文件夹来存放公共文件。
img - 模板中涉及的图像，按模块分为文件夹，公共文件可以有一个公共文件夹。
plugins - 用于存储第三方插件和组件的文件夹。 在内部，文件夹根据插件名称和组件名称命名。
强调css的定制化。 从上面我们可以看出，定制分为两部分，一部分是修改bs本身的css变量值，另一部分是编写模板专用的css。 从实用的角度来看，这两项修改不应该同时进行。 只能先写模板特有的css，等制作一两页形成自己模板统一合理的风格后，再总结对bs的css变量进行修改，然后更改bs的css变量。
css类的命名应尽可能遵循BEM规范。
bs的js组件方面，尽量不要修改bs本身的js组件，只需要补充bs没有的js组件即可，比如更华丽的焦点图片效果，更漂亮的手风琴效果等等。 如果你觉得bs官方的一些js组件确实很难用或者丑陋的话，那就不用处理了，直接再写一个，官方的组件就可以直接减去。
我们可以在编写自己的模板时从制作主页开始。 首页首先从制作顶部导航开始锤子手机网站模板，制作一个让人看不到的导航这是用Bootstrap制作的。 接下来，我们可以制作BANNER模块，以及BANNER下方的导航模块，然后是body的第一屏，第二屏，直到页脚模块。
例如，我们将主页命名为index.html，使用header元素进行顶部导航，然后在内部逐步构建代码。 然后是nav元素，然后是#wrap元素，然后是footer元素，最后是#fixed元素（用于浮动、弹出层等），不再详细说明。
祝您一切顺利。
