推ter Bootstrap 框架介绍

Bootstrap 是 推ter 搞的一个框架，目的是有个工具可以方便快速搞起一个项目，样式部分使用 Less 写就，也提供了一些 jQuery 插件形式的扩展。对景德镇居民来说，它比较狠的是直接不支持 IE6，许多特效、属性在 IE7、8 里头也是捉襟见肘；因此，如果你的网站放不下这部分用户，还是先不要用了，或者可以参考着整一个自己的版本。Bootstrap 的代码托管在 Github，随时可以 fork。

样式方面，它提供了如下解决方案：

• 栅格系统
• 布局
• 字体样式
• 多媒体展现
• 表格
• 导航
• 警告与提示
• 弹出浮层

栅格系统与比较著名的 960 Grid 大同小异，不过丫默认是16栏，940像素宽，此外一个特性是，因为 Less 带来的动态语言特性（变量、函数等），可以通过配置几个参数，自定义自己的栅格。因为抛弃了老旧浏览器支持，可以直接用 :last-child 将最后一栏的 margin-right 去掉，这也是它与 960 Grid 的差别之一。

布局也是老生常谈，一个固定宽度的居中，一个可变宽度的浮动布局。

字体设置里的风格比较明显，标题、em、strong、b、i 以及 address，都配了一些样式。在 blockquote 的样式里头，利用 before 属性，加上了个 ‐。然后是列表，通过 .unstyled 类，获得样式充值效果；这个方式其实我也比较喜欢，特别是网站是以内容为主的时候。代码块也比较朴素，推荐了 Google Code Prettify。

接着这个就比较贴心的了，很常用的 eye candy，内敛标签。

多媒体列表其实也比较简单，明确了三种缩略图尺寸 330×230、210×150 和 90×90。至于你的网站如何做，可能还是悉听尊便吧。表格的样式也是简约风格。

Bootstrap 对表单做了比较充分的定制，风格上比较明确，label 左浮动，圆角输入框。正确、错误的状态，表单 legend 的字号，前缀字符，输入、复选框等。文件选择的东东比较朴素，基本是老样子，也没有采用一些风骚的解决方案（那些基本需要与 JavaScript 配合搞）。表单的按钮也十分细致。

网站的全局导航栏，风格一以贯之，使用样式实现背景色渐变，固定在头部；同样，因为不需要考虑老旧浏览器，放心地 position: fixed; 就够了。

此外，还实现了提示、警告：

区块风格的消息提示：

面包屑导航：

翻页：

以上是样式的部分，是 Bootstrap 框架的主打。在代码上，基本把样式重置与定制都做掉了，上述内容，出了比较明显的组件如面包屑、翻页等，基本都是直接用标签做选择器的。不过，框架就该简单直接，对吧？有许多风格是利用较新的样式属性搞出来的，最明显的莫过于背景色渐变与圆角（gradient、border-radius、box-shadow 等）。因此，对于图省事、不介意老浏览器看起来效果差些，IE6 不需要管的开发者，Bootstrap 是个好选择，省时省力，美观大方。

在样式之外，Bootstrap 还提供了几个常用的 JavaScript 实现的效果。模态框、提示浮层、表格的排序等等，jQuery 插件的形式。夜了，按下不表。