二十三、Bootstrap4 表单
1.堆叠表单 (全屏宽度)：垂直方向
表单元素 input, extarea, 和 select elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。
使用 .form-check-inline 类可以让选项显示在同一行上
2.内联表单
所有内联表单中的元素都是左对齐的。
内联表单需要在 form 元素上添加 .form-inline类。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 表单</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap4 表单</h4>
<h5>1.堆叠表单 (全屏宽度)：垂直方向</h5>
<h5>表单元素 input, extarea, 和 select elements 在使用 .form-control 类的情况下，宽度都是设置为 100%。</h5>
<h5>复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。<br>
使用 .form-check-inline 类可以让选项显示在同一行上</h5>
<form class="form" action="" method="">
<div class="form-group">
姓名：<input class="form-control" type="text" placeholder="请输入姓名" required>
密码：<input type="password" class="form-control" required>
信息：<textarea class="form-control" name="" id="comment" cols="30" rows="1"></textarea>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="checkbox" value="yuwen">语文
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="checkbox" value="shuxue">数学
</div>
</form>
<h5>2.内联表单</h5>
<h5>
所有内联表单中的元素都是左对齐的。<br>
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。<br>
内联表单需要在 form 元素上添加 .form-inline类。<br>
</h5>
<form class=" form-inlinee " action="">
<div class="form-check form-check-inline">
<input type="checkbox" checked="checked">语文
</div>
姓名：<input type="text" placeholder="请输入姓名" required>
密码：<input type="password" required>
</div>
</form>
</body>
</html>
二十四、Bootstrap4 表单控件
Bootstrap4 支持以下表单控件：input / textarea / checkbox / radio / select <br>
Bootstrap Input
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。
Bootstrap 复选框(checkbox)
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。使用 .form-check-inline 类可以让选项显示在同一行上。多选框中使用disabled属性可以使选择框不可选。
Bootstrap 单选框(Radio)
单选框用于让用户从一系列预设置的选项中进行选择，只能选一个。
使用 .radio-inline 类可以让选项显示在同一行上。
文本设置lable标签可以使用for属性和选框的id进行绑定使得点击文字可以选择。
多选框中使用disabled属性可以使选择框不可选
Bootstrap select 下拉菜单
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用multiple
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 表单控件</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap4 表单控件</h4>
<h5>
Bootstrap4 支持以下表单控件：input / textarea / checkbox / radio / select <br>
<b> Bootstrap Input</b>
Bootstrap 支持所有的 HTML5 输入类型: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, 以及 color。<br>
注意：: 如果 input 的 type 属性未正确声明，输入框的样式将不会显示。<br>
</h5>
<form class="form">
<div class="form-group">
<lable for="uname">用户名：</lable>
<input type="text" placeholder="请输入名字" id="uname">
</div>
<div class="form-group">
<lable for="mima">密码：</lable>
<input type="password" id="mima">
</div>
<div class="form-group">
信息：
<textarea class="form-control" name="" id="" cols="30" rows="1"></textarea>
</div>
<h5>
<b><h5>Bootstrap 复选框(checkbox)</h5></b><br>
复选框用于让用户从一系列预设置的选项中进行选择，可以选一个或多个。<br>
使用 .form-check-inline 类可以让选项显示在同一行上
</h5>
<h5>多选框中使用disabled属性可以使选择框不可选</h5>
<div class="form-check form-check-inline">
<input type="checkbox" value="">语文
</div>
<div class="form-check form-check-inline">
<input type="checkbox" value="" disabled>数学
</div>
<h5>
<h5><b>Bootstrap 单选框(Radio))</b></h5>
单选框用于让用户从一系列预设置的选项中进行选择，只能选一个<br>
使用 .radio-inline 类可以让选项显示在同一行上
</h5>
<h5>文本设置lable标签可以使用for属性和选框的id进行绑定使得点击文字可以选择</h5>
<h5>多选框中使用disabled属性可以使选择框不可选</h5>
<label for="radio1"><input id="radio1" type="radio" name="optradio">Option 1</label>
<label class="radio-inline" for="radio2"><input type="radio" name="optradio" id="radio2">Option 2</label>
<label class="radio-inline"><input type="radio" name="optradio" disabled>Option 3</label>
<h5>
<h5><b>Bootstrap select 下拉菜单</b></h5>
当您想让用户从多个选项中进行选择，但是默认情况下只能选择一个选项时，则使用选择框<br>
</h5>
<div class="form-group">
<label for="sel1">单选下拉菜单</label>
<select name="" id="sel1">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select><br>
<label >多选下拉菜单(按住 shift 键，可以选取多个选项):</label>
<select multiple>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
</body>
</html>
二十五、Bootstrap4 输入框组
可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。
使用 .input-group-text 类来设置文本的样式
使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 输入框组</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap4 输入框组</h4>
<h5>
可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。<br>
使用 .input-group-prepend 类可以在输入框的的前面添加文本信息， .input-group-append 类添加在输入框的后面。<br>
使用 .input-group-text 类来设置文本的样式
</h5>
<h5>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框</h5>
<div class="input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">small<img src="../../imgs/2.jpg" alt=""></span>
</div>
<input type="text" class="form-control" placeholder="请输入验证信息">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="请输入邮箱地址">
<div class="input-group-append">
<span class="input-group-text">@.163.com 正常 </span>
</div>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="请输入邮箱地址">
<div class="input-group-append">
<span class="input-group-text">@.163.com 大的</span>
</div>
</div>
多个输入框和文本
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Person</span>
</div>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<span class="input-group-text">Three</span>
</div>
<input type="text" class="form-control">
</div>
</form>
<p>文本信息可以使用复选框与单选框替代</p>
<form class="form-inline">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text"><input type="checkbox" name="checkbox">1
<input type="checkbox" name="checkbox">2
</span>
<input style="width: 250px;" type="text" placeholder="请输入内容或者选择可多选">
</div>
</div>
<div class="input-group">
<input style="width: 400pxd;" type="text" placeholder="请选择或者选择">
<div class="input-group-append">
<span class="input-group-text">
<input type="radio" name="21">1
<input type="radio" name="21">2
</span>
</div>
</div>
</form>
<p>输入框添加按钮组</p>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-danger" type="button">Basic Button</button>
</div>
<input type="text" class="form-control" placeholder="Some text">
</div>
<p>设置下拉菜单</p>
<div class="input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-danger dropdown dropdown-toggle" data-toggle="dropdown">选择网站</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">百度</a>
<a href="#" class="dropdown-item">搜狗</a>
<a href="#" class="dropdown-item">谷歌</a>
</div>
</div>
<input type="text" placeholder="请输入网址或者选择">
</div>
<h5>在输入框组通过在输入框组外围的 label 来设置标签，标签的 for 属性需要与输入框组的 id 对应，点击标签后可以聚焦输入框</h5>
<input id="d1" type="radio" name="xueke"><label for="d1">数学</label>
<input id="d2" type="radio" name="xueke"><label for="d2">英语</label>
<input id="d3" type="radio" name="xueke"><label for="d3">语文</label>
</body>
</html>
二十六、轮播图
|
类 |
描述 |
|
.carousel |
创建一个轮播 |
|
.carousel-indicators |
为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。 |
|
.carousel-inner |
添加要切换的图片 |
|
.carousel-item |
指定每个图片的内容 |
|
.carousel-control-prev |
添加左侧的按钮，点击会返回上一张。 |
|
.carousel-control-next |
添加右侧按钮，点击会切换到下一张。 |
|
.carousel-control-prev-icon |
与 .carousel-control-prev 一起使用，设置左侧的按钮 |
|
.carousel-control-next-icon |
与 .carousel-control-next 一起使用，设置右侧的按钮 |
|
.slide |
切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。 |
|
类 |
描述 |
|
.carousel |
创建一个轮播 |
|
.carousel-indicators |
为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。 |
|
.carousel-inner |
添加要切换的图片 |
|
.carousel-item |
指定每个图片的内容 |
|
.carousel-control-prev |
添加左侧的按钮，点击会返回上一张。 |
|
.carousel-control-next |
添加右侧按钮，点击会切换到下一张。 |
|
.carousel-control-prev-icon |
与 .carousel-control-prev 一起使用，设置左侧的按钮 |
|
.carousel-control-next-icon |
与 .carousel-control-next 一起使用，设置右侧的按钮 |
|
.slide |
切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。 |
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 轮播</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#dome{
width: 80%;
margin: 0 auto;
}
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
</style>
</head>
<body class="container">
<h4>Bootstrap4 轮播</h4>
<h5></h5>
<!--创建轮播图的区域-->
<div id="dome" class="carousel slide" data-ride="carousel">
<!--创建指示符图片上的圆点-->
<ul class="carousel-indicators">
<li data-target="#dome" data-slide-to="0" class="active"></li>
<li data-target="#dome" data-slide-to="1"></li>
<li data-target="#dome" data-slide-to="2"></li>
</ul>
<!--放置内部轮播图片-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="../../imgs/2048374.jpg" alt="">
<!--
轮播图片上添加描述
在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本
-->
<div class="carousel-caption">
<h6>第一张图的面熟标题</h6>
<p>描述文字</p>
</div>
</div>
<div class="carousel-item">
<img src="../../imgs/2048376.jpg" alt="">
</div>
<div class="carousel-item">
<img src="../../imgs/2048378.jpg" alt="">
</div>
</div>
<!--设置图片上的左右切换按钮-->
<a class="carousel-control-prev" href="#dome" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#dome" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>
二十七、Bootstrap4 模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 模态框</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h4>Bootstrap4 模态框</h4>
<h5>
模态框尺寸: <br>
我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框。<br>
尺寸类放在 div元素的 .modal-dialog 类后
</h5>
<!--创建打开模态框的按钮-->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#mymodal">打开模态框</button>
<!--创建模态框-->
<div class="modal fade" id="mymodal"><!--模态框渐入-->
<div class="modal-dialog modal-sm"><!--模态框对话-->
<div class="modal-concent"><!--模态框内容-->
<!--创建模态框头部-->
<div class="modal-header">
<h4 class="modal-title">模态框头部</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!--模态框身体-->
<div class="modal-body">
模态框内容
</div>
<!--模态框脚部-->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</body>
</html>
二十八、Bootstrap4 提示框
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
创建提示框
通过向元素添加 data-toggle=”tooltip” 来来创建提示框。
title 属性的内容为提示框显示的内容
注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。
$(document).ready(function(){
$(‘[data-toggle=”tooltip”]’).tooltip();
});
指定提示框的位置
默认情况下提示框显示在元素上方。
可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 提示框</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Bootstrap4 提示框</h4>
<h5>
通过向元素添加 data-toggle="tooltip" 来来创建提示框。<br>
title 属性的内容为提示框显示的内容<br>
注意: 提示框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 tooltip() 方法。
</h5>
<H5>
默认情况下提示框显示在元素上方。<br>
可以使用 data-placement 属性来设定提示框显示的方向: top, bottom, left 或 right
<div class="container">
<a href="#" data-toggle="tooltip" data-placement="top" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">鼠标移动到我这</a>
<button type="button" class="btn btn-success" data-toggle="tooltip" title="我是提示内容">按钮</button>
<p>提示内容添加 HTML 标签，设置 data-html="true"，title 标签里可以使用HTML标签改变字体样式</p>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
Tooltip with HTML
</button>
<p>禁用按钮</p>
<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="此按钮禁止使用">
<button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>按钮</button>
</span>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
二十九、Bootstrap4 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容
通过向元素添加 data-toggle=”popover” 来来创建弹出框。
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法
$(document).ready(function(){
$(‘[data-toggle=”popover”]’).popover();
});
data-container=”body” 设置此属性时可以将不能显示在区域外的弹出框显示
指定弹出框的位置
默认情况下弹出框显示在元素右侧。
可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:
关闭弹出框
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-trigger=”focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框
如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 “hover”
例如;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 弹出框</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<h4>Bootstrap4 弹出框</h4>
<h5>
通过向元素添加 data-toggle="popover" 来来创建弹出框。<br>
title 属性的内容为弹出框的标题，data-content 属性显示了弹出框的文本内容<br>
注意: 弹出框要写在 jQuery 的初始化代码里: 然后在指定的元素上调用 popover() 方法
</h5>
<h5>
默认情况下弹出框显示在元素右侧。<br>
可以使用 data-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:
</h5>
<h5>
data-container="body" 设置此属性时可以将不能显示在区域外的弹出框显示
</h5>
<h5>
关闭弹出框<br>
默认情况下，弹出框在再次点击指定元素后就会关闭，<br>
你可以使用 data-trigger="focus" 属性来设置在鼠标点击元素外部区域来关闭弹出框
</h5>
<h5>
如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-trigger 属性，并设置值为 "hover"
</h5>
<a href="#" title="标题" data-toggle="popover" data-placement="top" data-trigger="focus data-content="文本">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">点我</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">点我</a>
<button type="button" class="btn btn-secondary" data-toggle="popover" data-placement="top" data-content="普通按钮">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-trigger="hover" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
三十、Bootstrap 滚动监听(Scrollspy)
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
向您想要监听的元素（通常是 body）添加 data-spy=”scroll” 。
然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。注意可滚动项元素上的 id （div id=”section1″） 必须匹配导航栏上的链接选项 （a href=”#section1″)。可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
设置相对定位: 使用 data-spy=”scroll” 的元素需要将其 CSS position 属性设置为 “relative” 才能起作用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 滚动监听</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#body{
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50" >
<!--可滚动区域-->
<!--导航区域-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class=" container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<h5>
向您想要监听的元素（通常是 body）添加 data-spy="scroll" 。<br>
然后添加 data-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。<br>
注意可滚动项元素上的 id （div id="section1"） 必须匹配导航栏上的链接选项 （a href="#section1")。<br>
可选项data-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
设置相对定位: 使用 data-spy="scroll" 的元素需要将其 CSS position 属性设置为 "relative" 才能起作用。
</h5>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>三十一、Bootstrap4 小工具
边框
使用 border 类可以添加或移除边框:
边框圆角设置 使用rounded 类可以添加圆角边框
rounded/rounded-top/rounded-right/rounded-bottom/rounded-right-left/rounded-right-circle/rounded-0
浮动.float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动
响应式浮动
重置浏览器大小查看效果。
我们看可以设置浮动 (.float-*-left|right – * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:水平居中
使用 .mx-auto 类来设置居中对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 小工具</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.border{
display: inline-block;
width: 70px;
height: 70px;
margin-left: 10px;
}
</style>
</head>
<bodd class="container">
<h4>Bootstrap4 小工具</h4>
<h5>边框，使用 border 类可以添加或移除边框: <br>
Bootstrap4 提供了一些类来设置边框颜色
</h5>
<h5>边框圆角设置 使用rounded 类可以添加圆角边框<br>
rounded/rounded-top/rounded-right/rounded-bottom/rounded-right-left/rounded-right-circle/rounded-0
</h5>
<span class="border "></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
<span class="border border-primary rounded"></span>
<span class="border border-secondary rounded-top"></span>
<span class="border border-success rounded-right"></span>
<span class="border border-danger rounded-bottom"></span>
<span class="border border-warning rounded-left"></span>
<span class="border border-info rounded-circle"></span>
<span class="border border-light"></span>
<span class="border border-dark rounded-0"></span>
<span class="border border-white"></span>
<h5>
浮动 .float-right 类用于设置元素右浮动， .float-left 设置元素左浮动, .clearfix 类用于清除浮动
</h5>
<div class="clearfix">
<span class="float-left">左浮动</span>
<span class="float-right">右浮动</span>
</div>
<h4>响应式浮动</h4>
<h5>重置浏览器大小查看效果。</h5>
<h5>我们看可以设置浮动 (.float-*-left|right - * 为 sm, md, lg 或 xl)的方向依赖于屏幕的大小:</h5>
<div class="float-sm-right">在大于小屏幕尺寸上右浮动</div><br>
<div class="float-md-right">在大于中等屏幕尺寸上右浮动</div><br>
<div class="float-lg-right">在大于大屏幕尺寸上右浮动</div><br>
<div class="float-xl-right">在大于超大屏幕尺寸上右浮动</div><br>
<div class="float-none">没有浮动</div>
<h4>水平居中</h4>
<h5>使用 .mx-auto 类来设置居中对齐::</h5>
<div class="mx-auto bg-warning" style="width:150px">居中</div>
</body>
</html>三十一、Bootstrap4 flex盒子
d-flex 类创建一个弹性盒子容器，范围是整个屏幕宽度
使用 d-inline-flex 类可以创建显示在同一行上且范围是最后一个子元素的弹性盒子容器
flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 镜像反转。
class=”flex-colum”可以设置弹性盒子元素垂直显示。
.flex-column-reverse类设置水平镜像翻转
.justify-content-* 类用于修改弹性子元素的水平排列方式，* 号允许的值有：start (默认), end, center, between 或 around:
我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。
注意:这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。
.align-content-start (默认):
.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</h5>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap4 flex盒子</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 新 Bootstrap4 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
.test1 {
width: 300px;
height: 300px;
background-color: lightgrey;
display: flex;
}
.test2 {
width: 300px;
height: 300px;
background-color: lightgrey;
}
.flex-item{
background-color: cornflowerblue;
width: 70px;
height: 70px;
}
.item{
background-color: cornflowerblue;
width: 70px;
height: 70px;
margin: 10px;
}
</style>
</head>
<body class="container" >
<h4>flex盒子</h4>
<h5>d-flex 类创建一个弹性盒子容器，范围是整个屏幕宽度</h5>
<h5>使用 d-inline-flex 类可以创建显示在同一行上且范围是最后一个子元素的弹性盒子容器</h5>
<h5>.flex-row 可以设置弹性子元素水平显示，这是默认的。<br>
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 镜像反转。
</h5>
<h5>class="flex-colum"可以设置弹性盒子元素垂直显示。<br>
.flex-column-reverse类设置水平镜像翻转
</h5>
<h5>
.justify-content-* 类用于修改弹性子元素的水平排列方式，
* 号允许的值有：start (默认), end, center, between 或 around:
</h5>
<h5>
我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。<br>
<strong>注意:</strong> 这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。<br>
.align-content-start (默认):
</h5>
<h5>.flex-fill 类强制设置各个弹性子元素的宽度是一样的:</h5>
<div class="test1 d-lex flex-row-reverse ">
<div class="flex-item flex-fill bg-dark">flex item 1</div>
<div class="flex-item flex-fill bg-info">flex item 2</div>
<div class="flex-item flex-fill bg-danger">flex item 3</div>
</div><br>
<div class="test2 d-flex flex-column ">
<div class="item">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
</div><br>
<div class="test2 d-flex justify-content-end" >
<div class="item ">flex item 1</div>
<div class="item">flex item 2</div>
<div class="item">flex item 3</div>
</div>
<h5>.flex-grow-1 用于设置子元素使用剩下的空间。
以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :</h5>
<h5>.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，
数字越低权重越高( .order-1 排在 .order-2 之前) :</h5>
</div>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info order-3">Flex item 1</div>
<div class="p-2 bg-warning order-2">Flex item 2</div>
<div class="p-2 bg-primary order-1 flex-grow-1">Flex item 3</div>
</div>
<h5>.mr-auto 类可以设置子元素右外边距为 auto，.ml-auto 类可以设置子元素左外边距为 auto，</h5>
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 ml-auto bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
<h5>弹性容器中包裹弹性子元素可以使用以下三个类： .flex-nowrap (默认)(在同一行平均), .flex-wrap（左到右沾满屏幕自动换行） 或 .flex-wrap-reverse（右下角到左上角沾满换行）</h5>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap bg-light align-content-around" style="height: 300px;">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-wrap-reverse:</code></p>
<div class="d-flex flex-wrap-reverse bg-light">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p><code>.flex-nowrap:</code></p>
<div class="d-flex flex-nowrap bg-light ">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
<div class="p-2 border">Flex item 26</div>
<div class="p-2 border">Flex item 27</div>
<div class="p-2 border">Flex item 28</div>
<div class="p-2 border">Flex item 29</div>
<div class="p-2 border">Flex item 30</div>
<div class="p-2 border">Flex item 31</div>
<div class="p-2 border">Flex item 32</div>
<div class="p-2 border">Flex item 33</div>
<div class="p-2 border">Flex item 34</div>
<div class="p-2 border">Flex item 35</div>
</div>
<br>
</div>
<p>.align-content-start (默认):</p>
<div class="d-flex flex-wrap align-content-start bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-end:</p>
<div class="d-flex flex-wrap align-content-end bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-center:</p>
<div class="d-flex flex-wrap align-content-center bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-around:</p>
<div class="d-flex flex-wrap align-content-around bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
<br>
<p>.align-content-stretch:</p>
<div class="d-flex flex-wrap align-content-stretch bg-light" style="height:300px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
<div class="p-2 border">Flex item 4</div>
<div class="p-2 border">Flex item 5</div>
<div class="p-2 border">Flex item 6</div>
<div class="p-2 border">Flex item 7</div>
<div class="p-2 border">Flex item 8</div>
<div class="p-2 border">Flex item 9</div>
<div class="p-2 border">Flex item 10</div>
<div class="p-2 border">Flex item 11</div>
<div class="p-2 border">Flex item 12</div>
<div class="p-2 border">Flex item 13 </div>
<div class="p-2 border">Flex item 14</div>
<div class="p-2 border">Flex item 15</div>
<div class="p-2 border">Flex item 16</div>
<div class="p-2 border">Flex item 17</div>
<div class="p-2 border">Flex item 18</div>
<div class="p-2 border">Flex item 19</div>
<div class="p-2 border">Flex item 20</div>
<div class="p-2 border">Flex item 21</div>
<div class="p-2 border">Flex item 22</div>
<div class="p-2 border">Flex item 23</div>
<div class="p-2 border">Flex item 24</div>
<div class="p-2 border">Flex item 25</div>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/79867.html
