首页 > 技术文章 > Bootstrap栅格系统

beenupper 2013-08-12 21:52 原文

栅格系统分为两种:默认栅格系统 row,流式栅格系统 row-fluid。

 

row

默认栅格系统:即指定了每个栅格的宽度为60px,间距为20px。共有12个栅格。总宽度为940px;

即12个栅格=720px  11个间距=220px    共940px的宽度.

<div class="row">

 <div class="span12">这是默认栅格,宽度为940px</div>

</div>

 

container

固定布局:居中显示宽度也为940px,即内容区域

<div class="container">

 

 

row-fluid

流式栅格系统: 即栅格的宽度为100%,根据屏幕宽度自适应。也分为12栅格。

<div class="row-fluid">

 <div class="span12">这是流式栅格,宽度铺满屏幕</div>

</div>

 

container-fluid

流式布局:对应流式栅格系统,它的宽度也是100%。

<div class="container-fluid"></div>

推荐阅读