标签：
默认栅格系统：
bootstrap的默认栅格系统为12列。形成一个940px宽的容器，默认没有启用 响应式布局 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。
简单布局：对于简单的两列式布局，创建一个 .row 容器，并在容器中加入合适数量的 .span* 列即可。由于默认是12列的栅格，所有 .span* 列所跨越的栅格数之和最多是12(或者等于其父容器的栅格数)。
偏移：加offset*，在1-12之间。把列向右移动可使用 .offset* 类。每个类都给列的左边距增加了指定单位的列。例如，.offset4 将 .span4 右移了4个列的宽度。
嵌套列：在默认的栅格系统里, 在已有的.span*内添加一个新的 .row 并加入 .span* 列，就可实现嵌套。被嵌套列中的每列列数总和要等于父级列。
流式栅格系统：
流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。
将 .row 替换为 .row-fluid 就能让任何一行“流动”起来。应用于每一列的类不用改变，这样能方便的在流式与固定栅格之间切换。
定义方式和固定网格系统相同：给任何想偏移的列添加 .offset* 即可。
和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>the bootstrap practice</title> 6 <link rel="stylesheet" type="text/css" href="E:\bootstrap\css\bootstrap.css"> 7 </head> 8 <body> 9 <div class="row"><!--span4+span8=12，因为bootstrap默认是12列的栅格，所以最多是12或者等于其父容器的栅格数--> 10 <div class="span4">hello</div> 11 <div class="span8">bootstrap</div> 12 </div> 13 <div class="row"><!--offset（1-12）表示偏移量。offset2将span8左偏移了2列--> 14 <div class="span4">hello:</div> 15 <div class="span8 offset2">the offset bootstrap</div> 16 </div> 17 <div class="row"> 18 <div class="span8"><!--row中再包含row。注意被嵌套列中的每列列数总和要等于父级列。--> 19 bootstrap_example: 20 <div class="row"> 21 <div class="span3">分段</div> 22 <div class="span5">实例</div> 23 </div> 24 </div> 25 </div> 26 <!--流式栅格系统:流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。--> 27 <div class="row-fluid"> 28 <div class="span4">fluid:hello</div> 29 <div class="span7">fluid:bootstrap</div> 30 </div> 31 <div class="row-fluid"># 流式的偏移 32 <div class="span4">fluid:hello</div> 33 <div class="span4 offset2">fluid:bootstrap</div> 34 </div> 35 <div class="row-fluid"><!--和固定栅格的嵌套有一点不同：被嵌套的列数之和要等于12。这是因为流式栅格使用百分比来设置每列的宽度--> 36 <div class="span12"> 37 fluid12 38 <div class="row-fluid"> 39 <div class="span6"> 40 fluid 6 41 <div class="span6">fluid6</div> 42 <div class="span6">fluid6</div> 43 </div> 44 </div> 45 <div class="span6">fluid6</div> 46 </div> 47 </div> 48 </body> 49 </html>
标签：
原文地址：http://www.cnblogs.com/zongmeng/p/4489149.html
