推ter Bootstrap 框架介绍

jopen 12年前

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,内敛标签。
推ter Bootstrap 框架介绍

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

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

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

此外,还实现了提示、警告:
推ter Bootstrap 框架介绍

区块风格的消息提示:
推ter Bootstrap 框架介绍

面包屑导航:
推ter Bootstrap 框架介绍

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

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