Bootstrap3 --- 栅格系统&源码分析

Bootstrap3 — 栅格系统&源码分析

声明：在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。在Bootstrap 4中，Bootstrap团队做了大量改进，包括迁移到 Sass、重写所有的 JavaScript 插件、全新自定义选项、不再支持 IE8等，而此篇章中内容基于Bootstrap 3，需要学习新的内容可前往Bootstrap中文官网（附链接：https://www.bootcss.com）进行学习。

提纲：

**栅格系统**
	1.容器
		（1）流体容器、固定容器公共样式：
				width：auto、两侧15px padding
		（2）固定容器：
						     阀值                               width
					xs(小于768px)	                            auto
					sm（大于等于768px）                        720px+槽宽
					md（大于等于992px）                        940px+槽宽
					lg（大于等于1200px）                        1140+槽宽
			两侧15px padding
    
    2.行
    	两侧 -15px margin
    
    3. 列
    	公共样式
    		两侧15px padding、相对定位	
    	float
    	width
    		1~12
    	left
    	right
    		0~12
    		0：auto
    	margin-left（offset）
    		0~12
    4.列排序时，阀值上的样式不能跳跃排序

一、初识Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap提供了优雅的HTML和CSS规范，Bootstrap3及以前版本都是基于Less编写的。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。

二、Bootstrap一些基本内容

1. Bootstrap的使用

使用Bootstrap时有两种方式：
（1） 可以通过在官网将源码包下载，进行本地引入的方式；
（2） 可以通过远程CDN（远程前端CDN链接：https://www.bootcdn.cn）引用的方式进行使用。

2. Bootstrap容器

Bootstrap 需要为页面内容和栅格系统包裹一个容器，此容器分为两类：.container（固定） 类容器、.container-fluid类容器。

（1）流体容器

流体容器会随屏幕大小随时适应相应。

（2）固定容器

固定容器会根据屏幕大小范围，呈现出固定的样式大小。

阀值	width
≥1200px（lg 大屏PC）	1140px + 30px(槽宽)
≥992px && ≤1200px（md 小屏PC）	940px + 30px(槽宽)
≥768px && ≤992px（sm 平板）	720px + 30px(槽宽)
≥768px（xs 移动手机）	auto

三、Bootstrap栅格系统&源码分析

1. Bootstrap容器源码分析

（1）流体容器、固定容器公共样式

注意：为了能使容器包裹“行”，容器两边必须要有两个15px的padding。

//让容器水平居中
margin-right：auto;
margin-left：auto;
//为了能使容器包裹“行”，容器两边必须要有两个15px的padding
padding-left：15px;
padding-right：15px;

（2）固定容器特定样式

注意：下列代码的顺序不可变，因为是此代码为顺序加载，而Bootstrap是响应式布局，倾向移动端先展示，因此先默认加“xs”，然后再判断用户屏幕大小加载相应“sm”、“md”、“lg”。

@media (min-width:@screen-sm-min){
     
	width:@container-sm;
}
@media (min-width:@screen-md-min){
     
	width:@container-md;
}
@media (min-width:@screen-lg-min){
     
	width:@container-lg;
}

2. Bootstrap 行 源码分析

注意：为了能使“列”嵌套“行”，“行”两边必须要有-15px的margin。

margin-left：ceil（（@gutter/ -2））;//-15px
margin-right：floor（（@gutter/ -2））;//-15px

3. Bootstrap 列 源码分析

注意：为了维护槽宽的规则，“列”两边必须要有15px的padding。

//1.执行.make-grid-columns混合
.make-grid-columns（）  ---->//此混合执行得出
	/*
	*     {
	*			.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
	*			.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
	*			......
	*			.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12,{
	*				position：relative；
	*				min-height:1px;
	*				padding-left:15px;
	*				padding-right:15px;
	*			}
	*		}
	*/
	
	
//2.执行.make-grid（xs）混合
.make-grid（xs）  ---->//此混合执行得出
	{
     
		//2.1执行float-grid-columns(@class)混合
		float-grid-columns(@class);  ---->//此混合执行得出
		/*
		*      {
		*			.col-xs-1,
		*			.col-xs-2,
		*			......
		*			.col-xs-12{
		*				float:left;
		*			}
		*		}
		*/
		
		//2.2执行.loop-grid-columns(@grid-columns,@class,width)混合	
		.loop-grid-columns(@grid-columns,@class,width);   ---->//此混合执行得出
		/*
		*
		*	       {
		*				.col-xs-12{
		*					width:12/12;//百分比
		*				}
		*				.col-xs-11{
		*					width:11/12;//百分比
		*				}
		*				......
		*				.col-xs-1{
		*					width:1/12;//百分比
		*				}
		*			}
		*/
		
	
		
		//2.3执行.loop-grid-columns(@grid-columns,@class,pull)混合，此段混合也称为列排序
		.loop-grid-columns(@grid-columns,@class,pull);  ---->//此混合执行得出
		.loop-grid-columns(@grid-columns,@class,push);  ---->//此混合执行得出
		/*
		*		2.3.1 pull:
		*			.col-xs-pull-12{
		*				right:12/12;
		*			}
		*			.col-xs-pull-11{
		*				right:11/12;
		*			}
		*	        
		*	       ......
		*	
		*	       .col-xs-pull-0{
		*				right:auto;
		*			}        
		*
		*	
		*		2.3.2 push:
		*			.col-xs-push-12{
		*				left:12/12;
		*			}
		*			.col-xs-push-11{
		*				left:11/12;
		*			}
		*	        
		*	       ......
		*	
		*	       .col-xs-push-0{
		*				left:auto;
		*			}  
		*/
		//2.4执行.loop-grid-columns(@grid-columns,@class,offset)混合，此段混合成为列偏移
		.loop-grid-columns(@grid-columns,@class,offset);  ---->//此混合执行得出
		/*
		*  		.col-xs-offset-12{
		* 			margin-left:12/12;
		* 		}
		*		.col-xs-offset-11{
		* 			margin-left:11/12;
		* 		}
		*
		*  		......
		* 
		* 		.col-xs-offset-0{
		* 			margin-left:0;
		* 		}
		*/	
	}