bs --- 柵格系統

月光派件中。發表於2020-10-18

什麼是柵格系統

柵格系統又名網格系統，是有容器+行+列組成
容器最多容納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>

相關文章