Twitter的Bootstrap是一组精心设计的用户界面元素、布局、js工具,可以免费获取使用。Bootstrap提供了一个易实现的960网格的高效布局,同时也为排版、导航、表格、按钮和其他元素精心设计了样式。考虑到常用到的JS,Bootstrap也提供了一组jQuery插件,包含了下拉菜单,tab菜单,对话框、tooltip、提示信息等等。所以总的来说,Bootstrap是一个快速开发web应用和站点的工具包。
首先还是从所谓的940网格系统开始。Bootstrap默认的网格系统是宽度940px,12列的布局,针对不同的客户终端可以有4种不同变换。bootstrap.css文件中设置了一组class:.span1, .sapn2, ......, span12,这是一组用来定义列数的标志。使用方法是 :class="row"创建行,class="spanX"创建列如下:
如果你想建立一列网格:
<div class="row">
<div class="span12">
Content
</div>
</div>
如果想建立两列网格:
<div class="row">
<div class="span6">
Content
</div>
<div class="span6">
Content
</div>
</div>
以此类推。