栅格系统

最新推荐文章于 2022-12-22 16:23:41 发布

boxyuan

最新推荐文章于 2022-12-22 16:23:41 发布

阅读量362

点赞数

分类专栏： Bootstrap 文章标签： Bootstrap

本文链接：https://blog.csdn.net/boxyuan/article/details/76169702

版权

Bootstrap 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

栅格系统：

Bootstrap提供了一套响应式，移动设备优先的流式栅格系统
Bootstrap把一个容器或整个网页平均分成12列
Bootstrap的栅格系统，由一个行或多个列构成
栅格系统通过行列的形式来创建网页布局，把具体的数据放入列当中

注意：栅格系统，必须放在.container和.container-fluid之中

注意：如果列数超过12列自动换行，小于12无所谓

列偏移：一个栏向右偏移多少个列

.col-mod-offset-*

.col-mod-offset-2:指向右偏移两个单位

列嵌套：就是在某个栏中，在嵌套一个完整的栅格系统

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>bootstrap第二天</title>
		<meta charset="UTF-8">
		<!--移动设备优先-->
		<meta name="viewport" content="width=device-width,initial-scale=1" />
		<link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
		<title>bootstrap入门</title>
		<script src="js/jquery-1.6.js"></script>
		<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
	</head>
	<body style="padding: 50px; background-color: #EBEBEB;">
		<div class="container" style="padding: 50px; background-color: #9ACFEA;">
			<div class="row" style="text-align: center;"></div>
			<div class="col-md-4" style="border: 1px solid #4CAE4C;">这是一条新闻信息</div>
			<div class="col-md-2" style="border: 1px solid #4CAE4C;">这是一条新闻信息</div>
			<div class="col-md-1 col-md-offset-4" style="border: 1px solid #4CAE4C;">这是一条新闻信息</div>
		</div>
 
		<div class="container" style="padding: 50px; background-color:#C7DDEF;">
			<div class="row" style="text-align: center;"></div>
			
				<div class="col-md-6" style="border: 1px solid  #CE8483;">这是一条新闻信息</div>
				<div class="col-md-6" style="border: 1px solid  #CE8483;">这是一条新闻信息
				<div class="row" style="border: 1px solid #CE8483;"> 
					<div class="col-md-6" style="border: solid #EB9316;">嵌套的信息</div>
					<div class="col-md-6" style="border: solid #EB9316;">嵌套的信息</div>
				</div></div>
				
			</div>
		</div>
	</body>
</html>