一.今日完成的内容和收获：

（一）bootstrap

1.栅格系统

（1）简介

1）“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。

2）通过“行（row）”在水平方向创建一组“列（column）”。

（2）栅格参数

常用设备尺寸：

超小屏幕（xs）：<768

小屏幕（sm）：[ 768，992）

中等屏幕（md）：[ 992，1200）

大屏幕（lg）：>= 1200

注：

1）较大尺寸的屏幕未设置时，会默认继承较小尺寸

2）较小尺寸的屏幕未设置时，会默认独占一行

3）列的网格总数不能超过12，否则多余的会另起一行

（3）列偏移（只能往右，后面的都会向右移动）

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将.col-md-4元素向右侧偏移了4个列（column）的宽度。

  <!-- 列偏移，添加类col-md-offset-* ，只能向右移动，后面的都会向右移动   使用较多-->

        <div class="row"> 

            <div class="col-md-4">col-md</div>

            <div class="col-md-4 col-md-offset-2">col-md</div>

            <div class="col-md-2">col-md</div>

        </div>

        <hr>

        <!-- 用列偏移实现居中  4+4=8个网格，后面剩下4个网格，偏移2个 网格就可以实现居中  -->

        <div class="row">

            <div class="col-md-4 col-md-offset-2">col</div>

            <div class="col-md-4">col</div>

        </div>

（4）列排序

通过使用 .col-md-push-* （向右）和 .col-md-pull-* （向左）类就可以很容易的改变列（column）的顺序。

<!-- 列排序 添加类col-md-push-* （向右） col-md-pull-*（向左） 实现位置的交换 -->

        <div class="row"> 

            <div class="col-md-4 col-md-push-2">col1</div>

            <div class="col-md-2 col-md-pull-4">col2</div>

            <div class="col-md-4">col3</div>

        </div>

（5）嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

        <div class="row">

            <div class="col-md-6">

                <div class="row">

                    <div class="col-md-3">td</div>

                    <div class="col-md-3">td</div>

                    <div class="col-md-3">td</div>

                    <div class="col-md-3">td</div>

                </div>

            </div>

            <div class="col-md-6">col2</div>

        </div>

二.遇到的问题

无

三.明天的计划

进行任务八