bootstrap为什么12栅格

互联网 19-7-13

栅格系统简介

栅格系统的实现原理

栅格系统的主要工作原理：

栅格系统布局容器

Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种容器类不能互相嵌套。

<div class="container">   ... </div>

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器

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

栅格系统的使用

        <div class="container">             <div class="row">                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>                 <div class="col-md-1">.col-md-1</div>             </div>             <div class="row">                 <div class="col-md-8">.col-md-8</div>                 <div class="col-md-4">.col-md-4</div>             </div>             <div class="row">                 <div class="col-md-4">.col-md-4</div>                 <div class="col-md-4">.col-md-4</div>                 <div class="col-md-4">.col-md-4</div>             </div>             <div class="row">                 <div class="col-md-6">.col-md-6</div>                 <div class="col-md-6">.col-md-6</div>             </div>         </div>

相关推荐：《bootstrap入门教程》

2、列偏移

　　　 <!--列偏移--> 　　　　<div class="container">             <div class="row">                 <div class="col-md-4">.col-md-4</div>                 <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>             </div>             <div class="row">                 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>                 <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>             </div>             <div class="row">                 <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>             </div> 　　　　</div>

3、列嵌套

        <!--列嵌套-->         <div class="container">             <div class="row">                 <div class="col-md-8">                     Level 1：col-md-8                     <!--在第一行里又添加一行-->                     <div class="row">                         <div class="col-md-6">Level 2：col-md-6</div>                         <div class="col-md-6">Level 2：col-md-6</div>                     </div>                     <!--在第一行里又添加一行-->                     <div class="row">                         <div class="col-md-3"> Level 3：col-md-3 </div>                         <div class="col-md-6"> Level 3：col-md-6 </div>                     </div>                 </div>                 <div class="col-md-4">Level 1：col-md-4</div>             </div>         </div>

说明：可以看到，在第一个列(col-md-8)里面，嵌套了一个新行(row)，然后在新行里，又放置了两个等宽的(col-md-6)列，并且两个 col-md-6 加起来是12，但是总宽度和外面的 col-md-8 列的宽度一样，也就是说在 row 里的列宽度是按照百分比分配的。在任何一个嵌套列里，不管宽度是多少，都可以再进行 12 等分，并可以进一步组合。

列排序就是改变列的方向，也就是改变左右浮动，并设置浮动的距离。在栅格系统里，可以通过 .col-md-push-* 和 .col-md-pull-* 来实现这一目的。

　　　　　<!--列排序-->         <div class="container">             <div class="row">             　　<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>             　　<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>         　　</div>         </div>

说明：默认情况下，col-md-9 在左边，col-md-3 在右边，如果要互换位置，需要将 col-md-9 列向右移动三个列的距离，也就是推三个列的 offset，样式用 col-md-push-3；而 col-md-3 需要向左移动，也就是拉九个 offset，样式用 col-md-pull-9。

响应式栅格

Bootstrap 栅格参数

说明：通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。