bootstrap学习笔记

qq_44753552

于 2020-09-11 20:16:31 发布

阅读量116

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/qq_44753552/article/details/108540907

bootstrap 专栏收录该内容

1 篇文章

订阅专栏

本文深入剖析了Bootstrap框架中的栅格系统，详细介绍了流体容器和固定容器的区别，以及它们在不同屏幕尺寸下的表现。通过源码分析，揭示了栅格系统的设计原理，包括行、列、偏移和排序等关键概念。同时，文章还探讨了响应式工具的应用，以及栅格盒模型的精妙设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、容器

流体容器

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

固定容器

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

		阈值								width
		大于等于1200(lg 大屏pc)       	1170（1140+槽宽）
		
		大于等于992(md 中屏pc)		 	970（940+槽宽）
		小于1200
		
		大于等于768(sm 平板)		 		750（720+槽宽）
		小于992
		
		小于768(xs 移动手机)				auto

栅格系统（主要）

		<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 class="row">
				<div class="col-lg-4">col-lg-4</div>
				<div class="col-lg-8">col-lg-8</div>
			</div>
		</div>
		//style
		.container{
			background: pink;
		}
		div[class|=col]{
			border: 1px solid;
		}

二、栅格源码分析

	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.列
		.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);
					* .col-xs-offset-12{ //列偏移
					*     margin-left:12/12;
					* }
					* .col-xs-offset-11{
					*     margin-left:11/12;
					* }
					* ...
					* .col-xs-offset-1{
					*     margin-left:1/12;
					* } 
					* .col-xs-offset-0{
					*     margin-left:0;
					* }

三、响应式工具

		<div class="container">
			<div class="jumbotron hidden-xs">
			  <h1>Hello, world!</h1>
			</div>
			<div class="jumbotron visible-xs">
			  <h1>myhome</h1>
			</div>
		</div>

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

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

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