话说Bootstrap提供了一种以12格为基数的网格,可以通过这些方式获得十二分之n的布局排列(横排)。
<div class="span1"></div>
<div class="span2"></div>
<div class="span3"></div>
<div class="span4"></div>
<div class="span5"></div>
<div class="span6"></div>
<div class="span7"></div>
<div class="span8"></div>
<div class="span9"></div>
<div class="span10"></div>
<div class="span11"></div>
<div class="span12"></div>
显示出来就是这个样子(span本来是不可见的div,为了能看见,我用了bootstrap里头的样式表):
代码是这样的:
<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>
Bootstrap的布局方式有两种,一个是fixed一个是fluid。分别是
<body>
<div class="container">
...
</div>
</body>
和
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
还有一部分是用到less修改一些尺寸的。最近暂时用不上。先不多说了⋯⋯