bootstrap css-网格系统

前言：第一次记录点东西，只能勉强算是笔记吧。博主自学前端，深知自己水水的，但还是向把自己学到的东西记录下来，这不刚学习了bootstrap的css部分，现在整理出笔记。

1，Bootstrap网格系统的基本网格结构

bootstrap网格的基本结构如下：

         <div class="container">

             <div class="row">

                 <div class="col-*-*"></div>

                 <div class="col-*-*"></div>

             </div>

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

         </div>

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

　　其中，Bootstrap中的container class用于包裹页面上的内容。它所代表的样式如下

.container {

   padding-right: 15px;

   padding-left: 15px;

   margin-right: auto;

   margin-left: auto;

}

从bootstrap的基本网格结构，不难看出，bootstrap是使用行来创建列的水平组的。为了获得适当的内边距和对齐，行必须放在 .container class内。通过向行内添加带有 .col-*-* class 的<div>元素，可以快速创建网格布局。因为网格系统是通过横跨十二个可用的列来创建的，因此每一行中横跨的列数和始终是不大于十二。所以要创建三个宽度相等的列，则需要使用三个 .col-*-4 class。

2，网格选项

Bootstrap网格系统可以跨多个设备工作：

　在超小设备上对行进行分列时，使用 .col-xs-* class ; 在小型设备上对行进行分列时，使用 .col-sm-* class ;

　在中型设备上对行进行分列时，使用 .col-md-* class ; 在大型设备上对行进行分列时，使用 .col-lg-* class ;每一行的列数量和要确保是12列！

3，偏移

　Bootstrap中偏移使用 .col-*-offset-* 类，该类通过增加列的左外边距来进行偏移，第一个*表示设备大小：xs，sm，md，lg.一般情况下是在大屏幕显示器上使用偏移，即 .col-md-offset-*。第二个*表示偏移量，范围是1~11.

例如：

 <div class="container">

    <h4>偏移前</h4>

    <div class="row" >

       <div class="col-md-6"

          style="background-color: #dedef8;box-shadow:

          inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

          <p>bootstrap 网格系统1</p>

       </div>

    </div>

    <h4>偏移后</h4>

    <div class="row" >

       <div class="col-md-6 col-md-offset-3"

          style="background-color: #dedef8;box-shadow:

          inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

          <p>bootstrap 网格系统2</p>

       </div>

    </div>

 </div>

网页表现为：

4，嵌套

在一个已有的 .col-md-*列内新添加一个.row，并对其进行分列。被嵌套的行应包含一组列，同样这组列的个数不能超过12（没有必要12列全部占满）

例如下面（一行两列中的第二列被嵌套两行两列）：

        <div class="container">

            <h3>列嵌套</h3>

            <div class="row">

                <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                    inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >

                    <p>网格系统的第一列</p>

                    <p>在每一列中都可以添加一些内容</p>

                </div>

                <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <div class="row">

                        <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>嵌套列中的第一行第一列</p>

                        </div>

                        <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>嵌套列中的第一行第二列</p>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-5" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>第二行第一列</p>

                        </div>

                        <div class="col-md-7" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>第二行第二列</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

网页表现为:

5，排序

利用 .col-md-push-* 和 .col-md-pull-*类可以实现内置网格列的顺序，其中*的范围是1~11。

例如,在上面例子的基础上，交换第二列中，第二行中的两列：

        <div class="container">

            <h3>列嵌套</h3>

            <div class="row">

                <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                    inset 1px -1px 1px #444, inset -1px 1px 1px #444;" >

                    <p>网格系统的第一列</p>

                    <p>在每一列中都可以添加一些内容</p>

                </div>

                <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                    inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <div class="row">

                        <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>嵌套列中的第一行第一列</p>

                        </div>

                        <div class="col-md-6" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>嵌套列中的第一行第二列</p>

                        </div>

                    </div>

                    <div class="row">

                        <div class="col-md-5 col-md-push-7" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>第二行第一列</p>

                        </div>

                        <div class="col-md-7  col-md-pull-5" style="background-color: #dedef8; box-shadow:

                            inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                            <p>第二行第二列</p>

                        </div>

                    </div>

                </div>

            </div>

        </div>

表现为：

6，总结

使用类有:

　　容器： .container 行： .row 列： .col-*-* 偏移：.col-*-offset-* 排序: .col-*-push-* .col-*-pull-*。

巴特西