Bootstrap学习笔记三

1. 布局容器

容器类是Bootstrap中最基本的布局元素，使用默认网格系统时是必须的。Bootstrap中定义了两个容器，分别为.container和. container-fluid。

Container的容器根据屏幕宽度的不同,会利用媒体查询设置固定的宽度，当改变浏览器的大小时，页面会呈现阶段性的变化，意味着container容器的最大宽度在每个断点都发生变化。

container-fluid容器保持全屏大小，始终保持100%的宽度。

参考代码：

<body>

</div>

</div>

</body>

2. 响应断点

Bootstrap使用媒体查询为布局和接口创建合理的断点，这些断点主要基于最小的视口宽度，并且允许随着视口的变化而扩展元素。

根据设备不同选择不同的像素。

3. z- index

z-index设置一个定位元素沿Z轴的位置, Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近为负数则表示用户更远，利用该属性来安排内容，帮助控制布局。

不建议自定义z-index属性值，如果改变了其中一个可能需要改变所有。

4. 网格系统

Bootstrap包含了一个移动优先的网格，它基于一个12列的布局，有5种响应尺寸对应不同的屏幕，支持sass mixins自由调用,并结合自己预定义CSS、javaScript类用来创建各种形状和尺寸的布局。

网格每一行都需要放在设置了.container（固定宽度）或.container-fluid（全屏宽度）类的容器中，才可以自动设置一些外边距与内边距。

网格系统中使用行来创建水平的列组，内容放置在列中，只有列可以是行的直接节点。预定义的类如.row和.col-sm-4可用于快速制作网格布局列，通过填充创建列内容之间的间隙，这个间隙通过row类上的负边距，设置第一行和最后一列的偏移。

网格系统在各种屏幕和设备上的约定
	超小屏幕设备（<576px）	小型屏幕设备（≥576px）	中型屏幕设备（≥768px）	大型屏幕设备（≥992px）	超大屏幕设备（≥1200px）
最大container宽度	无（自动）	540px	720px	960px	1140px
类（class）前缀	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
列数	12
槽宽	30px（每列两边均有15px）
嵌套	允许
列排序	允许

网格列是通过跨越指定的12个列来创建。Bootstrap使用em或rem来定义大多数尺寸，网格断点和容器宽度使用的是px，这是因为视口宽度以像素为单位，并且不随字体大小而变化。

5. 自动布局

利用特定与断点的列类，可以轻松的进行裂大小调整，而无需使用明确样式。

a.等宽列

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">等宽列</h3>
	<div class="row">
	<div class="col border py-3 bg-light">二分之一</div>
	<div class="col border py-3 bg-light">二分之一</div>
	</div>
	<div class="row">
	<div class="col border py-3 bg-light">三分之一</div>
	<div class="col border py-3 bg-light">三分之一</div>
	<div class="col border py-3 bg-light">三分之一</div>
	</div>
	<div class="row">
	<div class="col border py-3 bg-light">四分之一</div>
	<div class="col border py-3 bg-light">四分之一</div>
	<div class="col border py-3 bg-light">四分之一</div>
	<div class="col border py-3 bg-light">四分之一</div>
	</div>
	<div class="row">
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	<div class="col border py-3 bg-light">十二分之一</div>
	</div>
	</body>

	</html>

b.设置列宽

可以在一行多列的情况下，特别指定一列并进行宽度定义，同时其他列自动调整大小，可以使用定义的网格类，从而实行网格宽或含块的优化处理。这种情况下，无论中心列的宽度如何，其他列都将调整大小。

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">设置一个列宽</h3>
	<div class="row">
	<div class="col border py-3 bg-light">左</div>
	<div class="col-7 border py-3 bg-light">中</div>
	<div class="col border py-3 bg-light">右</div>
	</div>
	<div class="row">
	<div class="col-3 border py-3 bg-light">左</div>
	<div class="col border py-3 bg-light">中</div>
	<div class="col border py-3 bg-light">右</div>
	</div>
	</body>
	</html>

c.可变宽度内容

使用col-{breakpoint}-auto断点方法可以实现，根据其内容的自然宽度来对列进行大小调整。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">可变宽度的内容</h3>
	<div class="row justify-content-md-center">
	<div class="col col-lg-2 border py-3 bg-light">左</div>
	<div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px时，可根据内容自动调整列宽度）</div>
	<div class="col col-lg-2 border py-3 bg-light">右</div>
	</div>
	<div class="row">
	<div class="col border py-3 bg-light">左</div>
	<div class="col-md-auto border py-3 bg-light">中（在屏幕尺寸≥768px时，可根据内容自动调整列宽度）</div>
	<div class="col col-lg-2 border py-3 bg-light">右</div>
	</div>
	</body>
	</html>

d.等宽多列

创建跨多个行的等宽列，方法是插入w-100通用样式类,将列拆分成新行。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">多行显示等宽列</h3><div class="row">

	<div class="col border py-3 bg-light">四分之一</div>
	<div class="col border py-3 bg-light">四分之一</div>
	<div class="w-100"></div>
	<div class="col border py-3 bg-light">四分之一</div>
	<div class="col border py-3 bg-light">四分之一</div>
	</div>
	</body>
	</html>

6. 响应类

Bootstrap网格系统包括5种宽度与定义，用于构建复杂的响应布局，可以根据需要定义而特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*五种屏幕下的样式。

a.覆盖所有设备

如果要一次性定义从最小设备到最大设备相同的网格系统表现使用.col和.col-*类。后者用于定义特定的大小，否则使用.col就可以了。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">覆盖所有设备</h3>
	<div class="row">
	<div class="col border py-3 bg-light">col</div>
	<div class="col border py-3 bg-light">col</div>
	<div class="col border py-3 bg-light">col</div>
	<div class="col border py-3 bg-light">col</div>
	</div>
	<div class="row">
	<div class="col-8 border py-3 bg-light">col-8</div>
	<div class="col-4 border py-3 bg-light">col-4</div>
	</div>
	</body>
	</html>

b.水平排列

使用单一的.col-sm-*类方法，可以创建一个基本的网格系统，此时如果没有指定其他媒体查询断点宽度，这个网格系统是成立的，而且会随着屏幕变窄成为超小屏幕.col后，自动成为每列一行、水平堆砌。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">水平排列</h3>
	<!--在sm（≥576px）型设备上开始水平排列-->
	<div class="row">
	<div class="col-sm-8 border py-3 bg-light">col-sm-8</div>
	<div class="col-sm-4 border py-3 bg-light">col-sm-4</div>
	</div>
	<!--在md（≥768px）型设备上开始水平排列-->
	<div class="row">
	<div class="col-md-8 border py-3 bg-light">col-md-8</div>
	<div class="col-md-4 border py-3 bg-light">col-md-4</div>
	</div>
	</body>
	</html>

C.混合搭配

可以根据需要对每一个列都进行不同的设备定义。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">混合搭配</h3>
	<!--在小于md型的设备上显示为一个全宽列和一个半宽列，在大于等于md型设备上显示为一列，分别占8份和4份-->
	<div class="row">
	<div class="col-12 col-md-8 border py-3 bg-light">.col-12 .col-md-8</div>
	<div class="col-6 col-md-4 border py-3 bg-light">.col-6 .col-md-4</div>
	</div>
	<!--在任何类型的设备上，列的宽度都是占50%-->
	<div class="row">
	<div class="col-6 border py-3 bg-light">.col-6</div>
	<div class="col-6 border py-3 bg-light">.col-6</div>
	</div>
	</body>
	</html>

c.删除边距

Bootstrap默认的网格和列间有边距，一般是左右-15px的margin或padding处理，可以使用.no-gutters类来消除，这将影响到.row行、列平行间隙及所有子列。

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">删除边距</h3>
	<div class="row ">
	<div class="col-12 col-sm-6 col-md-8 py-3 border bg-light">.col-12 .col-sm-6 .col-md-8</div>
	<div class="col-6 col-md-4 py-3 border bg-light">.col-6 .col-md-4</div>
	</div>
	</body>
	</html>

d.列包装

如果在一行中放置超过12列，则每组额外列将作为一个单元包裹到新行上。

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">列包装</h3>
	<div class="row">
	<div class="col-9 py-3 border bg-light">.col-9</div>
	<div class="col-4 py-3 border bg-light">.col-4<br>因为9 + 4 = 13 >12，4列宽的div被包装到一个新行上，作为一个连续的单元。</div>
	<div class="col-6 py-3 border bg-light">.col-6<br>后续的列沿着新行继续排列。</div>
	</div>
	</body>
	</html>

7. 重排序

a.排列顺序

使用.order-*类选择符，可以对空间进行可视化排序，提供.order-1到.order-12等12个级别的顺序，支持主流浏览器和设备。

没有.order类的元素，默认在最前边。

代码样例

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">排列顺序</h3>
	<div class="row">
	<div class="col order-12 py-3 border bg-light">
	order-12
	</div>
	<div class="col order-1 py-3 border bg-light">
	order-1
	</div>
	<div class="col order-6 py-3 border bg-light">
	order-6
	</div>
	<div class="col py-3 border bg-light">
	col
	</div>
	</div>
	</body>
	</html>

可以使用.order-first更改一个顺序到首位置，使用.order-last到末尾

b.列偏移

使用响应式的.offset-*类偏移
使用边距通用样式处理
偏移类

使用.offset-md-*类可以使列向右偏移，通过定义*的数字，实现列偏移，比如：.offset-md-4是向右偏移四列

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">偏移类示例</h3>
	<div class="row">
	<div class="col-md-6 offset-md-3 py-3 border bg-light">.col-md-6 .offset-md-3</div>
	</div>
	<div class="row">
	<div class="col-md-4 offset-md-1 py-3 border bg-light">.col-md-4 .offset-md-1</div>
	<div class="col-md-4 offset-md-2 py-3 border bg-light">.col-md-4 .offset-md-2</div>
	</div>
	<div class="row">
	<div class="col-md-4 py-3 border bg-light">.col-md-4</div>
	<div class="col-md-4 offset-md-4 py-3 border bg-light">.col-md-4 .offset-md-4</div>
	</div>
	</body>
	</html>

b) 使用margin类

网格系统中可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现水平隔离的效果。

代码样例：

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">使用margin类实现列偏移</h3>
	<div class="row">
	<div class="col-md-4 py-3 border bg-light">.col-md-4</div>
	<div class="col-md-4 ml-auto py-3 border bg-light">.col-md-4 .ml-auto</div>
	</div>
	<div class="row">
	<div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
	<div class="col-md-3 ml-md-auto py-3 border bg-light">.col-md-3 .ml-md-auto</div>
	</div>
	<div class="row">
	<div class="col-auto mr-auto py-3 border bg-light">.col-auto .mr-auto</div>
	<div class="col-auto py-3 border bg-light">.col-auto</div>
	</div>
	</body>
	</html>

c.列嵌套

如果想在网格系统中将内容再次嵌套，可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素中。被嵌套的行所包含的列数量小于12个。

代码样例：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="bootstrap-4.2.1-dist/css/bootstrap.css">
	<script src="jquery-3.3.1.slim.js"></script>
	<script src="https://cdn.staticfile.org/popper.js/1.14.6/umd/popper.js"></script>
	<script src="bootstrap-4.2.1-dist/js/bootstrap.min.js"></script>
	</head>
	<body class="container">
	<h3 class="mb-4">嵌套</h3>
	<div class="row">
	<div class="col-12 col-lg-6">
	<!--嵌套行-->
	<div class="row border no-gutters">
	<div class="col-12 col-sm-3"><img src="images/b.jpg" alt=""></div>
	<div class="col-12 col-sm-9 pl-3">
	李白诗歌的语言，有的清新如同口语，有的豪放，不拘声律，近于散文，但都统一在“清水出芙蓉，天然去雕饰”的自然美之中。
	</div>
	</div>
	</div>
	<div class="col-12 col-lg-6">
	<!--嵌套行-->
	<div class="row border no-gutters">
	<div class="col-12 col-sm-3"><img src="images/c.jpg" alt=""></div>
	<div class="col-12 col-sm-9 pl-3">
	在杜甫中年因其诗风沉郁顿挫，忧国忧民，杜甫的诗被称为“诗史”。他的诗词以古体、律诗见长，风格多样，以“沉郁顿挫”四字准确概括出他自己的作品风格，而以沉郁为主。
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>

8. 布局工具类

Bootstrap包含十几个用于显示、隐藏、对齐和间隔的使用工具，可以加快移动设备与响应式界面的开发。

a.Display块属性定义

使用 Bootstrap.的实用程序来响应式的切换，display属性的值，将其以网格系统内容或组件混合使用，以便在特定的事物中显示或隐藏。

b.Flexbox选项

Bootstrap是基于Flexbox流式布局，大多数组件都支持Flex流式布局，但不是所有的元素的display都是默认就启用display:flex属性的(会增加不必要的层叠，影响到浏览器的需要。)。

c.外边距和内边距

使用外边距和内边距使用程序来控制元素和组件的间距大小。Bootstrap包含一个用于间隔使用程序的5级刻度(基于1rem值默认$spacer变量),为所有视图选择值(例如，.mr-3 用于右边框: 1rem),或为目标特定视图选择响应变量(例如，.mr-md-3用于有边框：1rem,从md断点开始)。