响应式布局---3. Bootstrap栅格系统

1.1 栅格系统介绍

利用Bootstrap做响应式内部采取的是一种叫做栅格系统的方式。
栅格系统：英文名girdsystems,又称网格系统，它是指将页面布局划分成等宽的列，然后通过列数的定义来模块化页面布局。
与rem划分等份数不同的是：rem响应式布局中是将整个屏幕划分成若干等分，而栅格系统是将页面内容(container)划分成若干等份。
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。
Bootstrap里面的container宽度是固定的，但是不同屏幕下，container的宽度不一样，我们再把container划分为12等份。
Bootstrap也采用了normalize.css的初始化，以后在引用Bootstrap的时候就不再需要另外引入normalize.css文件。
https://v3.bootcss.com/css/

1.2 栅格选项参数

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
体会Bootstrap中文网：https://www.bootcss.com/ 的以下部分的伸缩布局：

实现

• 行row必须放到container布局容器里面
• 我们实现列的平均分配需要给列添加类前缀
• xs-extral small:超小；sm-small:小；md-medium：中等；lg-lage:大；
• 列column大于12，多余的列所在元素将被作为一个整体另起一行排列
• 每一列默认有15px的padding
• 可以同时为一列指定多个设备的类名，以便划分不同的份数，例如：class="col-md-4 col-sm-6"

举例1：

    

        
 当孩子的份数相加等于12 则孩子可以占满整个container宽度
        

            
            
1
            
2
            
3
            
4
        
        

            
            
1
            
2
            
3
            
4
        

        
 当孩子的份数相加小于12 则孩子可以占不满整个container宽度
        

            
            
1
            
2
            
3
            
4
        

        
当孩子的份数相加大于12 则多出的那一列另起一行显示
        

            
            
1
            
2
            
3
            
4
        
    

效果图如下：

举例2：

    

        一.
        

            
            
1
            
2
            
3
            
4
        
        二.
        

            
            
1
            
2
            
3
            
4
        
    

1.3 列嵌套

    

        

            

                
                
                

                    
a
                    
b
                
            
            
2
            
3
        
    

1.4 列偏移

使用.col-md-offset-类，可以将列向右偏移，这些类实际上是通过使用选择器为当前元素增加了左侧的边距(margin)。

    

        
        

            
            
左侧
            
            
右侧
        
        
        

            
            
中间盒子
        
    

1.5 列排序

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

    

        

            
            
左侧
            
            
右侧
        
    

1.6 响应式工具

为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面工作。

与之相反的是visible-xs、visible-sm、visible-md、visible-lg是显示某个页面内容。

    

        

            

                1
                我会在大屏下显示哦
            
            
2
            
            
我会变魔术呦
            
4