向Twitter Bootstrap 学习什么？

什么是 Twitter Bootstrap？

杜潇

Micrsh

永久链接

故事得从头讲起。
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 框架 Sass  http://sass-lang.com/
[3] Bootstrap.less  http://markdotto.com/bootstrap/
[4] HTML5 ★ Boilerplate  http://html5boilerplate.com/
[5] 960 Grid System  http://960.gs/