bootstrap 栅格化布局一

最新推荐文章于 2023-05-25 21:07:27 发布

purple_lumpy

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量2k

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/purple_lumpy/article/details/82081347

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

栅格系统：以规则的网格阵列来定义和规范网页中版面布局以及信息分布。随着屏幕或者视窗的尺寸增加，系统会自动把屏幕分为12列。

bootstrap 内置响应式、移动设备优先的流式栅格系统。把bootstrap的栅格系统叫做布局。它是通过航与列的组合来实现布局的。

bootstrap 通过定义容器的大小，把页面平分为12份（最常见），调整内外边距，再结合响应式，就可以制作强大的页面。

bootstrap栅格系统的一些规则：

1. 数据行必须包含在container容器之中 <div class="container"></div> (便于调试内外边距、对齐方式)

2. row 默认是12列

3. 具体内容放在列元素之内，列元素是row元素的直接子元素

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<meta charset="utf-8">
	<!-- 适应移动端 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		.row{
			border:1px solid #ff0000;
		}
		[class*="col-"]{
			border:1px solid #00ff00;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">1</div>
			<div class="col-md-1">2</div>
			<div class="col-md-1">3</div>
			<div class="col-md-1">4</div>
			<div class="col-md-1">5</div>
			<div class="col-md-1">6</div>
			<div class="col-md-1">7</div>
			<div class="col-md-1">8</div>
			<div class="col-md-1">9</div>
			<div class="col-md-1">10</div>
			<div class="col-md-1">11</div>
			<div class="col-md-1">12</div>
		</div>
		<div class="row">
			
		</div>
		<div class="row">
			
		</div>
	</div>

</body>
</html>

col-md-x class 表示该容器占x个列, col-md-offset-x 表示该容器偏移x个列,列的嵌套：

<!DOCTYPE html>
<html>
<head>
	<title>index</title>
	<meta charset="utf-8">
	<!-- 适应移动端 -->
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">
		.row{
			border:1px solid #ff0000;
		}
		[class*="col-"]{
			border:1px solid #00ff00;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">1</div>
			<div class="col-md-1">2</div>
			<div class="col-md-1">3</div>
			<div class="col-md-1">4</div>
			<div class="col-md-1">5</div>
			<div class="col-md-1">6</div>
			<div class="col-md-1">7</div>
			<div class="col-md-1">8</div>
			<div class="col-md-1">9</div>
			<div class="col-md-1">10</div>
			<div class="col-md-1">11</div>
			<div class="col-md-1">12</div>
		</div>
		<div class="row">
			<div class="col-md-3">1</div>
			<div class="col-md-3">2</div>
			<div class="col-md-3">3</div>
			<div class="col-md-3">4</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-md-offset-3">1</div>
		</div>
		<!-- 嵌套 -->
		<div class="row">
			<div class="col-md-9">
				<div class="row">
					<div class="col-md-3">1</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

浮动，向右移动x个列 col-md-push-x

向左移动x个列 col-md-pull-x

<body>
	<div class="container">
		<div class="row">
			<div class="col-md-1">1</div>
			<div class="col-md-1">2</div>
			<div class="col-md-1">3</div>
			<div class="col-md-1">4</div>
			<div class="col-md-1">5</div>
			<div class="col-md-1">6</div>
			<div class="col-md-1">7</div>
			<div class="col-md-1">8</div>
			<div class="col-md-1">9</div>
			<div class="col-md-1">10</div>
			<div class="col-md-1">11</div>
			<div class="col-md-1">12</div>
		</div>
		<div class="row">
			<div class="col-md-3 col-md-push-9">1</div>
			<div class="col-md-6 col-md-pull-3">2</div>
		</div>
	</div>
</body>