35 bootstrap——栅格系统

栅格系统

描述：

栅格系统（grid System）是bootstrap创建的一个用于页面构建的html布局系统
该系统通过提供的类名来将容器等分12个结构（可理解为每行12列）
通过对容器的宽度指定（如3+3+3+3）来进行页面的快速构建

说明：

(1)响应式布局（一套代码，能在不同的页面中有不同的加载效果）
(2)提供了很多预定义的类，通过这些类名能够快速获得css样式

内容（常用）：

(1)通过使用.container类名,来定义一个栅格容器
(2)row:通过使用.row类名来定义一个栅格中的行容器
(3)col-[screenStyle]-[percent]:通过使用复合类名，来定义栅格中的一个栅格大小

a.screenStyle:指的是设备类型（样式能够生效的设备类型）
- 　　(I)col-xs-... ：超小型设备（宽度小于768像素的设备）及以上设备
- 　　(II)col-sm-... ：小型设备（宽度大于768但小于992像素）的设备及以上设备
- 　　(III)col-md-... ：中型设备（宽度大于992像素但小于1200px）的设备及以上
- 　　(IV)col-lg-... ：大型设备（宽度大于1200px)
b.percent:指的是栅格在一行中占多少列，可选值为1-12
示例：class="col-xs-4 col-lg-8" 说明此列在大型设备中占8长度，非大型设备中占4

(4)col-[screenStyle]-offset-[percent]:起始长度，需要和（3）搭配使用，例如：class="col-md-3 col-md-offset-4"

补充：栅格container能够赋予页面元素一个默认水平居中的效果（通过设置margin和padding）

实例演练

要求

构建一个栅格系统，一行2列，第一列占8，第二列占4（8+4=12），第一列蓝色填充，第二列粉色填充。

效果先看

核心代码

<div class="container">
		<div class="row">
			<div class="col-md-8 skyblue">左面的栅格</div>
			<div class="col-md-4 pink">右面的栅格</div>
		</div>
</div>

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>栅格系统</title>
		<!-- 引入bootstrap.min.css -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<!-- 引入jQuery -->
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入bootstrap.min.js -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.skyblue{ background-color: skyblue;}
			.pink{ background-color: pink;}
		</style>
	</head>
	<!-- 
	 bootstrap栅格
		描述：栅格系统（grid System）是bootstrap创建的一个用于页面构建的html布局系统
			该系统通过提供的类名来将容器等分12个结构（12列）
			通过对容器的宽度指定（如3+3+3+3）来进行页面的快速构建
		说明：
			(1)响应式布局（一套代码，能在不同的页面中有不同的加载效果）
			(2)提供了很多预定义的类，通过这些类名能够快速获得css样式
		内容（常用）：
			(1)通过使用.container类名,来定义一个栅格容器
			(2)row:通过使用.row类名来定义一个栅格中的行容器
			(3)col-[screenStyle]-[percent]:通过使用复合类名，来定义栅格中的一个栅格大小
				a.screenStyle:指的是设备类型（样式能够生效的设备类型）
					(I)col-xs-... ：超小型设备（宽度小于768像素的设备）及以上设备
					(II)col-sm-... ：小型设备（宽度大于768但小于992像素）的设备及以上设备
					(III)col-md-... ：中型设备（宽度大于992像素但小于1200px）的设备及以上
					(IV)col-lg-... ：大型设备（宽度大于1200px)
				b.percent:指的是栅格在一行中占多少列，可选值为1-12
			(4)col-[screenStyle]-offset-[percent]:起始长度，需要和（3）搭配使用，例如：class="col-md-3 col-md-offset-4"
		补充：
			栅格container能够赋予页面元素一个默认水平居中的效果（通过设置margin和padding）
			如非必要，栅格不要嵌套页面
			栅格不是切分页面，而是切分它的父元素（如container）
			
	 -->
	<body>
		<div class="container">
			<div class="row">
				<div class="col-md-8 skyblue">左面的栅格</div>
				<div class="col-md-4 pink">右面的栅格</div>
			</div>
		</div>
	</body>
</html>