Bootstrap学习笔记四
1. 定义弹性盒子
Flex弹性布局是 Bootstrap响应灵活的使用程序,可以快速管理网格的列、导航、组件等布局，对齐和大小。进一步的定义css，还可以实现更复杂的展示样式。
Flex是Flexible box缩写，意为”弹性布局”,用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局.
采用Flex布局的元素被称为Flex容器，其所有子元素自动成为容器成员。
在bootstrap中有两个类来创建弹性盒子，分别为.d-flex：类设置对象为弹性伸缩盒子；和.d-inline-flex：类设置对象为内联块级弹性伸缩盒子。
代码样例：
|
<!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> |
|
|
<h4>d-flex</h4> |
|
|
<!--使用d-flex类创建弹性盒子--> |
|
|
<div class="d-flex p-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">d-flex item 1</div> |
|
|
<div class="p-2 bg-success">d-flex item 2</div> |
|
|
<div class="p-2 bg-danger">d-flex item 3</div> |
|
|
</div><br/> |
|
|
<h4>d-inline-flex</h4> |
|
|
<!--使用d-inline-flex类创建弹性盒子--> |
|
|
<div class="d-inline-flex p-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">d-inline-flex item 1</div> |
|
|
<div class="p-2 bg-success">d-inline-flex item 2</div> |
|
|
<div class="p-2 bg-danger">d-inline-flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
对于.d-flex和.d-inline-flex也存在响应变化，可根据不同的断点来设置。
.d-{sm|md|lg|xl}-flex
.d-{sm|md|lg|xl}-inline-flex
2. 弹性盒子排列方向
弹性盒子中子项目的排列方向包括水平排列和垂直排列。
a.水平方向排列案例：
对于水平方向的排列使用.flex-row设置子项目从左到右进行排列，是默认值；使用.flex-row-reverse设置子项目从右侧开始排列。
|
<!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> |
|
|
<h4>flex-row（从左侧开始）</h4> |
|
|
<div class="d-flex flex-row p-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">d-flex item 1</div> |
|
|
<div class="p-2 bg-success">d-flex item 2</div> |
|
|
<div class="p-2 bg-danger">d-flex item 3</div> |
|
|
</div><br/> |
|
|
<h4>flex-row-reverse（从右侧开始）</h4> |
|
|
<div class="d-flex flex-row-reverse bg-warning p-3 text-white"> |
|
|
<div class="p-2 bg-primary">d-flex item 1</div> |
|
|
<div class="p-2 bg-success">d-flex item 2</div> |
|
|
<div class="p-2 bg-danger">d-flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
水平方向布局还可以添加相应式的设置，格式如下：
.flex-{sm|md|lg|xl}-row
.flex-{sm|md|lg|xl}-row-reverse
a. 垂直方向排列案例
使用.flex-column设置垂直方向布局，或使用.flex-column-reverse实现垂直方向的反转布局（从底向上铺开）。
|
<!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> |
|
|
<h4>flex-column（从上往下）</h4> |
|
|
<div class="d-flex flex-column p-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex item 1</div> |
|
|
<div class="p-2 bg-success">Flex item 2</div> |
|
|
<div class="p-2 bg-danger">Flex item 3</div> |
|
|
</div><br/> |
|
|
<h4>flex-column-reverse（从下往上）</h4> |
|
|
<div class="d-flex flex-column-reverse bg-warning p-3 text-white"> |
|
|
<div class="p-2 bg-primary">Flex item 1</div> |
|
|
<div class="p-2 bg-success">Flex item 2</div> |
|
|
<div class="p-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
垂直方向布局还可以添加相应式的设置，格式如下：
.flex-{sm|md|lg|xl}-column
.flex-{sm|md|lg|xl}- column -reverse
3. 内容排列
使用flexbox弹性布局容器上的 justify-content-*通用样式可以改变flex项目在主轴上的对齐（以x轴开始，如果是flex-direction: column，则以y轴开始)，可选方向值包括：start(浏览器默认值)、end、center、between和around，说明如下：
.justify-content-start：项目位于容器的开头。
.justify-content-center：项目位于容器的中心。
.justify-content-end：项目位于容器的结尾。
.justify-content-between：项目位于各行之间留有空白的容器内。
.justify-content-around：项目位于各行之前、之间、之后都留有空白的容器内。
代码样例：
|
<!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="d-flex justify-content-start mb-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
<div class="d-flex justify-content-center mb-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
<div class="d-flex justify-content-end mb-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
<div class="d-flex justify-content-between mb-3 bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
<div class="d-flex justify-content-around bg-warning text-white"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
内容排列布局也可以添加响应式的设置，响应式类如下:
.justify-content-{sm|md|lg|xl}-start
.justify-content-{sm|md|lg|xl}-center
.justify-content-{sm|md|lg|xl}-end
.justify-content-{sm|md|lg|xl}-between
.justify-content-{sm|md|lg|xl}-around
4. 项目对齐
使用align-items-*通用样式可以在flexbox容器上实现flex项目的对齐（以y轴开始，如果选择flex-direction: column，则从x轴开始)，可选值有：start、end、center、baseline和stretch (浏览器默认值)。
代码样例：
|
<!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> | |
|
<style> |
|
|
.box{ |
|
|
width: 100%; /*设置宽度*/ |
|
|
height: 50px; /*设置高度*/ |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">项目对齐</h3> |
|
|
<div class="d-flex align-items-start bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex align-items-end bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex align-items-center bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex align-items-baseline bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex align-items-stretch bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
项目对其布局也可以添加响应式的设置，响应式类如下。
.align-items-{sm|md|lg|xl}-start
.align-items-{sm|md|lg|xl}-end
.align-items-{sm|md|lg|xl}-center
.align-items-{sm|md|lg|xl}-baseline
.align-items-{sm|md|lg|xl}-stretch
5. 自动对齐
使用align-self-*通用样式，可以使Flexbox上的项目单独改变在横轴上的对齐方式（y值开始，如果是flex-direction: column则为x轴开始)，其拥有与align-items相同的可选子项:start、end、center、baseline、和stretch(浏览器默认值)
代码样例：
|
<!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> | |
|
<style> |
|
|
.box{ |
|
|
width: 100%; /*设置宽度*/ |
|
|
height: 50px; /*设置高度*/ |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="container"> |
|
|
<h3 class="mb-4">指定项目对齐</h3> |
|
|
<div class="d-flex bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success align-self-start">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success align-self-center">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success align-self-end">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success align-self-baseline">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3 box"> |
|
|
<div class="px-2 bg-primary">Flex item 1</div> |
|
|
<div class="px-2 bg-success align-self-stretch">Flex item 2</div> |
|
|
<div class="px-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
自动对齐布局也可以添加响应式的设置，响应式类如下：
.align-self-{sm|md|lg|xl}-start
.align-self-{sm|md|lg|xl}-end
.align-self-{sm|md|lg|xl}-center
.align-self-{sm|md|lg|xl}-baseline
.align-self-{sm|md|lg|xl}-stretch
6. 自动相等：
在一系列子元素上使用.flex-fill类，来强制它们平分剩下的空间。
代码样例：
|
<!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="d-flex bg-warning text-white"> |
|
|
<div class="flex-fill p-2 bg-primary ">Flex item1（包含大量内容）</div> |
|
|
<div class="flex-fill p-2 bg-success">Flex item 2</div> |
|
|
<div class="flex-fill p-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
自动相等布局也可以添加响应式的设置，响应式类如下：
.flex-{sm|md|lg|xl}-fill
7. 等宽变换
使用.flex-grow-*实用程序切换弹性项目的增长能力以填充可用空间。在下面的案例中，.flex-grow-1元素使用它可以使用的所有可用空间，同时允许剩余的两个Flex项目具有必要的空间
代码样例：
|
<!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"> |
|
|
<h5>增长</h5> |
|
|
<div class="d-flex bg-warning text-white mb-4"> |
|
|
<div class="p-2 flex-grow-1 bg-primary">Flex item1</div> |
|
|
<div class="p-2 bg-success">Flex item 2</div> |
|
|
<div class="p-2 bg-danger">Flex item 3</div> |
|
|
</div> |
|
|
<h5>收缩</h5> |
|
|
<div class="d-flex bg-warning text-white"> |
|
|
<div class="p-2 w-100 bg-primary">Flex item1</div> |
|
|
<div class="p-2 bg-success">Flex item2</div> |
|
|
<div class="p-2 w-100 bg-danger">Flex item3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
等宽变换布局也可以添加响应式的设置，响应式类如下：
.flex-{sm|md|lg|xl}-grow-0
.flex-{sm|md|lg|xl}-grow-1
.flex-{sm|md|lg|xl}-shrink-0
.flex-{sm|md|lg|xl}- shrink -1
8. 自动浮动
将Flex对齐与Auto margin混在一起的时候，Flexbox也能正常运行。
a. 水平方向浮动
以下是通过auto margin来控制flex项目的三种案例，分别是预设（无margin）、向右推两个项目(.mr-auto)、向左推两个项目 (.ml-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="d-flex bg-warning text-white mb-3"> |
|
|
<div class="p-2 bg-primary">Flex item</div> |
|
|
<div class="p-2 bg-success">Flex item</div> |
|
|
<div class="p-2 bg-danger">Flex item</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3"> |
|
|
<div class="mr-auto p-2 bg-primary">Flex item</div> |
|
|
<div class="p-2 bg-success">Flex item</div> |
|
|
<div class="p-2 bg-danger">Flex item</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-3"> |
|
|
<div class="p-2 bg-primary">Flex item</div> |
|
|
<div class="p-2 bg-success">Flex item</div> |
|
|
<div class="ml-auto p-2 bg-danger">Flex item</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
b. 垂直方向浮动
结合 align-items、flex-direction: column、margin-top: auto或margin-bottom: auto，可以垂直移动一个Flex子容器到顶部或底部。
代码样例：
|
<!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="d-flex align-items-start flex-column bg-warning text-white mb-4" style="height: 200px;"> |
|
|
<div class="mb-auto p-2 bg-primary">Flex item</div> |
|
|
<div class="p-2 bg-success">Flex item</div> |
|
|
<div class="p-2 bg-danger">Flex item</div> |
|
|
</div> |
|
|
<div class="d-flex align-items-end flex-column bg-warning text-white" style="height: 200px;"> |
|
|
<div class="p-2 bg-primary">Flex item</div> |
|
|
<div class="p-2 bg-success">Flex item</div> |
|
|
<div class="mt-auto p-2 bg-danger">Flex item</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
9. 弹性布局-包裹
改变flex项目在flex容器中的包裹方式（可以实现弹性布局），其中包括无包裹.flex-nowrap（浏览器默认）、包裹.flex-wrap，或者反向包裹.flex-wrap-reverse。
代码样例：
|
<!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="d-flex bg-warning text-white mb-4 flex-wrap-reverse" > |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
<div class="p-2 bg-primary">Flex项目4</div> |
|
|
<div class="p-2 bg-success">Flex项目5</div> |
|
|
<div class="p-2 bg-danger">Flex项目6</div> |
|
|
</div> |
|
|
<div class="d-flex bg-warning text-white mb-4 flex-wrap"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
<div class="p-2 bg-primary">Flex项目4</div> |
|
|
<div class="p-2 bg-success">Flex项目5</div> |
|
|
<div class="p-2 bg-danger">Flex项目6</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
包装布局也可以添加响应式的设置，响应式类如下：
.flex-{sm|md|lg|xl}-nowrap
.flex-{sm|md|lg|xl}-wrap
.flex-{sm|md|lg|xl}-wrap-reverse
10. 排列顺序
使用一些order实用程序可以实现弹性项目的可视化排序。bootstrap仅提供将一个项目排在第一或最后，以及重置DOM顺序，由于order只能使用整数值（例如：5），因此对于任何额外值需要自定义CSS样式。
代码样例：
|
<!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="d-flex bg-warning text-white"> |
|
|
<div class="order-3 p-2 bg-primary">Flex项目1</div> |
|
|
<div class="order-2 p-2 bg-success">Flex项目2</div> |
|
|
<div class="order-1 p-2 bg-danger">Flex项目3</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
也可以添加响应式的设置，响应式类如下：
.order-{sm|md|lg|xl}-0 .order-{sm|md|lg|xl}-7
.order-{sm|md|lg|xl}-1 .order-{sm|md|lg|xl}-8
.order-{sm|md|lg|xl}-2 .order-{sm|md|lg|xl}-9
.order-{sm|md|lg|xl}-3 .order-{sm|md|lg|xl}-10
.order-{sm|md|lg|xl}-4 .order-{sm|md|lg|xl}-11
.order-{sm|md|lg|xl}-5 .order-{sm|md|lg|xl}-12
.order-{sm|md|lg|xl}-6
11. 对齐内容
使用flexbox容器上的align-content通用样式定义，可以将flex项对齐到横轴上。可选方向有start(浏览器默认值)、end、center、between、around和stretch。
代码样例：
|
<!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"> |
|
|
<!--<div class="d-flex align-content-start bg-warning text-white flex-wrap mb-4" style="height: 150px;">--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目1</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目2</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目3</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目4</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目5</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目6</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目7</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目8</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目9</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目10</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目11</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目12</div>--> |
|
|
<!--<div class="d-flex align-content-center bg-warning text-white flex-wrap mb-4" style="height: 150px;">--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目1</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目2</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目3</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目4</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目5</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目6</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目7</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目8</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目9</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目10</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目11</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目12</div>--> |
|
|
<!--<div class="d-flex align-content-end bg-warning text-white flex-wrap" style="height: 150px;">--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目1</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目2</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目3</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目4</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目5</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目6</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目7</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目8</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目9</div>--> |
|
|
<!-- <div class="p-2 bg-primary">Flex项目10</div>--> |
|
|
<!-- <div class="p-2 bg-success">Flex项目11</div>--> |
|
|
<!-- <div class="p-2 bg-danger">Flex项目12</div>--> |
|
|
<h5>align-content-between</h5> |
|
|
<div class="d-flex align-content-between bg-warning text-white flex-wrap" style="height: 150px;"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
<div class="p-2 bg-primary">Flex项目4</div> |
|
|
<div class="p-2 bg-success">Flex项目5</div> |
|
|
<div class="p-2 bg-danger">Flex项目6</div> |
|
|
<div class="p-2 bg-primary">Flex项目7</div> |
|
|
<div class="p-2 bg-success">Flex项目8</div> |
|
|
<div class="p-2 bg-danger">Flex项目9</div> |
|
|
<div class="p-2 bg-primary">Flex项目10</div> |
|
|
<div class="p-2 bg-success">Flex项目11</div> |
|
|
<div class="p-2 bg-danger">Flex项目12</div> |
|
|
</div> |
|
|
<h5>align-content-stretch</h5> |
|
|
<div class="d-flex align-content-stretch bg-warning text-white flex-wrap" style="height: 150px;"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
<div class="p-2 bg-primary">Flex项目4</div> |
|
|
<div class="p-2 bg-success">Flex项目5</div> |
|
|
<div class="p-2 bg-danger">Flex项目6</div> |
|
|
<div class="p-2 bg-primary">Flex项目7</div> |
|
|
<div class="p-2 bg-success">Flex项目8</div> |
|
|
<div class="p-2 bg-danger">Flex项目9</div> |
|
|
<div class="p-2 bg-primary">Flex项目10</div> |
|
|
<div class="p-2 bg-success">Flex项目11</div> |
|
|
<div class="p-2 bg-danger">Flex项目12</div> |
|
|
</div> |
|
|
<h5>align-content-around</h5> |
|
|
<div class="d-flex align-content-around bg-warning text-white flex-wrap" style="height: 150px;"> |
|
|
<div class="p-2 bg-primary">Flex项目1</div> |
|
|
<div class="p-2 bg-success">Flex项目2</div> |
|
|
<div class="p-2 bg-danger">Flex项目3</div> |
|
|
<div class="p-2 bg-primary">Flex项目4</div> |
|
|
<div class="p-2 bg-success">Flex项目5</div> |
|
|
<div class="p-2 bg-danger">Flex项目6</div> |
|
|
<div class="p-2 bg-primary">Flex项目7</div> |
|
|
<div class="p-2 bg-success">Flex项目8</div> |
|
|
<div class="p-2 bg-danger">Flex项目9</div> |
|
|
<div class="p-2 bg-primary">Flex项目10</div> |
|
|
<div class="p-2 bg-success">Flex项目11</div> |
|
|
<div class="p-2 bg-danger">Flex项目12</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
对齐内容布局也可以添加响应式的设置，响应式类如下：
.align-centent-{sm|md|lg|xl}-start
.align-centent-{sm|md|lg|xl}-end
.align-centent-{sm|md|lg|xl}-center
.align-centent-{sm|md|lg|xl}-between
.align-centent-{sm|md|lg|xl}-around
.align-centent-{sm|md|lg|xl}-stretch
文章评论