bootstrap-栅格系统

栅格系统：是通过一系列的行和列的组合来创建页面的布局

理论知识：

1. 行（row）必须包含在container（固定宽度）或者是container-fluid（100%宽度）中

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

3. 内容放于列（column）中，只有列可以作为行（row）的直接子元素

4. 类似 .row 和.col-xs-4这种预定义的类，可以用来快速创建栅格布局，bootstrap源码中定义的mixin也可以用来创建语义化的布局

5. 通过“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消为.container元素设置的padding，也就是间接为“行（row）”所包含的“列（column）”抵消了padding。

6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建

7. 如果一“行（row）”中包含的“列（column）”大于12 ，多余的“列（column）”所包含的元素将被作为一个整体另起一行排列。

8. 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此在元素上应用任何[.col-md-*]栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类，因此，在元素上应用任何【.col-lg-*】不存在，也影响大屏幕设备。

屏幕大小分类：

超小屏幕（手机）：<768px；

小屏幕（平板）：[768px,992px);

中等屏幕（桌面显示器）：[992px,1200px);

大屏幕（大桌面显示器）：[1200px,

 

	超小屏幕（手机）	小屏幕（平板）	中等屏幕（桌面显示器）	大屏幕（大桌面显示器）
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
类前缀	（.col-xs-）	(.col-sm-)	(.col-md-)	(.col-lg-)
列（column）数	12列
最大列宽	自动	62px	81px	97px
槽宽	30px（每列左右均匀15px）就是内边距
可嵌套	是
偏移	是
列排序	是

 注：大屏幕可以继承小屏幕的设置，但小屏幕不能继承大屏幕的设置

例如：使用超小屏幕的类前缀设置三个<div class="col-xs-3" style="background-color: red;">col1</div>,对于大屏幕来说，这个配置也适用，但是把div的class改成大屏幕的类之后，小屏幕就不适用该配置。

在类前缀后边带上数字就代表该列占几份，比如：.col-xs-1就代表占一份，.col-xs-4就代表占4份。

如图所示：

• 代码结构：

• <div class="container">  //container或者是container-fluid
  	<div class="row">    //行
  		<div class="" style="background-color: red;">col1</div>
  		<div class="" style="background-color: yellow;">col2</div>
  		<div class="" style="background-color: blue;">col3</div>
  		<div class="" style="background-color: green;">col4</div>
  	</div>
  	<hr >
  	<div class="row">    //行
  		<div class="col-xs-3" style="background-color: red;">col1</div>
  		<div class="col-xs-3" style="background-color: yellow;">col2</div>
  		<div class="col-xs-3" style="background-color: blue;">col3</div>
  		<div class="col-xs-3" style="background-color: green;">col4</div>
  	</div>
  </div>

   

• container效果图：
• 
• container-fluid效果图：
• 

• ---

   

•  

•