删格系统的实现原理

最新推荐文章于 2024-05-29 11:35:13 发布

sunnyboysix

最新推荐文章于 2024-05-29 11:35:13 发布

阅读量750

点赞数 1

分类专栏：前端开发文章标签：前端 bootstrap 栅格布局

本文链接：https://blog.csdn.net/sunnyboysix/article/details/80312200

版权

前端开发专栏收录该内容

47 篇文章 1 订阅

订阅专栏

栅格系统的实现原理很简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询。

.col-xs- 超小屏幕手机 (<768px)   小于 768px 的时候，用 col-xs-12 类对应的样式；
.col-sm- 小屏幕平板 (≥768px)   在 768px 到 992px 之间的时候，用 col-sm-9 类对应的样式；
.col-md- 中等屏幕桌面显示器 (≥992px)   在 992px 到 1200px 之间的时候，用 col-md-6 类对应的样式；
.col-lg- 大屏幕大桌面显示器 (≥1200px)   大于 1200px 的时候，用 col-lg-3 类对应的样式；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<title></title>
	</head>
	<body>
		<div class="container">
			<div class="row" >
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
					<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
					<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
					<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
					<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
					<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
			</div><br /><br />
			
			<div class="row" >
			     <div class="col-md-4" style="border: 1px solid red;">col-md-4</div>
			     <div class="col-md-8" style="border: 1px solid red;">col-md-8</div>
			</div><br /><br />
			
			<div class="row" >
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
			</div><br /><br />
			
			<div class="row" >
					<div class="col-md-6" style="border: 1px solid blue;">col-md-6</div>
					<div class="col-md-6" style="border: 1px solid blue;">col-md-6</div>
			</div><br /><br />
		</div>
	</body>
</html>

不添加<div class="row"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="js/bootstrap.min.js" ></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<title></title>
	</head>
	<body>
		<div class="container">
			
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
				<div class="col-md-1" style="border: 1px solid black;">col-md-1</div>
			<br /><br />
			
			     <div class="col-md-4" style="border: 1px solid red;">col-md-4</div>
			     <div class="col-md-8" style="border: 1px solid red;">col-md-8</div>
			     
			<br /><br />
			
			<div class="row" >
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
				<div class="col-md-4" style="border: 1px solid purple;">col-md-4</div>
			</div><br /><br />
			
			<div class="row" >
					<div class="col-md-6" style="border: 1px solid blue;">col-md-6</div>
					<div class="col-md-6" style="border: 1px solid blue;">col-md-6</div>
			</div><br /><br />
		</div>
	</body>
</html>

因为row在css的定义里,将margin-left margin-right都定义为-15px。

	<div class="row">
				<div class="col-md-9" style="border: 1px solid black;background-color: gray;" >
					<div class="row">
					<div class="col-md-6" style="border: 1px solid red;">level2:col-md-6</div>
					<div class="col-md-6" style="border: 1px solid red;">level2:col-md-6</div>
					</div>
				</div>
				<div class="col-md-3" style="border: 1px solid black;background-color: red;">col-md-3</div>
			</div>

嵌套布局

关于row详细有机会再详细介绍

sunnyboysix

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
删格系统的实现原理

栅格系统的实现原理很简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询。.col-xs- 超小屏幕手机 (&lt;768px) 小于 768px 的时候，用 col-xs-12 类对应的样式；.col-sm- 小屏幕平板 (≥768px) 在 768px 到 ...
复制链接

扫一扫

专栏目录