bootstrap的栅格系统

一.栅格系统

栅格系统：栅格系统通过一系列包含内容的行和列来创建页面布局。
---------------移动端设备 优先

----行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
                    使用行来创建列的水平组。或者.contaniner-fluid(占据整个窗口，宽度为100%)中
                    内容应该放置在列内，且唯有列可以是行的直接子元素。
                    ----.container----响应式布局容器
                    ----.container-fluid----流式布局容器
                    ----流式布局和响应式布局不允许嵌套使用
                    ----可重新设置或者增加改变布局容器的样式
 					预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
                    列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows行 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
                    网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。
                    ----列数总和：12;----表示跨越的范围
                    --占据的份数，即row中的column列占据的份数----样式可允许嵌套--即8份中可分为其他份数
                    --col-xs-12 col-sm-4-------最小为一列，一个占据12份，最大为三列，一个占据的为4份，总共12份

设备的范围

----(.col-xs-):超小设备手机 <768px
(.col-sm-):小型设备平板电脑 >=768px
(.col-md-):中型设备台式电脑 >=992px
(.col-lg-):大型设备台式电脑 >=1200px

 ----(.col-xs-):超小设备手机  <768px
                    (.col-sm-):小型设备平板电脑  >=768px
                    (.col-md-):中型设备台式电脑  >=992px                      
                    (.col-lg-):大型设备台式电脑  >=1200px

                ----container中设置了paddng-left;padding-right:15px;
                ----row填充了父元素的15px左右的内边距，margin-left;magrin-right

二.媒体查询

  媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。
             Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。

 --设置在不同的布局中的容器的样式
                ----简写：@media  (min-width: 768px) { .container { width: 750px; } } 
                ----@media screen and  (min-width: 768px) { .container { width: 750px; } } 
                    -----当屏幕宽度大于最小宽度768px时，执行.container { width: 750px; }
                ----@media  screen and  (max-width: 992px) { .container { width: 970px; } } 
                    -----当屏幕宽度小于最大宽度992px时，执行.container { width: 970px; }
                ----@media  screen and  (max-width: 1200px) { .container { width: 1170px; } }
                ----@media  screen and  (min-width: 768px) {
                            .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, 
                            .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, 
                            .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12
                    } 
                ----@media screen and(max-width:768px) and (min-width:992px){
                        .box{
                            height:50px;
                        }
                    -----当大于768px，小于992px时，使.box的高度为50px
                }

                ----当使用min-width时，顺序并不能颠倒
                    ----大于
                    ----3200px----700px-----100px------顺序递减

三.bootstrap中的其他操作

      列偏移：col-md-offset-,,,,可以将列向右侧偏移
                ----可在不同的设备中，进行相关的偏移
    
    列排序：push--向后推，运动  pull--向前拉，运动，，，，，
                ----col-lg-push-9  cole-lg-pull-3---并不影响其他列的位置，但移动的部分会把其他的列的内容覆盖掉！！！！！！
                ----col-lg-9 col-lg-push-3 ------大型设备中列向后运动三份，其他的列的位置不变,但移动的部分会被其他的列覆盖掉！！！！！

    bootstrap中的响应式工具：
            ----显示和隐藏
                ----visible:可见的
                    ----3.2.0版本之前的用法：visible-lg------超大型屏幕显示
                    ----3.2.0版本之后的版本：visible-lg-block：inline inline-block----超大型屏幕显示
                ----hidden
                    ----在3.2.0版本之后的，建议使用hidden
                    ----hidden-md  中屏幕隐藏，其他的显示
                    ----hidden-lg  大屏幕隐藏，其他的显示
                    ----hidden-sm: 小屏幕隐藏，其他屏幕显示