讲给后台程序员看的前端系列教程(46)——Bootstrap栅格系统

Mybatis研习录
笨鸟向东飞
谷哥的小弟

C语言自学完备手册(33篇)

Android多分辨率适配框架

JavaWeb核心技术系列教程

HTML5前端开发实战系列教程

MySQL数据库实操教程(35篇图文版)

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境,踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)


版权声明

  • 本文原创作者:谷哥的小弟
  • 作者博客地址:http://blog.csdn.net/lfdfhl

栅格系统概述

Bootstrap提供了一套响应式、移动设备优先的流式栅格系统,在该系统中将屏幕的每一行分为12格(列)。在讲解HTML表格时我们可通过表格(table)、行(tr)、单元格(td)进行布局;类似地,在栅格系统中可通过容器(container)、行(row)与列(column)的组合来创建页面布局。所以,从这个角度来说可以将栅格理解为特殊的表格——表格行数为1,列数为12。

栅格系统的实现

我们可借助Bootstrap中提供的CSS样式实现栅格系统。

第一步:定义容器

栅格系统中的容器类似于HTML中的table,栅格系统中有两种容器:

  • container:页面左右两侧留白的容器
  • container-fluid:页面左右两侧无留白且占满屏幕宽度的容器

示例如下:

<div class="container">
<div class="container-fluid">

第二步:定义行

栅格系统中的行类似于HTML中的tr,栅格系统中行的常用样式为row

示例如下:

<div class="row">

第三步:定义列

栅格系统中的列类似于HTML中的td,我们可通过对列的定义指定元素在不同设备上所占的格子书面。列的常用样式为:col-设备代号-格子数

设备代号

在栅格系统中根据设备屏幕宽的分辨率的不同定义了不同的设备代号

  • xs:屏幕宽的分辨率小于 < 768px被定义为超小屏幕;例如:手机
  • sm:768px ≤ 屏幕宽的分辨 < 992px被定义为小屏幕;例如:平板
  • md:992px ≤ 屏幕宽的分辨 < 1200px被定义为中等屏幕;例如:桌面显示器
  • lg:屏幕宽的分辨率 ≥ 1200px被定义为大屏幕;例如:大桌面显示器

注意事项

栅格类属性可以向上兼容;也就是说:栅格类适用于与屏幕宽度大于或等于分界点大小的设备。

示例:利用col-sm-10使得模块在sm的设备上占10个栅格;当同样的代码运行在lg设备上时效果同sm一样,该模块亦占10个栅格。

栅格系统练习示例

项目结构

在这里插入图片描述

示例1

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>栅格系统</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-1">栅格01</div>
				<div class="col-lg-1">栅格02</div>
				<div class="col-lg-1">栅格03</div>
				<div class="col-lg-1">栅格04</div>
				<div class="col-lg-1">栅格05</div>
				<div class="col-lg-1">栅格06</div>
				<div class="col-lg-1">栅格07</div>
				<div class="col-lg-1">栅格08</div>
				<div class="col-lg-1">栅格09</div>
				<div class="col-lg-1">栅格10</div>
				<div class="col-lg-1">栅格11</div>
				<div class="col-lg-1">栅格12</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
要点概述

  • 1、先定义容器container,再定义行row,最后定义列col-设备代号-格子数
  • 2、容器中嵌套行,行中嵌套列
  • 3、默认情况下,栅格无背景颜色和边框
  • 4、建议行中列所占格子数总和不超过12

示例2

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>栅格系统</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>
		
		<style type="text/css">
			.row div {
			    border: 1px solid red;
			    text-align: center;
			    height: 60px;
			    line-height: 60px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-lg-1">栅格01</div>
				<div class="col-lg-1">栅格02</div>
				<div class="col-lg-1">栅格03</div>
				<div class="col-lg-1">栅格04</div>
				<div class="col-lg-1">栅格05</div>
				<div class="col-lg-1">栅格06</div>
				<div class="col-lg-1">栅格07</div>
				<div class="col-lg-1">栅格08</div>
				<div class="col-lg-1">栅格09</div>
				<div class="col-lg-1">栅格10</div>
				<div class="col-lg-1">栅格11</div>
				<div class="col-lg-1">栅格12</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
要点概述

可通过CSS定义栅格样式

示例3

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>栅格系统</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>

		<style type="text/css">
			.row {
				margin-top: 10px;
			}

			.row div {
				border: 1px solid red;
				text-align: center;
				height: 60px;
				line-height: 60px;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<!-- 一行分成12等分 -->
			<div class="row">
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
				<div class="col-lg-1">占一格</div>
			</div>
			<!-- 一行分成6等分 -->
			<div class="row">
				<div class="col-lg-2">占二格</div>
				<div class="col-lg-2">占二格</div>
				<div class="col-lg-2">占二格</div>
				<div class="col-lg-2">占二格</div>
				<div class="col-lg-2">占二格</div>
				<div class="col-lg-2">占二格</div>
			</div>
			<!-- 一行分成3等分 -->
			<div class="row">
				<div class="col-lg-4">占三格</div>
				<div class="col-lg-4">占三格</div>
				<div class="col-lg-4">占三格</div>
			</div>
			<!-- 一行分成2等分 -->
			<div class="row">
				<div class="col-lg-6">占六格</div>
				<div class="col-lg-6">占六格</div>
			</div>
			<!-- 独占一行 -->
			<div class="row">
				<div class="col-lg-12">占十二格</div>
			</div>
			<!-- 不占满一行 -->
			<div class="row">
				<div class="col-lg-3">占三格</div>
				<div class="col-lg-6">占六格</div>
			</div>

		</div>
	</body>
</html>

在这里插入图片描述
要点概述

  • 1、容器中可嵌套多行
  • 2、每行中格子总数不超过12,也可小于12

示例4

<!DOCTYPE html>
<!-- 本文作者:谷哥的小弟-->
<!-- 博客地址:https://blog.csdn.net/lfdfhl-->
<html>
	<head>
		<!-- 以下3个meta标签必须置于head标签的最前位置 -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>栅格系统</title>
		<!-- 引入Bootstrap的css文件 -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<!-- 引入jQuery文件 -->
		<script src="js/jquery-3.2.1.min.js"></script>
		<!-- 引入Bootstrap的JavaScript -->
		<script src="js/bootstrap.min.js"></script>

		<style>
			.row div {
				display: flex;
				align-items: center;
				height: 240px;
				justify-content: center;
				font-size: 18px;
				margin-top: 20px;
				color: #fff;
			}

			.row div:nth-child(1) {
				background: skyblue;
			}

			.row div:nth-child(2) {
				background: purple;
			}

			.row div:nth-child(3) {
				background: pink;
			}

			.row div:nth-child(4) {
				background: yellowgreen;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="row">
				<div class="col-xs-12 col-sm-6 col-lg-3">
					模块一 <br/> <br/> PC占3格 <br/>平板占6格<br/>手机占12格
				</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">
					模块二 <br/> <br/> PC占3格 <br/>平板占6格<br/>手机占12格
				</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">
					模块三 <br/> <br/> PC占3格 <br/>平板占6格<br/>手机占12格
				</div>
				<div class="col-xs-12 col-sm-6 col-lg-3">
					模块四 <br/> <br/> PC占3格 <br/>平板占6格<br/>手机占12格
				</div>
			</div>
		</div>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
要点概述

通过栅格系统实现多分辨率设备的不同布局。
在该示例中,通过col-lg-3指定各模块在PC上占3格,那么四个模块刚好填满PC的屏幕。
在该实例中,通过 col-sm-6指定各模块在平板上占6各,那么2个模块就可填满平板的屏幕;所以,4个模块则要分2行显示。
在该实例中,通过 col-xs-12指定各模块在手机上占12各,那么1个模块就可填满手机的屏幕;所以,4个模块则要分4行显示。

展开阅读全文
©️2020 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值