“这是我参与8月更文挑战的第25天，活动详情查看： 8月更文挑战”

前言

上一篇(传送门)我们一起了解了什么是栅格系统，本篇我们就一起来学习栅格系统的一些特点，并且结合案例一起来对这些特点进行分析。

栅格系统

栅格系统特点

栅格特点

• “行( row)”必须包含在.container（固定宽度)或.container-fluid (100% 中
• 行使用的样式".row”，列使用样式" col--”元素内容应当放置于“列(column)” 内
• 基本的书写方式必须是:容器--行---列。 HTML表格:定义一个表格----行----单元格
• 栅格参数:“col-屏幕尺寸-占用列数”

栅格系统入门案例

<!-- 定义一个布局容器-->
   <div class="container">
	   <!-- 在布局容器中定义一行-->
	   <div class="row">
		    <!-- 在行上定义列,书写顺序决定显示顺序，占的列数决定大小-->
			<div class="col-lg-2" style="border: 1px solid red;">
				这是一个占2列的div
			</div>
			<div class="col-lg-4" style="border: 1px solid red;">
				这是一个占4列的div
			</div>
			<div class="col-lg-6" style="border: 1px solid red;">
				这是一个占6列的div
			</div>
	   </div>
   </div>

栅格系统特点分析

• 列元素的书写顺序，决定布局顺序，先写的列元素会被先布局到行上。
• 列元素的占用列数，定义列元素的大小。
• 一个row下，如果设置的col列数总和小于等于12，那么该row下元素在一行排列;
• 一个row下,如果设置的col列数总和大于12,那么超出的元素会另起一行排列;
• 行和列可以进行无限嵌套，嵌套方式必须为列---行---列----行.....
• 一个row下有12列。

<div class="container">	   
	   <div class="row">
                <!-- 在列上再定义行,一个row有12列-->
		<div class="col-lg-10" style="border: 1px solid red;">
                    <div class="row" >					
				<div class="col-lg-8" style="border: 1px solid blueviolet;">
					在列上定义行，再定义列。
				</div>
			</div>
		</div>
			
	   </div>
   </div>

写在最后

关于栅格系统的特点及特点分析我们就学习到这里，大家可以结合以上案例来更具体的学习，如有不足之处，欢迎掘友们批评指正。