1.1下载已编译版 bootstrap
地址：http://twitter.github.com/bootstrap/assets/bootstrap.zip
1.2文档结构
1 bootstrap/ 2 ├── css/ 3 │ ├── bootstrap.css 4 │ ├── bootstrap.min.css （压缩版） 5 ├── js/ 6 │ ├── bootstrap.js 7 │ ├── bootstrap.min.js （压缩版） 8 └── img/ 9 ├── glyphicons-halflings.png 10 └── glyphicons-halflings-white.png
2.1全局设置
bootstrap 框架必须基于html5
1 <!DOCTYPE html> 2 <html lang="en"> 3 ... 4 </html>
2.1.1、bootstrap 配置
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Bootstrap 101 Template</title> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <!-- Bootstrap 基础样式--> 7 <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> 8 </head> 9 <body> 10 <h1>Hello, world!</h1> 11 <script src="http://code.jquery.com/jquery.js"></script> 12 <script src="js/bootstrap.min.js"></script> 13 </body> 14 </html>
2.2默认为格栅布局
2.2.1、格栅样式的基本代码
.row 容器.span* 列即可.span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。1 <div class="row"> 2 <div class="span4">...</div> 3 <div class="span8">...</div> 4 </div> 5
2.2.2、列偏移
.offset* （*：代表偏移值） 1 <div class="row"> 2 <div class="span4">...</div> 3 <div class="span3 offset2">...</div> 4 </div> 5
以上代码为，偏移2列
2.2.3、列的嵌套
在默认的网格系统中, 在已有的.span* 内添加一个新的.row 并加入 .span* 列, 就可实现嵌套. 嵌套在内的每列列数总和要等于父级列.
也就是说，把某一列分成 N 列，N 的数量总和不能大于父列的值。
1 <div class="row"> 2 <div class="span9"> 3 Level 1 column 4 <div class="row"> 5 <div class="span6">Level 2</div> 6 <div class="span3">Level 2</div> 7 </div> 8 </div> 9 </div>
2.3流式格栅布局
流式栅格系统对每一列的宽度使用百分比而不是像素数量。
2.3.1、流式栅格样式HTML代码
将.row 替换为.row-fluid ，这样能方便的在流式与固定栅格之间切换。
1 <div class="row-fluid"> 2 <div class="span4">...</div> 3 <div class="span8">...</div> 4 </div>
2.3.2、流式的列偏移
定义方式和固定栅格系统相同: 在任何想偏移的列添加.offset*即可.
1 <div class="row-fluid"> 2 <div class="span4">...</div> 3 <div class="span4 offset2">...</div> 4 </div>
2.3.3、流式的嵌套
和固定网格的嵌套有一点不同: 嵌套的列数总和不需要等于父级列.
相反的, 每个级别的嵌套列属性将被重置, 因为嵌套列会占据父列的100%宽度.
1 <div class="row-fluid"> 2 <div class="span12"> 3 Fluid 12 4 <div class="row-fluid"> 5 <div class="span6"> 6 Fluid 6 7 <div class="row-fluid"> 8 <div class="span6">Fluid 6</div> 9 <div class="span6">Fluid 6</div> 10 </div> 11 </div> 12 <div class="span6">Fluid 6</div> 13 </div> 14 </div> 15 </div> 16
2.4 布局
2.4.1 固定式布局
常见的固定宽度的布局方式，只需添加 <div class="container"> 。
1 <body> 2 <div class="container"> 3 ... 4 </div> 5 </body> 6
2.4.2 流式布局
只需要<div class="container-fluid">—这非常适合应用于程序和文档类的网站。
如：流式两列式布局
1 <div class="container-fluid"> 2 <div class="row-fluid"> 3 <div class="span2"> 4 <!--Sidebar content--> 5 </div> 6 <div class="span10"> 7 <!--Body content--> 8 </div> 9 </div> 10 </div> 11
2.5 响应式设计
在<head>里,
2.5.1 bootstrap 支持的设备
| 类型 | 版面宽度 | 列宽 | 间隙 | |
|---|---|---|---|---|
| 大分辨率 | 大于1200px | 70px | 30px | |
| 默认 | 大于980px | 60px | 20px | |
| 平板 | 大于768px | 42px | 20px | |
| 手机到平板 | 小于767px | 流式列, 没有固定宽度 | ||
| 手机 | 小于480px | 流式列, 没有固定宽度 | ||
.col-xs-* 表示：超小屏幕
.col-sm-* 表示：自适应手机
.col-md-* 表示：平板
.col-lg-* 表示：PC机、电脑等大分辨率设备
2.5.2 响应式设计支持的属性
需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。
| 属性 | 手机767px及以下 | 平板979px与768px之间 | 电脑默认 |
|---|---|---|---|
.visible-phone |
显示 | 隐藏 | 隐藏 |
.visible-tablet |
隐藏 | 显示 | 隐藏 |
.visible-desktop |
隐藏 | 隐藏 | 显示 |
.hidden-phone |
隐藏 | 显示 | 显示 |
.hidden-tablet |
显示 | 隐藏 | 显示 |
.hidden-desktop |
显示 | 显示 | 隐藏 |
3.1 排版
3.1.1 标题
3.2
原文：http://www.cnblogs.com/ljty1980/p/5745125.html