码迷,mamicode.com
首页 > 其他好文 > 详细

35 bootstrap——栅格系统

时间:2020-02-09 11:27:45      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:pad   charset   image   栅格系统   str   通过   java   tst   很多   

栅格系统

描述:

栅格系统(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>

  

  

 

35 bootstrap——栅格系统

标签:pad   charset   image   栅格系统   str   通过   java   tst   很多   

原文地址:https://www.cnblogs.com/Scorpicat/p/12286260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!