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效果：

BootStrap2学习日记1--网格系统

此时发现栏目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>

BootStrap2学习日记1--网格系统

相关推荐