什么是 Twitter Bootstrap？

原文转载至：http://www.zhihu.com/question/19821825/answer/13068763

Twitter 设计师 Mark Otto（之前在 Zurb）[1] 负责了很多 Twitter 非前台的页面设计，比如 Dev、Support 和 Promoted Products。

去年，Mark 在自己网站发布了一套基于 Less [2] 框架的工具合集（mixins）—— Bootstrap.less [3]，方便前端开发（静态部分）。秉承他在 Twitter 的一贯设计风格，同时考虑到国外用户的大环境，使用了大量超出现有普及水平的 CSS 样式，倒也算是一套称手的工具。

可能是 Twitter 的内部环境宽松，对员工的信赖程度和对新技术的坚定支持也超过了绝大多数国内公司，他们不仅把被某些人诟病有性能问题的 Less 直接用于生产环境（当然是编译后的代码），同时 Mark 也把自己的设计风格继承到了 Twitter Bootstrap 里。于是有了这套工具集。

Bootstrap 到底是坨什么东西？

如果你用过之前的 H5BP [4] 或者 960 Grid System [5] 之类的前端框架，那就很容易理解，Bootstrap 就是一堆现成 CSS 样式的合集。

Bootstrap 有什么“过人之处”？

Bootstrap 内置样式非常漂亮，而且够用。与其把网站搞得花里胡哨，不如一切从简。Bootstrap 在 reset 浏览器样式之余，又添加了类 Twitter 的页面元素，你要做的只是用，肆无忌惮地、放心地用，不用琢磨这个行高、计算那个宽度、让不小心忘记定义的页面元素尴尬地显示在页面上。而且它出自 Twitter 之手，经受了亿万用户的考验，外加 Twitter 强大的设计团队的支持，让这套框架显得与众不同。

Bootstrap 于我们，意义何在？

方便没有设计师的团队也能迅速拿出一个看得过眼去的网站原型，不要考虑太浮夸的设计，一切从极简出发。

当然，Twitter Bootstrap 完全没有考虑非英文页面的元素展现，是否适合用来做中文网站，还有待检验。我开心的是，Twitter 这样的公司，在输出产品、输出技术、输出理念之外，又开始输出设计。我的忧虑也同样如此。

[1] Mark Otto 的 Twitter 账号 http://twitter.com/mdo 及博客http://markdotto.com/
[2] LESS http://lesscss.org/ 以及类似的动态 CSS 框架 Sasshttp://sass-lang.com/
[3] Bootstrap.less http://markdotto.com/bootstrap/
[4] HTML5 ★ Boilerplate http://html5boilerplate.com/
[5] 960 Grid System http://960.gs/

为什么要用 Bootstrap

Bootstrap 是由两个 twitter 员工开发并开源的前端框架，目前已经到了 2.0.4 的版本，在 Github 上面有 32517个 watch，和 6608个 fork。非常火爆，而如此火爆自然有它的道理，在我们团队的所有项目中正全面推行使用 Bootstrap，我想根据自己的实际使用体验来说明一下为什么要用 Bootsrap。

twitter 出品

首先，Bootstrap 出自 twitter，大厂出品，并且开源，自然久经考验，减少了测试的工作量。站在巨人的肩膀上，不重复造轮子。
同时，Bootstrap 的代码有着非常良好的代码规范，从中也可以学习到很多，在 Bootstrap 的基础之上创建项目，日后代码的维护也变得异常简单清晰。

基于 Less、丰富的 Mixin

如果你不知道 Sass 或者 Less 这样的 CSS 预处理技术，我只能说你实在太落伍了，建议你先去了解之。
Bootstrap 的一大优势就是它是基于 Less 打造的，并且也有 Sass版本。正因为如此，它一推出就包含了一个非常实用的 Mixin 库任你调用。
举个很简单的例子，当你平时要用到一些 css3 属性的时候，你要写不同的浏览器写不同的 -prefix-，比如圆角 border-radius ：

-webkit-border-radius: 10px;
-moz-border-radius:10px;
-border-radius:10px;

但是通过 Bootstrap 给你预设好的 mixin，你直接写成这样就可以了：

@include border-radius (10px);

是不是轻松愉快？基本常用的 CSS3 mixin 都帮你整理好了，你都直接调用就可以了，在此不一一举例。 Bootstrap 是目前最好的基于 Less(Sass) 的前端框架，丰富而实用的 Mixin 应该是其最好的地方。

可以 Responsive 的栅格系统

Bootstrap 的 栅格 (Grid) 系统也很先进，整个 Grid 系统是可以 Responsive 的！如果你还不知道 Responsive Design，那么你太落伍了，建议你了解之。
Bootstrap 已经帮你搭好了实现 Responsive Design 的基础框架，并且非常容易修改。如果你是一个新手，Bootstrap 可以帮助你在非常短的时间内上手 Responsive Design。

丰富的组件

Bootstrap 的HTML组件 和 Js组件 非常丰富，并且代码简洁，非常易于修改，你完全可以在其基础之上修改成自己想要的任何样子。这是工作效率的极大提升。

插件

另外、由于 Bootstrap 的火爆，又出现了不少围绕 Bootstrap 而开发的插件。其中最实用的莫过于 Font Awesome 了。它是一套 icon font，提供了丰富的 icon 给你选择，新的 2.0 版又根据网友的意见增加了70个新的 icon。

在现在一股有 Apple 带领的 Retina 潮流下，对图片的视网膜屏下的解决方案已经变得越来越有必要了，而在 icon 这个东西上，icon font 是完美的解决方案，不用担心分辨率的问题，因为它实际上是字体。

以上
这些就是为什么要用 Bootstrap 的原因，目前市面上没有任何其他框架可以和它相媲美，但是它就虽然是一匹好马，你还是需要花费一些时间去学习它、适应它，它在日后给你带来的便利性是无可比拟的，你会后悔自己为什么没有早点接触它。

一些题外话


我不喜欢用框架，我喜欢原生的写法

这是我在给别人推荐 Bootstrap 的时候最常听到的话，我只能说，Bootstrap 并不能帮你完成所有事情，它只是一个的框架，在这个框架上面你依旧可以任意的发挥，并且发挥得更好，但是前提是你要驾驭得了它。
如果你不够熟悉它，你确实是有时候会被它有所牵绊，但是你熟悉了之后发现了其实它没有对你进行任何限制，这需要一个过程。

是给无设计师的团队或者程序员用的

对此我真的是无力吐槽，Bootstrap 的开发者就在他的博客上抱怨过，为什么出来那么一堆完全照搬 Bootstrap 样式的网站。
记住、完全用 Bootstrap 的样式只会让人心生厌烦。

简书用的就是 Bootstrap ：http://jianshu.io

## SASS and LESS

不管是[SASS](http://sass-lang.com/)，还是[LESS](http://lesscss.org)，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大，这两者我的感觉是对于程序员来说，SASS的功能要远比LESS强大，基本可以说是一种真正的编程语言了，而对于设计师，LESS则相对清晰明了，[这里](http://css-tricks.com/sass-vs-less/)是Chris Coyier写的一篇关于SASS和LESS的背靠背对比，可以说是相当中肯的(评论也相当有料喔)。当然，如果使用Rails之类的框架，基于SASS是会来的更方便一些。

---

## Compass and Blueprint

SASS和[Compass](http://compass-style.org/)的关系，在很多人来看类似于ruby和rails，compass基于SASS，是一个真正意义上的编程框架，提供了大量的mixin(可理解为函数库)，无论是对css3繁杂的多浏览器写法的简化支持，还是实现各种常见功能的helper，都是强大而丰富的。另外，包括Scott Davis和Eric Meyer的核心团队，也可以说是全明星组合。

[Blueprint](http://www.blueprintcss.org/)是一套预定义的样式，包括对大部分常用web交互组件的渲染，并且有一个强大的格子布局系统(grid system)，即使不懂设计的程序员，也可以使用blueprint的默认样式做出很漂亮的页面。

Blueprint和Compass，是一个分工很明确的组合，前者负责样式渲染，后者则是基础框架和模块，可以说，在bootstrap诞生之前，是web开发首选的黄金组合。

---

## HTML5 Boilerplate

[HTML5 Boilerplate](http://html5boilerplate.com/)项目(以下简称h5bp)则如同名字一样，实现的是一个web页面的标准模板，尤其针对html5进行了全面优化，同时也对老浏览器向后兼容，基本上来说，h5bp与样式相关的主要部分，是compass的一个子集，不过h5bp并不只限于css，还默认引入了很多很好的js开发库，包括[Modernizr](http://modernizr.com/)和Jquery，再加上一个标准化的index.html模板

h5bp是这里提到的所有框架中使用起来最方便的，当然受功能限制，她最适用的目标是单页web app或者静态页面，对于复杂的项目来说，需要和其他框架做互补。

---

## Twitter Bootstrap

新兴而野心十足的Bootstrap跟上述又都不同，她是基于LESS的一套前端工具库，意图非常明显，想以一个项目，整合Compass，Blueprint，h5bp的目标功能，成为web前端的一站式解决方案。

* 一套完整的基础css模块，但不如compass丰富和强大
* 一套预定义样式表，包括一个格子布局系统，和blueprint提供的差不多，只是设计风格不一样
* 一组基于Jquery的js交互插件，这是Bootstrap真正强大的地方，也是她严格意义上可以取代Blueprint的原因所在，这些非常不错的小插件，包括对话框，下拉导航等等，不但功能完善，而且十分精致，正在成为众多jquery项目的默认设计标准。

特别提一下，Bootstrap使用[Normalize.css](http://necolas.github.com/normalize.css/)来进行Reset CSS，这一项目已经成为了事实标准(超过Compass的Eric meyer 2.0)，强烈推荐使用，另外前边说的h5bp也使用Normalize，因此，如果你在项目中同时使用了h5bp和Bootstrap， 请注意，**没有必要再引入h5bp的初始样式表style.css**

---

## So What?

说了一大堆，该来点结论了，目前对于web开发，尤其是由程序员进行的full stack开发，最好的组合是：

**SASS+Compass+Bootstrap**

这样既可以利用SASS强大的编程能力，Compass强大的底层函数，又可以获取Bootstrap丰富的UI组件支持。

只是，Bootstrap是基于LESS的，要让她们协同工作，需要一个SASS的Bootstrap移植版本，幸亏github上从来不缺这类项目，当前最好的一个是[bootstrap-sass](https://github.com/thomas-mcdonald/bootstrap-sass)

中文版文档：

http://wrongwaycn.github.io/bootstrap/docs/index.html