bs --- 栅格系统

最新推荐文章于 2025-05-06 09:05:03 发布

月光派件中。

最新推荐文章于 2025-05-06 09:05:03 发布

阅读量788

点赞数

文章标签： bootstrap

本文链接：https://blog.youkuaiyun.com/weixin_46064684/article/details/109118943

版权

什么是栅格系统

栅格系统又名网格系统，是有容器+行+列组成
容器最多容纳12列，多一列会在下一行显示，少一列，会把该列的位置空着

名字	类名	作用
容器	.container	响应式的布局容器
容器	.container-fluid	流失布局布局容器(百分百的宽，适合做移动端开发)

栅格系统

bs中的栅格系统将容器平均分为了12列,bs中行和列的组合来创建页面

参数	类名	作用
行	.row	行是放在容器中的
列	.column	列是当中行中的
大屏	col-lg-	大屏（>=1200px）下用到的列的类名是.col-lg
小屏	col-sm-	每一列默认左右都有15px的padding
超小屏	.col-xs-	列里面可以同时添加其他屏下的类
列偏移	.col-md-offset-	.col-md-offset-4 偏移4份
列排序	.col-md-push- 和 .col-md-pull-	push由左到右,pull由右到左

响应式工具（hidden- * visible-隐藏、显示）

类名	大屏 lg	中屏 md	小屏 sm	超小屏 xs
hidden-lg	隐藏	显示	显示	显示
hidden-md	显示	隐藏	显示	显示
hidden-sm	显示	显示	隐藏	显示
hidden-xs	显示	显示	显示	隐藏
visible-lg	显示	隐藏	隐藏	隐藏
visible-md	隐藏	显示	隐藏	隐藏
visible-sm	隐藏	隐藏	显示	隐藏
visible-xs	隐藏	隐藏	隐藏	显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../bs/css/bootstrap.css"/>
		<style type="text/css">
			.box{
				/* width: 100%; */
				height: 300px;
				border: 1px solid red;
			}
			.row div:nth-child(1){
				background: oldlace;
			}
			.row div:nth-child(2){
				background: burlywood;
			}
			.row div:nth-child(3){
				background: yellow;
			}
			.row div:nth-child(4){
				background: yellowgreen;
			}
			.row div:nth-child(5){
				background: cyan;
			}
			.row div:nth-child(6){
				background: royalblue;
			}
			.row div:nth-child(7){
				background: skyblue;
			}
			.row div:nth-child(8){
				background: navy;
			}
			.row div:nth-child(9){
				background: brown;
			}
			.row div:nth-child(10){
				background: #00FFFF;
			}
			.row div:nth-child(11){
				background: green;
			}
			.row div:nth-child(12){
				background: palevioletred;
			}
			.mar{
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<div class="box container">
			<div class="mar row">
				<div class="col-lg-1">1</div>
				<div class="col-lg-1">2</div>
				<div class="col-lg-1">3</div>
				<div class="col-lg-1">4</div>
				<div class="col-lg-1">5</div>
				<div class="col-lg-1">6</div>
				<div class="col-lg-1">7</div>
				<div class="col-lg-1">8</div>
				<div class="col-lg-1">9</div>
				<div class="col-lg-1">10</div>
				<div class="col-lg-1">11</div>
				<div class="col-lg-1">12</div>
			</div>
			<div class="row">
				<div class="col-lg-3">1</div>
				<div class="col-lg-3">2</div>
				<div class="col-lg-3">3</div>
				<div class="col-lg-3">4</div>
			</div>
		</div>
	</body>
</html>