BootStrap知识概括

@TOC

BootStrap简介

BootStrap简介：

• Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。
• Bootstrap提供了优雅的HTML和CSS规范，Bootstrap3及以前版本都是基于Less编写的。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。
• BootStrap中文网
• BootStrap英文网
• 注意：在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。在Bootstrap4中，Bootstrap团队做了大量改进，包括迁移到 Sass、重写所有的 JavaScript 插件、全新自定义选项、不再支持IE8等，

容器

CSS的width:100%和width:auto区别：

• width:100% 并不包含margin-left margin-right的属性值，直接取其父容器的宽度加上含margin-left/margin-right的值。如果设置了margin那新的width值是容器的宽度加上margin的值。（细心观察）就会发现加了margin相对应的边就会多出设置的空白。而且会多出横向滚动条因为宽度已经超出了屏幕的范围。(这条相对于父容器是body)。
• width:auto包含margin-left/margin-right的属性值。其值包含margin-left/margin-right的值。width:auto总是占据整行！！！这其中margin的值已经包含其中了（也就是一整行）如果要设置margin的值那就用一整行然后减去margin的值就得到了现在的宽度了。减去的这个值就是相应边得空白。显著的特征是这个没有横向滚动条出现也就是宽度没有增加。
• 在IE6下显示不正常，但是在IE8和IE9下显示正常，可能是IE8和IE9对width:100%的解析与IE6不同所致，但是两者对width:auto的解析是一致的。

流体布局容器：

• 容器的width为100%，两边加了15px的padding。
• 流体容器会随屏幕大小随时适应相应。
• 注意: 占用页面的100宽度

<div class="container-fluid"></div>	

固定布局容器：

• 容器的width为auto，两侧有15px padding。且会随设备分辨率的不同而生产变化
• 固定容器会根据屏幕大小范围，呈现出固定的样式大小。
• 注意: 两边留有一定宽度 padding
• 父元素的width：子元素的width+padding+border+margin。

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

<div class="container"></div>	

栅格系统分析

提纲：

**栅格系统**
	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.列排序时，阀值上的样式不能跳跃排序

流体容器、固定容器公共样式：

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

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

固定容器特定样式：

• 注意：下列代码的顺序不可变，因为是此代码为顺序加载，而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;
}

Bootstrap 行源码分析：

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

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

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;
		* 		}
		*/	
	}

列排序和列偏移：

• 列排序：

<div class="col-lg-3  col-lg-push-0">col-lg-3（1）</div>

• 列偏移：

<div class="col-lg-3  col-lg-offset-3">col-lg-3（1）</div>

自定义栅格系统：

• 引入所需要的css和less文件
• 修改栅格系统入口的less文件上的开头名即可。

栅格系统总结：

• 容器两边具有15px的padding。行两边具有-15px的margin。列两边具有15px的padding。
• 为了维护槽宽的规则， 列两边必须得要15px的padding
• 为了能使列嵌套行行两边必须要有-15px的margin
• 为了让容器可以包裹住行容器两边必须要有15px的padding

响应式工具

简介：

• 为了加快对移动设备友好的页面开发工作，利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类。
• 可用的类：通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

其他工具

简介：

• 缩略图：通过缩略图组件扩展 Bootstrap 的 栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。
• 导航：Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。
• 模态框 modal.js：模态框经过了优化，更加灵活，以弹出对话框的形式出现，具有最小和最实用的功能集。
• 等等

模态框解释：

• 模态，英文词汇叫modal。「模态」的字典解释：模式的，情态的，形式的。
• 它指的是某种特定的状态。
• 因此模态框指的应当是「某种特定状态下的窗体」。它会把我们从正常状态中中断出来，将关注点放在这个特定状态的处理上。
• 有模态的概念，当然也有非模态的概念，非模态就是不将用户从“正常状态”中强制中断出来的操作。 ①也就是即使我弹出了一个对话框： <1>如果这个对话框是模态的，那么用户只能先操作完毕这个弹出的对话框中的内容或者手动关闭这个对话框后才可以继续操作； <2> 如果这个对话框是非模态的，那么用户可以选择不操作我弹出的对话框的内容，而是直接继续进行操作。