bootstrap栅格系统的列排序、行与列的嵌套详解

作者(出处):百宝箱工作室发布时间:2018年3月17日 19:01:56查阅量:8

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<title></title>
		<style>
			.row div{
				background: #000000;
				color: red;
				height: 50px;
				border: 1px salmon solid;
			}
		</style>
	</head>
	<body>
		<!--
        	作者:百宝箱工作室 微课堂教学QQ:425680248
        	时间:2018-03-17
        	描述:列排序
        	col-lg-push-10  列往右走(往后走),数字表示往右走的格子数量,数字超过12就不起作用。
        	col-lg-pull-10  列往左走(往前走),数字表示往左走的格子数量,数字超过12就不起作用。
		-->
		<div class="container" style="border: #255625 1px solid;">
			<div class="row">
				<div class="col-lg-2 col-lg-push-2">第1行第1列</div>
				<div class="col-lg-2 col-lg-push-5">第1行第2列</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-lg-pull-1">第2行第1列</div>
				<div class="col-lg-2 col-lg-pull-2">第2行第2列</div>
			</div>
			<!-- 调换列的位置  -->
			<div class="row">
				<div class="col-lg-2 col-lg-push-10">第3行第1列</div>
				<div class="col-lg-10 col-lg-pull-2">第3行第2列</div>
			</div>
		<!--
            	作者:百宝箱工作室 微课堂教学QQ:425680248
            	时间:2018-03-17
            	描述:列偏移与列排序的第1个区别。
            	列偏移只能往右走,而列排序(push和pull)可以往左、右两个方向走。
		-->
			<div class="row">
				<div class="col-lg-2 col-lg-offset-10">第4行第1列</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-lg-push-10">第5行第1列</div>
			</div>
			<div class="row">
				<div class="col-lg-2 col-lg-pull-2">第6行第1列</div>
			</div>
		<!--
            	作者:百宝箱工作室 微课堂教学QQ:425680248
            	时间:2018-03-17
            	描述:列偏移与列排序的第2个区别。
            	如果一行中有多列,offset偏移如果大的话,会换行再偏移,而push不会换行。
		-->
			<div class="row">
				<div class="col-lg-4">第7行第1列</div>
				<div class="col-lg-4 col-lg-offset-5">第7行第2列</div>
			</div>
			<div class="row">
				<div class="col-lg-4">第8行第1列</div>
				<div class="col-lg-4 col-lg-push-5">第8行第2列</div>
			</div> <!--
            	作者:百宝箱工作室 微课堂教学QQ:425680248
            	时间:2018-03-17
            	描述:行与列的嵌套
            	每一列都可以再嵌套一行和N列(N不能超过12);
            	嵌套里面的元素会以父级元素的宽度为基准,再分12列(或12个格子)。
		-->
			<div class="row">
				<div class="col-lg-6">第9行第1列
				    <div class="row">
				    	<div class="col-lg-4"></div>
				    	<div class="col-lg-4"></div>
				    	<div class="col-lg-4"></div>
				    </div>
				</div>
				<div class="col-lg-6">第9行第2列</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/bootstrap.js" ></script>
	</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息  
若本文对您有帮助,请扫码打赏,您的赞助就是最好的动力