栅格布局
        1）四种栅格布局
            a.手机端
                .col-xs-* （屏宽768px以下）
            b.平板电脑端
                .col-sm-* （屏宽768px-992px之间）版心最大宽度750px
            c.中型PC端
                .col-md-* （屏宽992px-1200px之间）版心最大宽度970px
            d.大型PC端
                .col-lg-* （屏宽1200px以上）版心最大宽度1170px

	超小屏幕 手机 (<768px)	小屏幕 平板 (≥768px) 中等屏幕 桌面	显示器 (≥992px)	大屏幕 大桌面显 示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于 这些阈值时将变为水平排列 C
.container 最大宽度	None （自 动）	750px	970px	1170px
列数 （ column ）	12
最大列宽 （ column ）	自动	~62px	~81px	~97px
槽宽 （ gutter ）	30px （每列 左右均有 15px）
可嵌套	是
偏移（Offffsets）	是
列排序	是

        2）布局方式
            <div class="container">  或container-fluid
                <div class="row">
                    <div class="col-md-*">     .col-xs-*/.col-sm-*/.col-md-*/.col-lg-*
                        ...
                    </div>
                </div>
            </div>

            注意：多余的列会自动另起一行。
        3）列偏移
            .col-xs-offset-*
            .col-sm-offset-*
            .col-md-offset-*
            .col-lg-offset-*

        4）列排序
            .col-xs-push-* .col-xs-pull-*
            .col-sm-push-* .col-sm-pull-*
            .col-md-push-* .col-md-pull-*
            .col-lg-push-* .col-lg-pull-*

        5）响应式（多端布局）

        例：布局响应式：PC大屏4栏、普屏3栏、平板2栏、手机1栏。

            a.图片响应式
                .img-responsive

            b.隐藏响应式
                .hidden-xs
                .hidden-sm
                .hidden-md
                .hidden-lg

            c.字体响应式

                标题h1在手机显示的时候字体大小为30px，颜色变为红色。
                用媒体查询实现。