BootStrap2学习日记1--网格系统
在BoootStrap2的版本中采用的布局方式是12栏网格布局(把浏览器的Width分12栏,布局中使用每个元素所占格数的不同来达到各种布局),包括(固定)网格布局(Grid System)和流式网格布局(Fluid Grid System)。固定网格布局。
<1>固定网格布局——通过span+数字组合来确定占用网格数 (如:span1就是一栏依此类推)
例1代码:
<section id="grid-system"> <div class="container"> <div class="row show-grid"> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> <div class="span1">1</div> </div> <div class="row show-grid"> <div class="span2">2</div> <div class="span2">2</div> <div class="span2">2</div> <div class="span2">2</div> <div class="span2">2</div> <div class="span2">2</div> </div> <div class="row show-grid"> <div class="span3">3</div> <div class="span3">3</div> <div class="span3">3</div> <div class="span3">3</div> </div> <div class="row show-grid"> <div class="span4">4</div> <div class="span4">4</div> <div class="span4">4</div> </div> <div class="row show-grid"> <div class="span6">6</div> <div class="span6">6</div> </div> <div class="row show-grid"> <div class="span5">5</div> <div class="span7">7</div> </div> <div class="row show-grid"> <div class="span4">4</div> <div class="span8">8</div> </div> <div class="row show-grid"> <div class="span3">3</div> <div class="span9">9</div> </div> <div class="row show-grid"> <div class="span2">2</div> <div class="span10">10</div> </div> <div class="row show-grid"> <div class="span1">1</div> <div class="span11">11</div> </div> </div> </section>
例1效果:
不难发现BootStrap的网格系统提供了一套以12格为基数的网格,通过设置类名为”Span+数n“的方式来获得12/n的布局栏数(水平方向1<=n<=12)。
<2>流式布局——将原本固定的栏目宽度变成百分比
例2代码:
<div class="container-fluid"> <div class="row-fluid"> <div class="span4" style="background:gray"> 栏目1(span4) </div> <div class="span4" style="background:gray"> 栏目2(span4) </div> <div class="span4" style="background:gray"> <div class="row-fluid"> <div class="span2" style="background:blue"> 栏目3子元素1(span2) </div> <div class="span2" style="background:blue"> 栏目3子元素2(span2) </div> </div> </div> </div> </div>
例2效果:
此时发现栏目3中的子元素不会各占栏目3的一半 原因是里面的class=“span2” 而当前是流式布局故这样设置仅仅是占用当前父元素的12/2 若要各占一半则代码应当如下:
<div class="container-fluid"> <div class="row-fluid"> <div class="span4" style="background:gray"> 栏目1(span4) </div> <div class="span4" style="background:gray"> 栏目2(span4) </div> <div class="span4" style="background:gray"> <div class="row-fluid"> <div class="span6" style="background:blue"> 栏目3子元素1(span6) </div> <div class="span6" style="background:blue"> 栏目3子元素2(span6) </div> </div> </div> </div> </div>