响应式框架——Bootstrp

容器与栅格系统

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>

源码分析

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

响应式工具

控制隐藏与显示

栅格盒模型设计的精妙之处

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

为了维护槽宽的规则,
	列两边必须得要15px的padding
为了能使列嵌套行(列里添行)
	行两边必须要有-15px的margin
为了让容器可以包裹住行(容器扩容)
	容器两边必须要有15px的padding
上一篇:苹果研发团队钟爱手指陀螺?


下一篇:c – Perl XSPP – std :: string的多重定义