Bootstarp入门教程(3)栅格系统

小虾米 阅读:651 2021-04-01 00:26:49 评论:0
栅格系统简介                

          栅格系统用于通过一系列的行(row)与列(column)的组合创建页面布局,你的内容就可以放入创建好的布局中。下面就介绍以下Bootstrap栅格系统的工作原理:

  • “行(row)”必须包含在.container中,以便为其赋予合适的排列(aligment)和内补(padding)。
  • 使用“行(row)”在水平方向创建一组“列(column)”。
  • 你的内容应当放置于“列(column)”内,而且,只有“列(column)”可以作为行(row)”的直接子元素。
  • 类似Predefined grid classes like .row and .col-xs-4 这些预定义的栅格class可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
  • 通过设置padding从而创建“列(column)”之间的间隔(gutter)。然后通过为第一和最后一样设置负值的margin从而抵消掉padding的影响。
  • 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个.col-xs-4来创建。


(1)桌面栅格系统布局样式

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
			<div class="col-md-1">.col-md-1</div> 
		</div> 
		<div class="row"> 
			<div class="col-md-8">.col-md-8</div> 
			<div class="col-md-4">.col-md-4</div> 
		</div> 
		<div class="row"> 
			<div class="col-md-4">.col-md-4</div> 
			<div class="col-md-4">.col-md-4</div> 
			<div class="col-md-4">.col-md-4</div> 
		</div> 
		<div class="row"> 
			<div class="col-md-6">.col-md-6</div> 
			<div class="col-md-6">.col-md-6</div> 
		</div> 
 
	</div> 
</body> 
</html>


(2)移动栅格系统布局样式

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-xs-6 col-md-8">.col-xs-6</div> 
			<div class="col-xs-6 col-md-4">.col-xs-6</div> 
		</div> 
 
		<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> 
		<div class="row"> 
			<div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div> 
			<div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div> 
			<div class="col-xs-4 col-md-4">.col-xs-4 .col-md-4</div> 
		</div> 
 
		<!-- Columns are always 50% wide, on mobile and desktop --> 
		<div class="row"> 
			<div class="col-xs-6">.col-xs-6</div> 
			<div class="col-xs-6">.col-xs-6</div> 
		</div> 
 
	</div> 
</body> 
</html>

(3)列偏移:使用.col-md-offset-*可以将列偏移到右侧。这些class通过使用*选择器将所有列增加了列的左侧margin

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-md-4">.col-md-4</div> 
			<div class="col-md-4 col-md-offset-4">.col-md-4 
				.col-md-offset-4</div> 
		</div> 
		<div class="row"> 
			<div class="col-md-3 col-md-offset-3">.col-md-3 
				.col-md-offset-3</div> 
			<div class="col-md-3 col-md-offset-3">.col-md-3 
				.col-md-offset-3</div> 
		</div> 
		<div class="row"> 
			<div class="col-md-6 col-md-offset-3">.col-md-6 
				.col-md-offset-3</div> 
		</div> 
 
	</div> 
</body> 
</html> 

(4)嵌套列:使用内置的栅格将内容嵌套,通过添加一个新的.row和一系列.col-md-*列到已经存在的.col-md-*列内即可实现。

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-md-9"> 
				Level 1: .col-md-9 
				<div class="row"> 
					<div class="col-md-6">Level 2: .col-md-6</div> 
					<div class="col-md-6">Level 2: .col-md-6</div> 
				</div> 
			</div> 
		</div> 
	</div> 
</body> 
</html> 

(5)列排序:通过使用.col-md-push-*.col-md-pull-*就可以很容易的改变列的顺序。

<!DOCTYPE html> 
<html> 
<head> 
<title>Demo</title> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 
<!-- 可选的Bootstrap主题文件(一般不用引入) --> 
<!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">--> 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> 
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 --> 
<script src="js/bootstrap.min.js"></script> 
</head> 
<body> 
	<!--容器  --> 
	<div class="container"> 
		<div class="row"> 
			<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> 
			<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> 
		</div> 
	</div> 
</body> 
</html> 


声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

关注我们

一个IT知识分享的公众号