Bootstrap的一些笔记——网格系统

来源：互联网发布：沈阳网络营销黑马网络编辑：程序博客网时间：2024/05/18 02:13

话说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修改一些尺寸的。最近暂时用不上。先不多说了⋯⋯