Bootstrap栅格系统

什么是栅格系统

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义classe，还有强大的mixin用于生成更具语义的布局。

row(行)必须包含在.container(固定宽度)或 .container-fluid (100% 宽度)中
column(列)必须放在.row内

栅格选项

bootstrap3.x使用了四种栅格选项来形成栅格系统，这四种选项在官网上的介绍如下图，很多人不理解，这里跟大家详解一下四种栅格选项之间的区别，其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项，我们姑且以前缀命名这四种栅格选项，他们分别是col-xs、col-sm、col-md、col-lg，我们懂英文的就知道，lg是large的缩写，md是mid的缩写，sm是small的缩写，xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。

栅格系统可以在多种屏幕设备上工作，实现了响应式。
col-xs- 超小屏幕 手机（<768px）。
col-sm- 小屏幕 平板 。（≥768px 且 <992px）。
col-md- 中等屏幕 桌面显示器（≥992px且<1200px）。
col-lg- 大屏幕 大桌面显示器（≥1200px）。

实例：
css

	div{
	   border: 1px solid #000;
	}

html

 
一行中放置不相等宽的多列
    


        

            
.col-xs-12 .col-sm-6 .col-md-8
            
.col-xs-6 .col-md-4
        

        

            
            
1
            
3
        
        

            
            
3
            
6
            
3
        
        

            
            
1
            
4
            
1
        
        

            
            

        
    
    

    

        

            
            
MD1
            
MD1
            
MD1
        
        

            
            
MD3
            
MD3
            
MD3
            
MD3
        
        

            
            
MD12
        
        

            
            
MD12
            
MD1
        
    

效果图

1.列偏移
通过.col-md-offset-* 类可以将列向右侧偏移

这里col-md-offset-1使.col-md-3向右偏移了一个列的宽度

 

            
2
            
6
            
2
 

2.列排序
通过 .col-md-push-* 和 .col-md-pull-* 类改变列的顺序

        
1
        
2