通过前面的了解，大家都看到 bootstrap 的css 框架效果，很不错吧 ！那么我们开始下面的学习。
1、bootstrap 框架使用
Bootstrap 是基于 html5 的 css 框架所以 。 要引导利用HTML元素和CSS属性,需要使用HTML5 doctype。一定要包括它开始在你的项目的每一个空白的页面。
2、使用bootstrap的排版（Layout）
在bootstrap中有两种布局方式，分别是固定布局和不固定布局。
2.1、固定布局
固定布局会在页面上创建以 (940，宽)居中的单一的单元。效果如下
代码如下
2.2、不固定布局
不固定布局，不必要担宽度的问题。默认情况下宽度与页面相等等。这里为大家列举经典的一行两列布局小例。 效果如下
代码如下：
3、bootstrap 中的grid介绍
在bootstrap中的grid 也是一种布局器 。 grid跟布局同样分为两种固定和不固定。grid分别的使用 .row 和 .row-fluid 的布局。
3.1、Grid固定（940px 宽度）
Grid默认是以固定（940px 宽度）进行12 列的划分的，间距 30 px 宽。效果如下
代码：
3.2、Gird不固定
在Gride中使用不固定的（.row-fluid）是通过整个页面的宽度进行12 列的划分。间距以2.5641%; 宽度有进行的 。效果如下
3.3、Grid多样化
聪明的朋友很快就会发现在grid 中 span1 ….span2 可以灵活多的使用。下面是bootstrap中例子
3.4、Grid位移
我们使用 grid 时候，感觉跟 html table 标签差不多一样。有的朋友可能会想到如果我想隐藏几列那应该怎么办了。先来看看下面的代码。你可能会它是能隐藏列的
效果如下
offset1—offset12
分别用于填充列的。 通过几次尝试发现加上offset 都会从左边开始填充。
3.5、Grid嵌套
在 grid 嵌套里的 span1….span12 不能加了入 border: 1px; 样式 。 可能会导至换行等别情况 。 下面效果
代码
代码地址
http://pan.baidu.com/share/link?shareid=95726&uk=1862801370
原文