文章目录
这篇文章是我根据菜鸟教程bootstrap5写的
所有的代码我都测试过，菜鸟教程是的一些失效的代码我没弄上来
这篇文章对于初学者足够，后续还会不断补充，可以收藏
源代码如下
通过网盘分享的文件：bootstrap.rar
链接: https://pan.baidu.com/s/1ln4yurNpR16OGJpD9NvoiA 提取码: 6666
md版本笔记如下
通过网盘分享的文件：bs笔记.rar
链接: https://pan.baidu.com/s/1whjZEswHkXpA8U_KcK_tog 提取码: 6666
失效了请在评论区留言
每段代码都是有结果的，图片太多了传不上来
图片上传失败好难搞，建议直接下md的笔记看
或者看这个pdf
通过网盘分享的文件：bootstrap笔记.pdf
链接: https://pan.baidu.com/s/1bhl3jCoq8xmD00Q7jXDAQQ 提取码: 6666
什么是bootstrap
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。
Bootstrap5是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。
引入bootstrap
<!-- 新 Bootstrap5 核心 CSS 文件 -->
<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
<!-- popper.min.js 用于弹窗、提示、下拉菜单 -->
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/popper.js/2.11.2/umd/popper.min.js"></script>
<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/twitter-bootstrap/5.1.3/js/bootstrap.min.js"></script>
网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要，定义列数：
Bootstrap 4 网格系统有以下 5 个类:
- .col- 针对所有设备
- .col-sm- 平板 - 屏幕宽度等于或大于 576px
- .col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
- .col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
- .col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)
创建相等宽度的列，Bootstrap 自动布局
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
等宽响应式列
以下实例演示了如何在平板及更大屏幕上创建等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，四个列将会上下堆叠排版:
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-3">.col-sm-3</div>
不等宽响应式列
以下实例演示了在平板及更大屏幕上创建不等宽度的响应式列。 在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版:
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
平板和桌面端
以下实例演示了在桌面设备的显示器上两个列的宽度各占 50%，如果在平板端则左边的宽度为 25%，右边的宽度为 75%, 在移动手机等小型设备上会堆叠显示。
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6">
<p>RUNOOB</p>
</div>
<div class="col-sm-9 col-md-6">
<p>菜鸟教程</p>
</div>
</div>
</div>
平板、桌面、大桌面显示器、超大桌面显示器
以下实例在平板、桌面、大桌面显示器、超大桌面显示器的宽度比例为分别为：25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, 在移动手机等小型设备上会堆叠显示。
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col-lg-4 col-xl-2">
<p>RUNOOB</p>
</div>
<div class="col-sm-9 col-md-6 col-lg-8 col-xl-10">
<p>菜鸟教程</p>
</div>
</div>
</div>
偏移列
偏移列就相当于填充的空白行
偏移列通过 offset-*-* 类来设置。第一个星号( * )可以是 sm、md、lg、xl，表示屏幕设备类型，第二个星号( * )可以是 1 到 11 的数字。
为了在大屏幕显示器上使用偏移，请使用 .offset-md-* 类。这些类会把一个列的左外边距（margin）增加 ***** 列，其中 ***** 范围是从 1 到 11。
例如：.offset-md-4 是把.col-md-4 往右移了四列格。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
文字排版
标题
Bootstrap 提供 hl 到 h6 的 class，方便为任何标签文本赋予标题样式。例如，下面的＜div> 标签样式与一级标题样式是相同的：
<div class="h1">一级标签</div>
<div class="h2">二级标签</div>
<div class="h3">三级标签</div>
<div class="h4">四级标签</div>
<div class="h5">五级标签</div>
<div class="h6">六级标签</div>
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式: .display-1, .display-2, .display-3, .display-4。
<div class="container">
<h1>Display 标题</h1>
<p>Display 标题可以输出更大更粗的字体样式。</p>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
段落突出
添加 lead类样式可以定义段落突出显示，被突出的段落文本字体被放大，字距和行高 也被显著放大
<hl>山居秋阪</hl>
<h2><small>王维</small></h2>
<p>空山新雨后，天气晚来秋。</p>
<p class="lead"> 明月松间照， 清泉石上流。</p>
<p>竹喧归洗女，莲下动渔舟。</p>
<p>随意春芳歇，王孙自可留。</p>
文本颜色和背景颜色
Bootstrap 5.0 定义了一套强调类，这些表示强调的工具类通过颜色进行区分。具体说明如下：
.text-muted： 提示，浅灰色。
.text-primary： 主要，蓝色。
. text-success： 成功，浅绿色。
.text-info：通知信息， 浅蓝色。
.text-warning： 警告，洗黄色。
. text-danger：危险，浅红色。
这些样式类也可应用于链接，当鼠标指针经过链接时，其颜色会变深。
<p>强调工具类</p>
<p class="text-muted">.text-muted： 提示，浅灰色。</p>
<p class="text-primary">.text-primary： 主要，蓝色。。</p>
<p class="text-success">.text-success： 成功，浅绿色。</p>
<p class="text-info">.text-info：通知信息， 浅蓝色。</p>
<p class="text-warning">.text-warning： 警告，洗黄色。</p>
<p class="text-danger">.text-danger：危险，浅红色。</p>
提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。
<div class="container">
<h2>背景颜色</h2>
<p class="bg-primary text-white">重要的背景颜色。</p>
<p class="bg-success text-white">执行成功背景颜色。</p>
<p class="bg-info text-white">信息提示背景颜色。</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色。</p>
<p class="bg-secondary text-white">副标题背景颜色。</p>
<p class="bg-dark text-white">深灰背景颜色。</p>
<p class="bg-light text-dark">浅灰背景颜色。</p>
</div>
.bg-gradient 类可以设置背景颜色渐变的效果
文本对齐
下面的3行代码分别定义文本左对齐、居中对齐和右对齐效果：
<p class="text-left">文本左对齐</p>
<p class="text-center">文本居中</p>
<p class="text-right">文本右对齐</p>
缩略词
bootstrap为＜abbr＞标签添加.initialism 类缩略词被缩小， 同时全部大写显示。鼠标变为问号
<p><abbr class="initialism" title="Cascading Style Sheets">CSS</abbr>是英语层叠样
式表单的缩写， 它是一种用来表现HTML或XML等文件样式的计算机语言。
</p>
引用
Bootstrap 3.0 优化了＜blockquote＞标签样式， 重新定义了 padding 和 margin 属性值，清除了左右缩 进样式，设计底部外边距为 20像素，通过在左侧添加灰色粗边框线，设计一种引用效果，具体样式代 码如下：
blockquote标签保留文本原样
cite标签把指向其他文档的引用分离出来
<blockquote>
<p>全球最大的中文 Web 技术教程。在 w3school 中，可以找到所需要的所有的网站建设教程。 从基
础的HTML 到 XHTML， 乃至进阶的 XML, SQL、 数据库、 多媒体和 WAP. </p>
<small>来源于<cite><a href="http://www.baidu.com">W3School</a></cite></small>
</blockquote>
)
< small>
在 Bootstrap 5 中 HTML 元素用于创建字号更小的颜色更浅的文本:
<div class="container">
<h1>更小文本标题</h1>
<p>small 元素用于字号更小的颜色更浅的文本:</p>
<h1>h1 标题 <small>副标题</small></h1>
<h2>h2 标题 <small>副标题</small></h2>
<h3>h3 标题 <small>副标题</small></h3>
<h4>h4 标题 <small>副标题</small></h4>
<h5>h5 标题 <small>副标题</small></h5>
<h6>h6 标题 <small>副标题</small></h6>
</div>
< mark>
Bootstrap 4 定义 为黄色背景及有一定的内边距:
<div class="container">
<h1>高亮文本</h1>
<p>使用 mark 元素来 <mark>高亮</mark> 文本。</p>
</div>
< abbr>
Bootstrap 4 定义 HTML 元素的样式为显示在文本底部的一条虚线边框:
<div class="container">
<h1>Abbreviations</h1>
<p>The abbr element is used to mark up an abbreviation or acronym:</p>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>
< blockquote>
对于引用的内容可以在
上添加 .blockquote 类 :
<div class="container">
<h1>Blockquotes</h1>
<p>The blockquote element is used to present content from another source:</p>
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
</div>
< dl>
Bootstrap 4 定义 HTML
-
元素的样式如下:
<div class="container">
<h1>Description Lists</h1>
<p>The dl element indicates a description list:</p>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
< code>
Bootstrap 4 定义 HTML 元素的样式如下:
<div class="container">
<h1>代码片段</h1>
<p>可以将一些代码元素放到 code 元素里面:</p>
<p>以下 HTML 元素: <code>span</code>, <code>section</code>, 和 <code>div</code> 用于定义部分文档内容。</p>
</div>
< kbd>
Bootstrap 4 定义 HTML 元素的样式如下:
表示键盘输入的文本或者用户输入的命令
<div class="container">
<h1>Keyboard Inputs</h1>
<p>To indicate input that is typically entered via the keyboard, use the kbd element:</p>
<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>
< pre>
保留文本原始格式
Bootstrap 4 定义 HTML
元素的样式如下:
<div class="container">
<h1>Multiple Code Lines</h1>
<p>For multiple lines of code, use the pre element:</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
更多文本样式
表格
基础表格
Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
条纹表格
通过添加 .table-striped 类，您将在 内的行上看到条纹，如下面的实例所示：
<table class="table table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
带边框表格
.table-bordered 类可以为表格添加边框
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
鼠标悬停状态表格
.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：
<table class="table table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
黑色背景表格
.table-dark 类可以为表格添加黑色背景：
<table class="table table-dark">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
黑色条纹表格
联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：
<table class="table table-dark table-striped">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
鼠标悬停效果 - 黑色背景表格
联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：
<table class="table table-dark table-hover">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
无边框表格
.table-borderless 类可以设置一个无边框的表格：
<table class="table table-borderless">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色：
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo@example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act@example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec@example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie@example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo@example.com</td>
</tr>
</tbody>
</table>
表头颜色
在 Bootstrap v4.0.0-beta.2 中**.thead-dark** 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:
<table class="table">
<thead class="thead-dark">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
较小的表格
.table-sm 类用于通过减少内边距来设置较小的表格:
<table class="table table-bordered table-sm">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
响应式表格
.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>City</th>
<th>Country</th>
<th>Sex</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
<th>Example</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
<td>Female</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
响应式表格更多参考
图像形状
圆角图片
.rounded 类可以让图片显示圆角效果：
<img src="1.jpg" class="rounded" alt="Cinque Terre">
<img src="img/1.jpg" class="rounded" alt="...">
<img src="img/1.jpg" class="rounded-top" alt="...">
<img src="img/1.jpg" class="rounded-end" alt="...">
<img src="img/1.jpg" class="rounded-bottom" alt="...">
<img src="img/1.jpg" class="rounded-start" alt="...">
<img src="img/1.jpg" class="rounded-circle" alt="...">
<img src="img/1.jpg" class="rounded-pill" alt="...">
椭圆图片
.rounded-circle 类可以设置椭圆形图片:
<img src="1.jpg" class="rounded-circle" alt="Cinque Terre">
缩略图
.img-thumbnail 类用于设置图片缩略图(图片有边框):
<img src="1.jpg" class="img-thumbnail" alt="Cinque Terre">
图片对齐方式
使用 .float-right 类来设置图片右对齐，使用 .float-left 类设置图片左对齐:
<img src="img/1.jpg" class="float-start">
<img src="img/1.jpg" class="float-end">
图片居中
使用 .mx-auto (margin:auto) 和 .d-block (display:block) 类来设置图片居中对齐：
<img src="1.jpg" class="mx-auto d-block">
响应式图片
图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
我们可以通过在 标签中添加 .img-fluid 类来设置响应式图片。
.img-fluid 类设置了 max-width: 100%; 、 height: auto; :
<img class="img-fluid" src="1.jpg" alt="Chania">
信息提示框
提示框可以使用 .alert 类, 后面加上 .alert-success, .alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light 或 .alert-dark 类来实现:
<div class="alert alert-success">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-warning">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-danger">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-primary">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-secondary">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-light">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-dark">
<strong>成功!</strong> 指定操作成功提示信息。
</div>
提示框添加链接
提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接：
<div class="alert alert-success">
<strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
</div>
关闭提示框
我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。
<div class="container mt-3">
<h2>关闭提示框</h2>
<p>我们可以在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class="btn-close" 和 data-bs-dismiss="alert" 类来设置提示框的关闭操作。</p>
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>警告!</strong> 设置警告信息。
</div>
<div class="alert alert-danger alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>错误!</strong> 失败的操作。
</div>
<div class="alert alert-primary alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>首选!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>次要的!</strong> 显示一些不重要的信息。
</div>
<div class="alert alert-dark alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>浅灰色!</strong>浅灰色提示框。
</div>
</div>
提示框动画
.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：
<div class="container mt-3">
<h2>提示框动画</h2>
<p>.fade 和 .show 类用于设置提示框在关闭时的淡出和淡入效果：</p>
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功!</strong> 指定操作成功提示信息。
</div>
<div class="alert alert-info alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>信息!</strong> 请注意这个信息。
</div>
<div class="alert alert-warning alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>警告!</strong> 设置警告信息。
</div>
<div class="alert alert-danger alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>错误!</strong> 失败的操作。
</div>
<div class="alert alert-primary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>首选!</strong> 这是一个重要的操作信息。
</div>
<div class="alert alert-secondary alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>次要的!</strong> 显示一些不重要的信息。
</div>
<div class="alert alert-dark alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>深灰色!</strong> 深灰色提示框。
</div>
<div class="alert alert-light alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>浅灰色!</strong>浅灰色提示框。
</div>
</div>
按钮
<button type="button" class="btn">基本按钮</button>
<button type="button" class="btn btn-primary">主要按钮</button>
<button type="button" class="btn btn-secondary">次要按钮</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">黑色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
按钮类可用于 , , 或 元素上:
<a href="#" class="btn btn-info" role="button">链接按钮</a>
<button type="button" class="btn btn-info">按钮</button>
<input type="button" class="btn btn-info" value="输入框按钮">
<input type="submit" class="btn btn-info" value="提交按钮">
按钮设置边框
<button type="button" class="btn btn-outline-primary">主要按钮</button>
<button type="button" class="btn btn-outline-secondary">次要按钮</button>
<button type="button" class="btn btn-outline-success">成功</button>
<button type="button" class="btn btn-outline-info">信息</button>
<button type="button" class="btn btn-outline-warning">警告</button>
<button type="button" class="btn btn-outline-danger">危险</button>
<button type="button" class="btn btn-outline-dark">黑色</button>
<button type="button" class="btn btn-outline-light text-dark">浅色</button>
不同大小的按钮
Bootstrap 4 可以设置按钮的大小：
<button type="button" class="btn btn-primary btn-lg">大号按钮</button>
<button type="button" class="btn btn-primary">默认按钮</button>
<button type="button" class="btn btn-primary btn-sm">小号按钮</button>
块级按钮
通过添加 .btn-block 类可以设置块级按钮：
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">按钮 1</button>
</div>
激活和禁用的按钮
按钮可设置为激活或者禁止点击的状态。
.active 类可以设置按钮是可用的， disabled 属性可以设置按钮是不可点击的。 注意 元素不支持 disabled 属性，你可以通过添加 .disabled 类来禁止链接的点击。
<button type="button" class="btn btn-primary active">点击后的按钮</button>
<button type="button" class="btn btn-primary" disabled>禁止点击的按钮</button>
<a href="#" class="btn btn-primary disabled">禁止点击的链接</a>
加载按钮
我们也可以设置一个正在加载的按钮。
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
按钮组
Bootstrap 4 中允许我们将按钮放在同一行上。
可以在
元素上添加
.btn-group 类来创建按钮组。
我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
垂直按钮组
可以使用 .btn-group-vertical 类来创建垂直的按钮组：
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
内嵌按钮组及下拉菜单
我们可以在按钮组内设置下拉菜单：
<div class="container mt-3">
<h2>内嵌按钮组</h2>
<p>按钮组设置下拉菜单:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
垂直按钮组及下拉菜单
<div class="container mt-3">
<h2>垂直按钮组及下拉菜单</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
多个按钮组
按钮组可以一个个并列显示在同一行上：
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">BMW</button>
<button type="button" class="btn btn-primary">Mercedes</button>
<button type="button" class="btn btn-primary">Volvo</button>
</div>
徽章
徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .badge-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化:
<div class="container mt-3">
<h2>徽章</h2>
<h1>测试标题 <span class="badge bg-secondary">New</span></h1>
<h2>测试标题 <span class="badge bg-secondary">New</span></h2>
<h3>测试标题 <span class="badge bg-secondary">New</span></h3>
<h4>测试标题 <span class="badge bg-secondary">New</span></h4>
<h5>测试标题 <span class="badge bg-secondary">New</span></h5>
<h6>测试标题 <span class="badge bg-secondary">New</span></h6>
</div>
各种颜色类型的徽章
加入badge-*类就行
<div class="container mt-3">
<h2>各种颜色类型的徽章</h2>
<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<span class="badge bg-success">成功</span>
<span class="badge bg-danger">危险</span>
<span class="badge bg-warning">警告</span>
<span class="badge bg-info">信息</span>
<span class="badge bg-light">浅色</span>
<span class="badge bg-dark">深色</span>
</div>
药丸形状徽章
使用 .badge-pill 类来设置药丸形状徽章:
<div class="container mt-3">
<h2>药丸形状徽章</h2>
<span class="badge rounded-pill bg-default">默认</span>
<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-success">成功</span>
<span class="badge rounded-pill bg-info">信息</span>
<span class="badge rounded-pill bg-warning">警告</span>
<span class="badge rounded-pill bg-danger">危险</span>
</div>
徽章插入到元素内
以下实例将徽章嵌入到按钮内
<div class="container mt-3">
<h2>徽章嵌入到按钮内</h2>
<button type="button" class="btn btn-primary">
Messages <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-danger">
Notifications <span class="badge bg-dark">7</span>
</button>
</div>
进度条
创建一个基本的进度条的步骤如下：
- 添加一个带有 .progress 类的
。
- 接着，在上面的
内，添加一个带有 class .progress-bar 的空的。
- 添加一个带有百分比表示的宽度的 style 属性，例如 style=“width:70%” 表示进度条在 70% 的位置。
- 进度条高度默认为 16px。我们可以使用 CSS 的
height属性来修改他：
<div class="progress" style="height:20px;">
<div class="progress-bar" style="width:40%;"></div>
</div>
可以在进度条内添加文本，如进度的百分比
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
不同颜色的进度条
默认情况下进度条为蓝色，Bootstrap4 还提供了以下颜色的进度条
<div class="progress">
<div class="progress-bar bg-success" style="width:40%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width:50%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width:60%"></div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width:70%"></div>
</div>
条纹的进度条
可以使用 .progress-bar-striped 类来设置条纹进度条：
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
动画进度条
使用 .progress-bar-animated 类可以为进度条添加动画
<div class="container">
<h2>动画进度条</h2>
<p>使用 .progress-bar-animated 类可以为进度条添加动画：</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
</div>
混合色彩进度条
进度条可以设置多种颜色：
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
加载效果
要创建加载中效果可以使用 .spinner-border 类:
可以使用文本颜色类设置不同的颜色：
<div class="spinner-border text-muted"></div>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-dark"></div>
<div class="spinner-border text-light"></div>
闪烁的加载效果
使用 .spinner-grow 类来设置闪烁的加载效果:
<div class="spinner-grow text-muted"></div>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-dark"></div>
<div class="spinner-grow text-light"></div>
设置加载效果大小
使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm"></div>
加载按钮
我们也可以设置一个正在加载的按钮。
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>
分页
网页开发过程，如果碰到内容过多，一般都会做分页处理。
Bootstrap 4 可以很简单的实现分页效果。
要创建一个基本的分页可以在
- 元素上添加 .pagination 类。然后在
- 元素上添加 .page-item 类，
- 元素的 标签上添加 .page-link 类:
当前页可以使用 .active 类来高亮显示：
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
不可点击的分页链接
.disabled 类可以设置分页链接不可点击:
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
分页显示大小
可以将分页条目设置为不同的大小。
.pagination-lg 类设置大字体的分页条目，.pagination-sm 类设置小字体的分页条目:
<ul class="pagination pagination-lg">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
<ul class="pagination pagination-sm">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
面包屑导航
.breadcrumb 和 .breadcrumb-item 类用于设置面包屑导航：
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
<li class="breadcrumb-item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
分页的对齐方式
可以使用工具类来设置分页的对齐方式：
<div class="container">
<h2>分页的对齐方式</h2>
<p>可以使用工具类来设置分页的对齐方式：</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
</div>
列表组
要创建列表组，可以在
- 元素上添加 .list-group 类, 在
- 元素上添加 .list-group-item 类:
通过添加 .active 类来设置激活状态的列表项：
.disabled 类用于设置禁用的列表项:
<ul class="list-group">
<li class="list-group-item disabled">Disabled item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item active">Third item</li>
</ul>
)
链接列表项
要创建一个链接的列表项，可以将
-
替换为
， 替换
- 。如果你想鼠标悬停显示灰色背景就添加**.list-group-item-action** 类:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">First item</a>
<a href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
移除列表边框
使用 .list-group-flush 类来删除列表的边框和圆角：
<div class="container">
<ul class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
</div>
水平列表组
我们可以将 .list-group-horizontal 类添加到 .list-group 类后面来创建水平列表组：
<ul class="list-group list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
多种颜色列表项
列表项目的颜色可以通过以下列来设置： .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, list-group-item-dark 和 list-group-item-light:
<ul class="list-group">
<li class="list-group-item list-group-item-success">成功列表项</li>
<li class="list-group-item list-group-item-secondary">次要列表项</li>
<li class="list-group-item list-group-item-info">信息列表项</li>
<li class="list-group-item list-group-item-warning">警告列表项</li>
<li class="list-group-item list-group-item-danger">危险列表项</li>
<li class="list-group-item list-group-item-primary">主要列表项</li>
<li class="list-group-item list-group-item-dark">深灰色列表项</li>
<li class="list-group-item list-group-item-light">浅色列表项</li>
</ul>
链接的多种颜色列表项
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">激活列表项</a>
<a href="#" class="list-group-item list-group-item-success">成功列表项</a>
<a href="#" class="list-group-item list-group-item-secondary">次要列表项</a>
<a href="#" class="list-group-item list-group-item-info">信息列表项</a>
<a href="#" class="list-group-item list-group-item-warning">警告列表项</a>
<a href="#" class="list-group-item list-group-item-danger">危险列表项</a>
<a href="#" class="list-group-item list-group-item-primary">主要列表项</a>
<a href="#" class="list-group-item list-group-item-dark">深灰色列表项</a>
<a href="#" class="list-group-item list-group-item-light">浅色列表项</a>
</div>
卡片
Bootstrap 4 卡片（Card）组件 是一种灵活且强大的内容容器，可以用于显示各种类型的内容，如文本、图像、列表等。
卡片组件是 Bootstrap 4 中非常常见的 UI 元素，通常用于展示信息、博客文章、产品或社交媒体帖子等。
基本结构
卡片组件是由多个嵌套元素组成的，主要包括以下几部分：
.card：卡片的最外层容器。.card-body：包含卡片内容的容器，通常用于放置文本、标题或其他元素。.card-title：卡片的标题。.card-text：卡片的文本内容。.card-img-top或.card-img-bottom：用于展示图片，放在卡片的顶部或底部。
样式类说明：
简单的卡片
<div class="card">
<div class="card-header">头部</div>
<div class="card-body">内容</div>
<div class="card-footer">底部</div>
</div>
多种颜色卡片
Bootstrap 4 提供了多种卡片的背景颜色类： .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。
<div class="container">
<h2>多种颜色卡片</h2>
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
</div>
标题、文本和链接
我们可以在头部元素上使用 .card-title 类来设置卡片的标题 。 .card-text 类用于设置卡片正文的内容。 .card-link 类用于给链接设置颜色。
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
图片卡片
我们可以给 添加 .card-img-top（图片在文字上方） 或 .card-img-bottom（图片在文字下方 来设置图片卡片：
<div class="card" style="width:400px">
<img class="card-img-top" src="img/1.jpg" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
如果图片要设置为背景，可以使用 .card-img-overlay 类:
<div class="card" style="width:500px">
<img class="card-img-top" src="img/1.jpg" alt="Card image">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
水平卡片
通过结合网格和工具类，可以以响应式适应移动端的方式将卡片设置为水平排列。
以下实例中，我们使用 .no-gutters 移除网格间距，并使用 .col-md-* 类在 md 屏幕断点处将卡片设置为水平排列。
<div class="card mb-3" style="max-width: 540px;">
<div class="row no-gutters">
<div class="col-md-4">
<img src="img/1.jpg" class="card-img" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
下拉菜单
下拉菜单是可切换的，是以列表格式显示链接的上下文菜单。
.dropdown 类用来指定一个下拉菜单。
我们可以使用一个按钮或链接来打开下拉菜单， 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
元素上添加 .dropdown-menu 类来设置实际下拉菜单，然后在下拉菜单的选项中添加 .dropdown-item 类。
.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线：
.dropdown-header 类用于在下拉菜单中添加标题：
.dropdown-item-text 类可以设置下拉菜单中的文本项：
.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。
如果要禁用下拉菜单的选项，可以使用**.disabled** 类。
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉菜单按钮
</button>
<div class="dropdown-menu">
<li><h5 class="dropdown-header">标题 1</h5></li>
<a class="dropdown-item active" href="#">链接 1</a>
<a class="dropdown-item " href="#">链接 2</a>
<li><hr class="dropdown-divider"></li>
<a class="dropdown-item disabled" href="#">链接 3</a>
<li><span class="dropdown-item-text">仅仅是文本</span></li>
</div>
</div>
<div class="container mt-3">
<h2>内嵌按钮组</h2>
<p>内嵌按钮组创建下拉菜单:</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
<div class="container mt-3">
<h2>垂直方向内嵌按钮组</h2>
<p>垂直方向内嵌按钮组创建下拉菜单:</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Sony</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Tablet</a></li>
<li><a class="dropdown-item" href="#">Smartphone</a></li>
</ul>
</div>
</div>
</div>
下拉菜单的定位
.dropend 是右对齐， .dropstart 是左对齐。
<div class="container mt-3">
<h2>下拉菜单</h2>
<p>如果我们想让下拉菜单右对齐，可以在元素上的 .dropdown 类后添加 .dropend 类。</p>
<div class="dropdown dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
右边显示菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">常规项</a></li>
<li><a class="dropdown-item active" href="#">激活项</a></li>
<li><a class="dropdown-item disabled" href="#">禁用项</a></li>
</ul>
</div>
<p>如果我们想让下拉菜单左边对齐，可以在元素上的 .dropdown 类后添加 .dropstart 类，同时我们将整个下拉菜单向右浮动。</p>
<div class="dropdown dropstart text-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
左边显示菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">常规项</a></li>
<li><a class="dropdown-item active" href="#">激活项</a></li>
<li><a class="dropdown-item disabled" href="#">禁用项</a></li>
</ul>
</div>
</div>
下拉菜单弹出方向设置
下拉菜单弹出方向默认为向下，当然我们也可以设置不同的方向。
如果你希望下拉菜单向右下方弹出，可以在 div 元素上添加 .dropdown-menu-end 类:
如果你希望上拉菜单向上弹出，可以在 div 元素上添加 “dropup” 类:
如果你希望下拉菜单向上弹出，可以在 div 元素上添加 dropstart 类:
<!-- 右下方拉菜单按钮 -->
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉菜单右下方弹出
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div>
<!-- 向上菜单 -->
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div>
<!-- 左边的下拉菜单 -->
<div class="dropstart">
添加一些内容，用于测试向左边弹出效果。<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
下拉菜单
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div>
折叠
Bootstrap5 折叠可以很容易的实现内容的显示与隐藏。
data-bs-toggle 和 data-bs-target 是用于定义组件行为和目标元素的自定义数据属性。
1、data-bs-toggle 属性：
- 用于定义组件的行为，指示组件在何时触发。
- 可以设置的值取决于具体的组件类型，如
"collapse"（折叠菜单）、"modal"（模态框）、"tab"（标签页）等。 data-bs-toggle="collapse"用于触发折叠菜单的展开与折叠。data-bs-toggle="modal"用于触发模态框的显示与隐藏。data-bs-toggle="tab"用于触发标签页的切换。
2、data-bs-target 属性：
- 用于指定组件的目标元素或目标选择器。
- 目标元素可以是一个 CSS 选择器，用于标识要操作的具体元素。
- 也可以是一个指定的元素 ID，以
#开头，如data-bs-target="#myModal"。 data-bs-target属性与data-bs-toggle属性一起使用，用于将组件行为与目标元素关联起来。
.show 类让内容默认显示:
.collapse 类用于指定一个折叠元素
<div class="container mt-3">
<h2>简单的折叠</h2>
<p>点击按钮内容会再显示与隐藏之间切换。</p>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">折叠</button>
<div id="demo" class="collapse show">
这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。这里是一些测试的内容。。。
</div>
</div>
手风琴案例
使用 data-bs-parent 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏
<div class="container mt-3">
<h2>手风琴实例</h2>
<p><strong>注意：</strong> 使用 <strong>data-parent</strong> 属性来确保所有的折叠元素在指定的父元素下，这样就能实现在一个折叠选项显示时其他选项就隐藏。</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
选项一
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
#1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
选项二
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
#2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
选项三
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
#3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
</div>
</div>
导航
如果你想创建一个简单的水平导航栏，可以在
- 元素上添加 .nav类，在每个
- 选项上添加 .nav-item 类，在每个链接上添加 .nav-link 类:
.justify-content-center 类设置导航居中显示， .justify-content-end 类设置导航右对齐，默认是左对齐不用设置
<div class="container mt-3">
<h2>导航</h2>
<p>左对齐导航 (默认):</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<p class="text-center">居中对齐导航:</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<p class="text-end">右对齐导航:</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
)
垂直导航
.flex-column 类用于创建垂直导航
<div class="container mt-3">
<h2>垂直导航</h2>
<p>.flex-column 类用于创建垂直导航：</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
使用 .nav-tabs 类可以将导航转化为选项卡。然后对于选中的选项使用 .active 类来标记
<div class="container mt-3">
<h2>选项卡</h2>
<p>选项卡导航:</p>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
导航等宽
.nav-justified 类可以设置导航项齐行等宽显示。
<div class="container mt-3">
<h2>导航等宽</h2>
<p>.nav-justified 类可以设置导航项齐行等宽显示。</p>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul><br>
</div>
导航栏
导航栏一般放在页面的顶部。
我们可以使用 .navbar 类来创建一个标准的导航栏，后面紧跟: .navbar-expand-xxl|xl|lg|md|sm 类来创建响应式的导航栏 (大屏幕水平铺开，小屏幕垂直堆叠)。
导航栏上的选项可以使用
- 元素并添加 class=“navbar-nav” 类。 然后在
- 元素上添加 .nav-item 类， 元素上使用 .nav-link 类:
<!-- 小屏幕上水平导航栏会切换为垂直的 -->
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
垂直导航栏
通过删除 .navbar-expand-xxl|xl|lg|md|sm 类来创建垂直导航栏:
<!-- 垂直导航栏 -->
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
居中对齐的导航栏
通过添加 .justify-content-center 类来创建居中对齐的导航栏:
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
.navbar-brand 类用于高亮显示品牌/Logo:
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand/logo -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
我们使用 .fixed-top 类来实现导航栏的固定：
.fixed-bottom 类用于设置导航栏固定在底部：
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
</nav>
导航栏的表单与按钮
导航栏的表单 元素使用 class=“form-inline” 类来排版输入框与按钮：
.input-group-addon 类用于在输入框前添加小标签。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline">
<input class="form-control " type="text" placeholder="Search">
<button class="btn btn-success" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<form class="form-inline" action="/action_page.php">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Username">
</div>
</form>
</nav>
导航栏文本
使用 .navbar-text 类来设置导航栏上非链接文本，可以保证水平对齐，颜色与内边距一样。
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
</ul>
<!-- Navbar text-->
<span class="navbar-text">
Navbar text
</span>
</nav>
轮播图
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel" >
<!-- Indicators/dots -->
<div class="carousel-indicators" style="background-color: red">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- The slideshow/carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/1客厅.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>第一张图片描述标题</h3>
<p>第一张图片描述内容显示在这里！！！</p>
</div>
</div>
<div class="carousel-item">
<img src="img/2阳台.JPG" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>第二张图片描述标题</h3>
<p>第二张图片描述内容显示在这里！！！</p>
</div>
</div>
<div class="carousel-item">
<img src="img/3书房.jpg" class="d-block" style="width:100%">
<div class="carousel-caption">
<h3>第三张图片描述标题</h3>
<p>第三张图片描述内容显示在这里！！！</p>
</div>
</div>
</div>
<!-- Left and right controls/icons -->
<button class="carousel-control-prev " type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
模态框
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。
使用 .fade 类可以设置模态框弹出或关闭的效果
我们可以通过添加 .modal-sm 类来创建一个小模态框，.modal-lg 类可以创建一个大模态框,modal-xl类超大模态框。
使用 .modal-fullscreen 类可以让模态框全屏幕显示:
使用 .modal-fullscreen-*-* 类可以控制在什么尺寸下全屏幕显示:
尺寸类放在 **
**元素的
.modal-dialog 类后 :
使用 .modal-dialog-centered 类可以设置模态框水平和垂直方向都居中显示:
如果我们只想在模态框里头设置一个滚动条，可以使用 .modal-dialog-scrollable 类：
<div class="container mt-3">
<h3>模态框实例</h3>
<p>点击按钮打开模态框</p>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开模态框
</button>
</div>
<!-- 模态框 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-sm modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<!-- 模态框头部 -->
<div class="modal-header">
<h4 class="modal-title">模态框标题</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- 模态框内容 -->
<div class="modal-body">
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
模态框内容..<br />
</div>
<!-- 模态框底部 -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
提示框
提示框是一个小小的弹窗，在鼠标移动到元素上显示，鼠标移到元素外就消失。
通过向元素添加 data-bs-toggle=“tooltip” 来来创建提示框。
title 属性的内容为提示框显示的内容：
默认情况下提示框显示在元素上方。
可以使用 data-bs-placement 属性来设定提示框显示的方向: top, bottom, left 或 right:
<div class="container mt-3">
<h3>提示框显示位置实例</h3>
<p>可以使用 data-bs-placement 属性来设定提示框显示的方向:</p>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="top" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="left" title="我是提示内容!">鼠标移动到我这</a>
<a href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="我是提示内容!">鼠标移动到我这</a>
</div>
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Bootstrap5 弹出框
弹出框控件类似于提示框，它在鼠标点击到元素后显示，与提示框不同的是它可以显示更多的内容。
通过向元素添加 data-bs-toggle=“popover” 来来创建弹出框。
title 属性的内容为弹出框的标题，data-bs-content 属性显示了弹出框的文本内容：
默认情况下弹出框显示在元素右侧。
可以使用 data-bs-placement 属性来设定弹出框显示的方向: top, bottom, left 或 right:
默认情况下，弹出框在再次点击指定元素后就会关闭，你可以使用 data-bs-trigger=“focus” 属性来设置在鼠标点击元素外部区域来关闭弹出框：
如果你想实现在鼠标移动到元素上显示，移除后消失的效果，可以使用 data-bs-trigger 属性，并设置值为 “hover”:
<div class="container mt-3">
<h3>弹出框实例</h3>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="一些内容">鼠标移动到我这</a>
</div>
<a href="#" title="标题" data-bs-trigger="focus" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="我是内容部分">点我</a>
<a href="#" title="标题" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="我是内容部分">点我</a>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
消息弹窗
Bootstrap5 弹窗 (Toasts) 是一种轻量级的通知组件，用于在页面的角落或底部显示临时性的信息、通知或警告。
弹窗通常用于向用户显示短期消息，比如成功消息、错误消息、警告或其他通知。
弹窗可以在页面的不同位置显示，包括左上角、右上角、左下角、右下角以及页面底部中央。使用 top-0 start-0 bottom-0 end-0 设置
如何创建弹窗
要创建弹窗可以使用 .toast 类，并在该类里添加 .toast-header 和 .toast-body 类来表示标题和内容。
**注意：**弹窗默认是关闭的，可以使用 .show 来设置显示，关闭弹窗可以在 元素上添加 data-bs-dismiss=“toast”:
<div class="container mt-5">
<button class="btn btn-primary" onclick="showToast()">显示弹窗</button>
</div>
<div class="position-fixed bottom-0 end-0 p-3">
<div id="toast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">弹窗标题</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
这是一个Bootstrap 5弹窗示例。
</div>
</div>
</div>
<script>
function showToast() {
var toast = new bootstrap.Toast(document.getElementById('toast'));
toast.show();
}
</script>
滚动监听
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。
向您想要监听的元素（通常是 body）添加 data-bs-spy=“scroll” 。
然后添加 data-bs-target 属性，它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。
注意可滚动项元素上的 id （
可选项data-bs-offset 属性用于计算滚动位置时，距离顶部的偏移像素。 默认为 10 px。
<body data-bs-spy="scroll" data-bs-target=".navbar" data-bs-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<div class="container-fluid">
<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>
</ul>
</div>
</nav>
<div id="section1" class="container-fluid bg-success text-white" style="padding:100px 20px;">
<h1>Section 1</h1>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding:100px 20px;">
<h1>Section 2</h1>
</div>
<div id="section3" class="container-fluid bg-secondary text-white" style="padding:100px 20px;">
<h1>Section 3</h1>
</div>
</body>
侧边栏导航
Bootstrap5 侧边栏侧边栏类似于模态框，在移动端设备中比较常用。
创建滑动导航
我们可以通过 JavaScript 来设置是否在 .offcanvas 类后面添加 .show 类，从而控制侧边栏的显示与隐藏：
.offcanvas隐藏内容 (默认).offcanvas.show显示内容
可以使用 a 链接的 href 属性或者 button 元素使用 data-bs-target 属性来设置侧边栏。这两种情况都需要使用 data-bs-toggle="offcanvas"。
可以通过以下四个类来控制侧边栏的方向：
.offcanvas-start显示在左侧，如上实例。.offcanvas-end显示在右侧.offcanvas-top显示在顶部.offcanvas-bottom显示在底部
我们可以在弹出侧边栏的时候设置 <body> 元素是否可以滚动，也可以设置是否显示一个背景画布。 使用 data-bs-scroll 属性来设置 <body> 元素是否可滚动，data-bs-backdrop 来切换是否显示背景画布。
<body data-bs-scroll="true" data-bs-backdrop="false">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
使用链接的 href 属性
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
按钮中使用 data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">侧边栏</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">右侧侧边栏</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">显示在右侧侧边栏</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
Flex（弹性）布局
Bootstrap5 通过 flex 类来控制页面的布局。
使用 d-flex 类创建一个弹性盒子容器，并设置三个弹性子元素
创建显示在同一行上的弹性盒子容器可以使用 d-inline-flex 类
<div class="d-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-inline-flex p-3 bg-secondary text-white">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
水平方向
.flex-row 可以设置弹性子元素水平显示，这是默认的。
使用 .flex-row-reverse 类用于设置右对齐显示，即与 .flex-row 方向相反。
<div class="d-flex flex-row bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
垂直方向
.flex-column 类用于设置弹性子元素垂直方向显示, .flex-column-reverse 用于翻转子元素：
<div class="d-flex flex-column">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
内容排列
.justify-content-* 类用于修改弹性子元素的排列方式，***** 号允许的值有：start (默认), end, center, between 或 around:
<div class="container mt-3">
<h2>Justify content</h2>
<p>.justify-content-* 类用于修改弹性子元素的排列方式，* 号允许的值有：start (默认), end, center, between 或 around:</p>
<div class="d-flex justify-content-start bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-end bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-center bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-between bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex justify-content-around bg-secondary mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
等宽
.flex-fill 类强制设置各个弹性子元素的宽度是一样的:
<div class="container mt-3">
<h2>等宽</h2>
<p>.flex-fill 用于设置子元素等宽：</p>
<div class="d-flex">
<div class="p-2 bg-info flex-fill">Flex item 1</div>
<div class="p-2 bg-warning flex-fill">Flex item 2</div>
<div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>
</div>
扩展
.flex-grow-1 用于设置子元素使用剩下的空间。以下实例中前面两个子元素只设置了它们所需要的空间，最后一个获取剩余空间。 :
<div class="container mt-3">
<h2>扩展</h2>
<p>.flex-grow-1 用于设置子元素使用剩下的空间：</p>
<div class="d-flex mb-3">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 flex-grow-1 bg-primary">Flex item 3</div>
</div>
<p>不使用 .flex-grow-1 实例:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
</div>
排序
.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高( .order-1 排在 .order-2 之前) :
<div class="container mt-3">
<h2>排序</h2>
<p>.order 类可以设置弹性子元素的排序，从 .order-1 到 .order-12，数字越低权重越高:</p>
<div class="d-flex mb-3">
<div class="p-2 order-2 bg-info">Flex item 1</div>
<div class="p-2 order-3 bg-warning">Flex item 2</div>
<div class="p-2 order-1 bg-primary">Flex item 3</div>
</div>
</div>
外边距
.ms-auto 类可以设置子元素右外边距为 auto，即 margin-right: auto
，.me-auto 类可以设置子元素左外边距为 auto，即 margin-left: auto
<div class="container mt-3">
<h2>外边距</h2>
<p>.ms-auto 类可以设置子元素右外边距为 auto，.me-auto 类可以设置子元素左外边距为 auto:</p>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 ms-auto bg-info">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 bg-primary">Flex item 3</div>
</div>
<div class="d-flex mb-3 bg-secondary">
<div class="p-2 bg-info me-auto">Flex item 1</div>
<div class="p-2 bg-warning">Flex item 2</div>
<div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>
</div>
包裹
弹性容器中包裹子元素可以使用以下三个类： .flex-nowrap (单行), .flex-wrap (多行)或 .flex-wrap-reverse(多行倒序)。设置 flex 容器是单行或者多行。
<div class="container mt-3">
<h2>包裹</h2>
<p>弹性容器中包裹弹性子元素可以使用以下三个类： .flex-nowrap (默认), .flex-wrap 或 .flex-wrap-reverse:</p>
<p><code>.flex-wrap:</code></p>
<div class="d-flex flex-wrap 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-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>
内容对齐
我们可以使用 .align-content-* 来控制在垂直方向上如何去堆叠子元素，包含的值有：.align-content-start (默认), .align-content-end, .align-content-center, .align-content-between, .align-content-around 和 .align-content-stretch。
这些类在只有一行的弹性子元素中是无效的。
<div class="container mt-3">
<h2>内容对齐</h2>
<p>我们可以使用 .align-content-* 来控制子元素在垂直方向的对齐方式。</p>
<p><strong>注意:</strong> 这个实例在小型设备上效果不好。这些类在只有一行的弹性子元素中是无效的。</p>
<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>
<br>
</div>
子元素对齐
如果要设置单行的子元素对齐可以使用 .align-items-* 类来控制，包含的值有：.align-items-start, .align-items-end, .align-items-center, .align-items-baseline, 和 .align-items-stretch (默认)。
<div class="container mt-3">
<h2>子元素对齐</h2>
<p>如果要设置单行的子元素对齐可以使用 .align-content-* 类来控制。</p>
<p>.align-items-start:</p>
<div class="d-flex align-items-start bg-light" style="height:150px">
<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>
<br>
<p>.align-items-end:</p>
<div class="d-flex align-items-end bg-light" style="height:150px">
<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>
<br>
<p>.align-items-center:</p>
<div class="d-flex align-items-center bg-light" style="height:150px">
<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>
<br>
<p>.align-items-baseline:</p>
<div class="d-flex align-items-baseline bg-light" style="height:150px">
<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>
<br>
<p>.align-items-stretch (默认):</p>
<div class="d-flex align-items-stretch bg-light" style="height:150px">
<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>
<br>
</div>
指定子元素对齐
如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制，包含的值有：.align-self-start, .align-self-end, .align-self-center, .align-self-baseline, 和 .align-self-stretch (默认)。
<div class="container mt-3">
<h2>Align Self</h2>
<p>如果要设置指定子元素对齐对齐可以使用 .align-self-* 类来控制。</p>
<p>.align-self-start:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-start">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-end:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-end">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-center:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-center">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-baseline:</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-baseline">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
<p>.align-self-stretch (默认):</p>
<div class="d-flex bg-light" style="height:150px">
<div class="p-2 border">Flex item 1</div>
<div class="p-2 border align-self-stretch">Flex item 2</div>
<div class="p-2 border">Flex item 3</div>
</div>
<br>
</div>
表单
表单布局
- 堆叠表单 (全屏宽度)：垂直方向
- 内联表单：水平方向
堆叠表单
以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：
.form-label 类来确保标签元素有一定的内边距。
复选框（checkboxe）使用不同的标记。 它们使用 .form-check 包裹在容器元素周围。复选框和单选按钮使用 .form-check-input，它的标签可以使用 .form-check-label 类
<div class="container mt-3">
<h2>堆叠表单</h2>
<form action="">
<div class="mb-3 mt-3">
<label for="email" class="form-label">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
内联表单
如果您希望表单元素并排显示，请使用 .row 和 .col：
以下实例的两个输入框并排显示，创建内联表单：
<div class="container mt-3">
<h2>内联表单</h2>
<p>如果您希望表单元素并排显示，请使用 .row 和 .col：</p>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="Enter email" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="Enter password" name="pswd">
</div>
</div>
</form>
</div>
文本框
使用 textarea 标签创建文本框提交表单，使用 .form-control 类渲染文本框 textareas 标签:
<div class="container mt-3">
<h2>文本框</h2>
<p>使用 .form-control 类渲染文本框 textareas 标签:</p>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="comment">请输入评论：</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
输入框大小
我们可以通过在 .form-control 输入框中使用 .form-control-lg 或 .form-control-sm 类来设置输入框的大小:
<div class="container mt-3">
<h2>输入框大小</h2>
<p>我们可以通过在 .form-control 输入框中使用 .form-control-lg 或 .form-control-sm 类来设置输入框的大小:</p>
<form>
<input type="text" class="form-control form-control-lg" placeholder="大号输入框">
<input type="text" class="form-control mt-3" placeholder="正常大小输入框">
<input type="text" class="form-control form-control-sm mt-3" placeholder="小号输入框">
</form>
</div>
输入框组
我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。
.input-group-text 类来设置文本的样式。。
使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框：
<div class="container mt-3">
<h2>输入框组</h2>
<p>我们可以使用 .input-group 类来向表单输入框中添加更多的样式，如图标、文本或者按钮。</p>
<p>.input-group-text 类来设置文本的样式。</p>
<p>使用 .input-group-sm 类来设置小的输入框， .input-group-lg 类设置大的输入框</p>
<form>
<div class="input-group mb-3 .input-group-sm">
<span class="input-group-text">@</span>
<span class="input-group-text">One</span>
<span class="input-group-text">Two</span>
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="input-group .input-group-lg">
<input type="text" class="form-control" placeholder="Your Email">
<input type="text" class="form-control" placeholder="Your Email">
<span class="input-group-text">@runoob.com</span>
</div>
</form>
</div>
禁用/只读表单
使用 disabled/readonly 属性设置输入框禁用/只读：
<div class="container mt-3">
<h2>禁用/只读表单</h2>
<p>使用 disabled/readonly 属性设置输入框禁用/只读：</p>
<form>
<input type="text" class="form-control" placeholder="Normal input">
<input type="text" class="form-control mt-3" placeholder="Disabled input" disabled>
<input type="text" class="form-control mt-3" placeholder="Readonly input" readonly>
</form>
</div>
取色器
使用 .form-control-color 类可以创建一个取色器
<div class="container mt-3">
<h2>取色器</h2>
<p>使用 .form-control-color 类可以创建一个取色器：</p>
<form>
<input type="color" class="form-control form-control-color" value="#CCCCCC">
</form>
</div>
表单中的下拉菜单
下拉菜单可以是单选下拉菜单，也可以是多选的下拉菜单。
在 Bootstrap5 中下拉菜单 < select > 元素可以使用 .form-select 类来渲染 :
下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：
disabled 属性可以禁止下拉菜单被选择
<div class="container mt-3">
<h2>下拉菜单</h2>
<p>在 Bootstrap5 中下拉菜单 select 元素可以使用 .form-select 类来渲染 :</p>
<p>下拉菜单通过 **.form-select-lg** 或 **.form-select-sm** 类来修改大小：</p>
<form action="">
<label for="sel1" class="form-label form-select-sm">单选下拉菜单：</label>
<select class="form-select" id="sel1" name="sellist1" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2" class="form-label">多选下拉菜单：</label>
<select multiple class="form-select form-select-lg" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
数据列表
Bootstrap 也可以通过 datalist 标签为 元素设置下拉菜单：
以下实例从列表中选择一个网站：
<div class="container mt-3">
<h2>数据列表</h2>
<form action="/action_page.php">
<label for="browser" class="form-label">选择你喜欢的网站：</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
<option value="Google">
<option value="Runoob">
<option value="Taobao">
<option value="Wiki">
<option value="Zhihu">
</datalist>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
复选框与单选框
如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框：
单选框
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>男
<label class="form-check-label" for="radio1"></label></br>
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">女
<label class="form-check-label" for="radio2"></label></br>
<input type="radio" class="form-check-input" disabled>不让你选
<label class="form-check-label"></label>
</div>
checked 属性用于设置默认选中的选项。
disabled设置不让选择
复选框
<div class="container mt-3">
<h2>复选框</h2>
<p>.form-check-label 类添加到标签元素，.form-check 容器内添加 .form-check-input 类来设置复选框的样式。</p>
<p>以下三个复选框，第一个默认选中，最后一个禁止选择：</p>
<form action="/action_page.php">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
选择区间
要设置一个选择区间可以在 input 元素中添加 type=“range” 并使用 .form-range 类：
默认情况下，步长为 1，可以通过 step 属性来设置：
默认情况下，最小值为 0，最大值为 100，可以通过 min（最小） 或 max（最大） 属性来设置：
<div class="container mt-3">
<h2>选择区间最大最小值</h2>
<p>默认情况下，最小值为 0，最大值为 100，可以通过 min（最小） 或 max（最大） 属性来设置：</p>
<p>要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：
默认情况下，步长为 1，可以通过 step 属性来设置：</p>
<form action="/">
<label class="form-label">自定义步长</label>
<input type="range" class="form-range" min="0" max="10" step="1">
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
ct 元素可以使用 .form-select 类来渲染 :
下拉菜单通过 .form-select-lg 或 .form-select-sm 类来修改大小：
1
2
3
4
<label for="sel2" class="form-label">多选下拉菜单：</label>
<select multiple class="form-select form-select-lg" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
[外链图片转存中…(img-NyKN3Eno-1739969760185)]
数据列表
Bootstrap 也可以通过 datalist 标签为 元素设置下拉菜单：
以下实例从列表中选择一个网站：
<div class="container mt-3">
<h2>数据列表</h2>
<form action="/action_page.php">
<label for="browser" class="form-label">选择你喜欢的网站：</label>
<input class="form-control" list="sites" name="site" id="site">
<datalist id="sites">
<option value="Google">
<option value="Runoob">
<option value="Taobao">
<option value="Wiki">
<option value="Zhihu">
</datalist>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
[外链图片转存中…(img-SylRTb7M-1739969760185)]
复选框与单选框
如果您希望用户从预设选项列表中选择任意数量的选项，可以使用复选框：
单选框
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>男
<label class="form-check-label" for="radio1"></label></br>
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">女
<label class="form-check-label" for="radio2"></label></br>
<input type="radio" class="form-check-input" disabled>不让你选
<label class="form-check-label"></label>
</div>
[外链图片转存中…(img-Lvm4rpe5-1739969760185)]
checked 属性用于设置默认选中的选项。
disabled设置不让选择
复选框
<div class="container mt-3">
<h2>复选框</h2>
<p>.form-check-label 类添加到标签元素，.form-check 容器内添加 .form-check-input 类来设置复选框的样式。</p>
<p>以下三个复选框，第一个默认选中，最后一个禁止选择：</p>
<form action="/action_page.php">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
<label class="form-check-label" for="check1">Option 1</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
<label class="form-check-label" for="check2">Option 2</label>
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" disabled>
<label class="form-check-label">Option 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
选择区间
要设置一个选择区间可以在 input 元素中添加 type=“range” 并使用 .form-range 类：
默认情况下，步长为 1，可以通过 step 属性来设置：
默认情况下，最小值为 0，最大值为 100，可以通过 min（最小） 或 max（最大） 属性来设置：
<div class="container mt-3">
<h2>选择区间最大最小值</h2>
<p>默认情况下，最小值为 0，最大值为 100，可以通过 min（最小） 或 max（最大） 属性来设置：</p>
<p>要设置一个选择区间可以在 input 元素中添加 type="range" 并使用 .form-range 类：
默认情况下，步长为 1，可以通过 step 属性来设置：</p>
<form action="/">
<label class="form-label">自定义步长</label>
<input type="range" class="form-range" min="0" max="10" step="1">
<button type="submit" class="btn btn-primary mt-3">Submit</button>
</form>
</div>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
