Response frame --Bootstrp

Disclaimer: This article is a blogger original article, follow the CC 4.0 BY-SA copyright agreement, reproduced, please attach the original source link and this statement.

This link: https://blog.csdn.net/qq_20535249/article/details/100550583

Container and grid systems

1.流体容器   .container-fluid：相当于width：auto
            两侧15px  padding

2.固定容器
			阈值					    	width(内容区，包括内边距)
			
		lg大于等于1200(lg 大屏pc)       	1170（1140+槽宽padding-left、padding-right：15px）
		
		md大于等于992(md 中屏pc)		 	970（940+槽宽...）
					
		sm大于等于768(sm 平板)	    	750（720+槽宽...）
		
		xs小于768(xs 移动手机)		    	auto
		
     	【注：width:auto；加上pdiding后，此时的width不是100%，而是会适当缩减
     	让padding加上width区域为100%。
        width:100%；会强制将元素width变成和父元素一样的宽，
        如果此时加上padding，此时屏幕会出现横向滚动条，因为padding + width
        已经超过屏幕宽度
        注意：width指内容区域，不包括padding和border】
        
        两侧15px padding
		

3.栅格系统

     <div class="container"> 
		<div class="row"> //第一行
			<div class="col-lg-10">col-lg-10</div>
			<div class="col-lg-2">col-lg-2</div>
		</div>
		<div class="row"> //第二行
			<div class="col-lg-6">col-lg-6</div>
			<div class="col-lg-6">col-lg-6</div>
		</div>
	</div>

Source code analysis

1.流体容器&固定容器 公共样式
  margin-right: auto;
  margin-left: auto;
  padding-left:  15px;
  padding-right: 15px;	

2.固定容器 特定样式
	顺序不可变
	  @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;
	  }

3.行
   	margin-left:  -15px;
	margin-right: -15px;

4.列    （主要运用less递归：唯一循环方法）
	.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;
        }
    
	.make-grid(xs)——--->》列源码第二步
		  float-grid-columns(@class);
				 * .col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,...col-xs-12{
				 *     float: left;
				 * }
		  .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;
				 * } 
		  .loop-grid-columns(@grid-columns, @class, pull);
		  .loop-grid-columns(@grid-columns, @class, push);
		  		 *push                  pull:
				 * .col-xs-push-12{         .col-xs-pull-12{      
				 *     left:12/12;              right:12/12;
				 * }                        }
				 * .col-xs-push-11{
				 *     left:11/12;
				 * }
				 * ...                      ...
				 * .col-xs-push-1{
				 *     left:1/12;
				 * } 
				 * .col-xs-push-0{           .col-xs-pull-0{
				 *     left:auto;               right:auto;
				 * }                         }
				 
		  .loop-grid-columns(@grid-columns, @class, offset);
		  offset实际上修改的是 margin-left

Responsive tool

控制隐藏与显示

The beauty of the design model grid box

容器两边具有15px的padding	、
行    两边具有-15px的margin	
列    两边具有15px的padding

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