Bootstrap5 学习笔记（一）
中文官网
什么是 Bootstrap?
- Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是前端开发中比较受欢迎的框架，简洁且灵活。
- 它基于 HTML、CSS 和 JavaScript，HTML 定义页面元素，CSS 定义页面布局，而 JavaScript 负责页面元素的响应。
- Bootstrap 将 HTML 、CSS 和 JavaScript 封装成一个个功能组件，用起来简洁灵活，使得 Web 开发更加快捷。
- Bootstrap5 目前是 Bootstrap 的最新版本，利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建这个 app。
- 浏览器兼容性： Bootstrap5 兼容所有主流浏览器（Chrome、FireFox、Edge、Safari 和 Opera）。如果您需要支持 IE11 及以下版本，请使用 Bootstrap4 或 Bootstrap3.
Bootstrap 安装、使用
安装
- 第一种方法：
- 官网下载 Bootstrap5 资源库
- 第二种方法：
- 使用 CDN
- BootCDN 官网
使用
- 在网页
head之间，引用bootstrap.min.css样式文件 - 在网页
body之前，引用bootstrap.bundle.min.js文件 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
容器
- 容器是 Bootstrap 一个基本的构建块，它包含、填充和对齐给定设备或视口中的内容。
- Bootstrap 需要一个容器元素来包裹网站的内容
.container：类用于固定宽度并支持响应式布局的容器。.container-fluid：类用于 100% 宽度，占据全部视口（viewport）的容器。
注意：宽度（max-width）会根据屏幕宽度同比例放大或缩小。
| 超级小屏幕 <576px | 小屏幕 ≥576px | 中等屏幕 ≥768px | 大屏幕 ≥992px | 特大屏幕 ≥1200px | 超级大屏幕 ≥1400px | |
|---|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xxl | 100% | 100% | 100% | 100% | 100% | 1320px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% | 100% |
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container" style="background-color: palegreen;height:100px;"></div>
<div class="container-fluid" style="background-color: rgb(193, 216, 193);height:100px;"></div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
网格系统
- Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多 12 列。
- Bootstrap5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。请确保每一行中列的总和等于或小于 12。
- Bootstrap5 网格系统有以下 6 个类：
.col -移动设备小于 576px.col - sm -平板 - 屏幕宽度等于或大于 576px.col - md -桌面显示器 - 屏幕宽度等于或大于 768px.col - lg -大桌面显示器 - 屏幕宽度等于或大于 992px.col - xl -特大桌面显示器 - 屏幕宽度等于或大于 1200px.col - xxl -超大桌面显示器 - 屏幕宽度等于或大于 1400px- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-4" style="background-color: rgb(195, 209, 209);height:200px;"></div>
<div class="col-4" style="background-color: rgb(6, 110, 110);height:200px;"></div>
<div class="col-4" style="background-color: rgb(26, 41, 41);height:200px;"></div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
网格系统规则
- Bootstrap5 网格系统规则：
- 网格每一行需要放在设置了
.container或.container-fluid类的容器中，这样就可以自动设置一些外边距与内边距 - 使用行来创建水平的列组
- 内容需要放置在列中，并且只有列可以是行的直接子节点
- 预定义的类如
.row和.col-sm-4可用于快速制作网格布局
- 网格每一行需要放在设置了
嵌套列
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: #f7f7f7;">
<div class="col-md-9">
<div class="row">
<div class="col-md-6" style="background-color: rgb(66, 148, 148);height:200px;"></div>
<div class="col-md-6" style="background-color: rgb(209, 223, 223);height:200px;"></div>
</div>
<div class="row" style="background-color: #8b3636;height:200px;">
<div class="col-md-3" style="background-color: rgb(26, 31, 31);height:200px;"></div>
<div class="col-md-6" style="background-color: rgb(0, 19, 19);height:200px;"></div>
</div>
</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
列偏移
- 通过
offset-*来实现列偏移 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
<!-- 列偏移 -->
<div class="row">
<div class="col-md-4" style="background-color: rgb(6, 110, 110);height:200px;"></div>
<div class="col-md-4 offset-md-3" style="background-color: rgb(195, 209, 209);height:200px;"></div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
列顺序
- 通过
.order-来实现列顺序，默认排序是高于order-排序 order-first：排第一（排序优先高于数字和默认排序）order-last：排最后（排序优先高于数字和默认排序）- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- 列顺序 -->
<div class="row">
<div class="col-md-4" style="height:200px;background-color: aquamarine;">1</div> <!-- 因为没有设置顺序 所以排行内 第一-->
<div class="col-md-4 order-3" style="height:200px;background-color: rgb(188, 194, 192);">2</div> <!-- 因为顺序设置3 所以排行内 第三-->
<div class="col-md-4 order-2" style="height:200px;background-color: rgb(160, 21, 190);">3</div> <!-- 因为顺序设置 所以排行内 第二-->
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
排版
- Bootstrap5 默认的 font-size 为
16px, line-height 为 1.5。默认的 == font-family== 为“Helvetica Neue”,Helvetica,Arial,sans-serif。此外，所有的 p 元素 margin-top:0 、margin-bottom:1rem(16px)。
H1 - H6 、 P 标签
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p class="h1">h1</p>
<p class="h2">h2</p>
<p class="h3">h3</p>
<p class="h4">h4</p>
<p class="h5">h5</p>
<p class="h6">h6</p>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
Display 标题类
- Bootstrap5 还提供了使标题更突出的类，当我们需要标题突出时可以使用这些标题类。突出标题以更大的字体显示，并且会对其进行加粗。
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="display-1">Display-1</div>
<div class="display-2">Display-2</div>
<div class="display-3">Display-3</div>
<div class="display-4">Display-4</div>
<h1>h1</h1>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
突出显示段落
- 还可以通过在段落上添加类
.lead来突出段落 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<p>我是普通段落</p>
<p class="lead">我是 lead 突出段落</p>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
自定义标题
- 可以使用带有类
.text-mutedclass的标签来显示更小且颜色更浅的文本。 - Bootstrap5 中 HTML
small元素用于创建字号更小的颜色更浅的文本。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<p>我是正常文本</p>
<p class="small">我是浅色文本</p>
<small class="text-muted">我是更小且更浅色的文本</small>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
文本对齐
- 可以使用文本对齐类轻松地将文本左对齐、右对齐和居中对齐。
- 左对齐：
.text-start - 居中对齐：
.text-center - 右对齐：
.text-end
- 左对齐：
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<p class="text-start">左对齐</p>
<p class="text-center">居中对齐</p>
<p class="text-end">右对齐</p>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 还可以使用响应式文本对齐类根据屏幕大小对齐文本：
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<p class="text-sm-center">文本将在屏幕宽度等于或大于 576px 视口及以上居中对齐</p>
<p class="text-md-center">文本将在屏幕宽度等于或大于 768px 视口及以上居中对齐</p>
<p class="text-lg-center">文本将在屏幕宽度等于或大于 992px 视口及以上居中对齐</p>
<p class="text-xl-center">文本将在屏幕宽度等于或大于 1200px 视口及以上居中对齐</p>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
文本转换
- 可以将文本转换为小写、大写、设定单词首字母大写
.text-lowercase：设定文本小写.text-uppercase：设定文本大写.text-capitalize：设定单词首字母大写
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<p class="text-lowercase">Bootstrap</p>
<p class="text-uppercase">Bootstrap</p>
<p class="text-capitalize">bootstrap</p>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
截断长文本
- 对于较长的文本，可以使用类
.text-truncate用省略号截断文本。在一行中显示一段文本但没有足够的可用空间时，它特别有用。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-sm-2 text-truncate">
中秋国庆双节假期已经正式开启，全国各地装扮一新，一片喜气祥和。
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
文本换行和溢出
- 通过
.text-wrap可以设置文字在超过盒子宽度时自动换行（默认换行） - 通过
.text-nowrap可以阻止文字的换行，此时文字会溢出盒子 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="row">
<div class="col-sm-2 text-nowrap" style="border:1px red solid;">
中秋国庆双节假期已经正式开启，全国各地装扮一新，一片喜气祥和。
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
文本大小
- Bootstrap5 默认字体初始大小为 16px
- 在 Bootstrap5 中将文本大小分为了 6 类，分别对应标题的 h1 ~ h6
- 添加类名
.fs-*或 添加类名h*（*号为1~6的数值） - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="row">
<p class="fs-1">fs-1</p>
<p class="fs-2">fs-2</p>
<p class="fs-3">fs-3</p>
<p class="fs-4">fs-4</p>
<p class="fs-5">fs-5</p>
<p class="fs-6">fs-6</p>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
###字体粗细及斜体
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="row">
<p class="fw-bold">粗体文字</p>
<p class="fw-bolder">粗体文本（相对于父元素）</p>
<p class="fw-normal">正常的文本，不加粗</p>
<p class="fw-light">细体文本</p>
<p class="fw-lighter">细体文本（相对于父元素）</p>
<p class="fst-italic">斜体</p>
<p class="fst-normal">取消斜体</p>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
行高
- 在 Bootstrap5 中将行高分为了 4 种
.lh-1(1rem)、.lh-sm(1.25rem)、.lh-base(1.5rem)、.lh-lg(2rem) - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="row">
<p class="lh-1">lh-1</p>
<p class="lh-sm">lh-sm</p>
<p class="lh-base">lh-base</p>
<p class="lh-lg">lh-lg</p>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
内联文本元素
- 示例代码如下：
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
颜色类
- Bootstrap5 提供了一些有代表意义的颜色类
文本颜色
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: pink;">
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本 蓝色</p>
<p class="text-success">执行成功的文本 绿色</p>
<P class="text-info">代表一些提示信息的文本</P>
<P class="text-warning">警告文本</P>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色文字</p>
<p class="text-body">默认颜色，为黑色</p>
<p class="text-light">浅灰色文本（白色背景上看不清楚）</p>
<p class="text-white">白色文本（白色背景上看不清楚）</p>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
背景颜色类
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row" style="background-color: pink;">
<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-white">浅灰背景颜色（白色背景下看不清楚）</p>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
列表组
- Bootstrap5 中可以创建三种不同类型的 HTML 列表：
无序列表：顺序无关紧要的项目列表。例如：ul>li有序列表：顺序确实很重要的项目列表。有序列表中的列表项用数字标记。例如：ol>li定义列表：术语列表及其相关描述。例如：dl>li
无样式的有序列表和无序列表
- 需要从列表项中删除默认样式，可以通过简单地将类
.list-unstyled应用到相应的 ul 或 ol 元素来做到这一点。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-unstyled">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
内联列表
- 如果要使用有序列表或无序列表创建水平菜单，则需要将所有类表项放在一行中（即并排）。可以通过将类
.list-inline添加到 ul 或 ol 并将类.list-inline-item添加到子 li 元素来完成次操作。 - 添加
.list-inline属性变为内联列表，简单点说就是把垂直方向的列表变为水平方向。内联列表一般用作菜单（导航）样式。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">标题一</a>
</li>
<li class="list-inline-item">
<a href="#">标题二</a>
</li>
<li class="list-inline-item">
<a href="#">标题三</a>
</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
列表组
- 列表组是非常有用切灵活的组件，用于以漂亮的方式显示元素列表。在最基本的形式中，列表组只是一个带有
.list-group类的无序列表，且列表中的元素带有.list-group-item类。 基础的列表组- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
设置禁用和活动项- 可以将类
.active添加到.list-group-item类的后面用来指示当前项目元素是活动的。同样，可以将.disabled添加到.list-group-item后面，从而使其看起来是禁用状态。 - 示例代码如下：
- 可以将类
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">第一项</li>
<li class="list-group-item active">第二项</li>
<li class="list-group-item disabled">第三项</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
链接项的列表组- 创建一个链接的列表组，可以将 li 替换 a 。如果想鼠标悬停显示灰色背景可以添加
.list-group-item-active类。 - 示例代码如下：
- 创建一个链接的列表组，可以将 li 替换 a 。如果想鼠标悬停显示灰色背景可以添加
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<a href="#" class="list-group-item list-group-item-active">第一项</a>
<a href="#" class="list-group-item list-group-item-active">第二项</a>
<a href="#" class="list-group-item list-group-item-active">第三项</a>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
移除列表边框
- 使用
.list-group-flush类添加到 list-group 元素上，用以移除外边框和圆角，从而创建与其父容器边对边的列表组 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group list-group-flush">
<a href="#" class="list-group-item list-group-item-active">第一项</a>
<a href="#" class="list-group-item list-group-item-active">第二项</a>
<a href="#" class="list-group-item list-group-item-active">第三项</a>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
水平列表组
.list-group-horizontal类添加到.list-group，可以将列表项水平显示而不是垂直显示（并排而不是堆叠）- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group list-group-horizontal">
<a href="#" class="list-group-item list-group-item-active">第一项</a>
<a href="#" class="list-group-item list-group-item-active">第二项</a>
<a href="#" class="list-group-item list-group-item-active">第三项</a>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
创建编号列表组
- 可以通过简单地在
.list-group元素上添加类.list-group-numbered来创建带有元素编号的列表组 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group list-group-numbered">
<a href="#" class="list-group-item list-group-item-active">第一项</a>
<a href="#" class="list-group-item list-group-item-active">第二项</a>
<a href="#" class="list-group-item list-group-item-active">第三项</a>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
带徽章的列表组
- 带徽章的列表组其实就是将 Bootstrap 框架中的徽章组件和基础类表组件结合在一起的一个效果，只需在
.list-group-item的基础上追加违章组件“badge” - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group list-group-numbered">
<a href="#" class="list-group-item list-group-item-active">
第一项
<small class="bg-primary badge">12</small>
</a>
<a href="#" class="list-group-item list-group-item-active">第二项</a>
<a href="#" class="list-group-item list-group-item-active">第三项</a>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
多种颜色列表项
- 和大多数其他组件一样，可以在列表组项目上使用相应的类来对它们进行额外的背景色设置，来对它们施加额外的强调。
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item list-group-item-success">list-group-item-success</li>
<li class="list-group-item list-group-item-secondary">list-group-item-secondary</li>
<li class="list-group-item list-group-item-info">list-group-item-info</li>
<li class="list-group-item list-group-item-warning">list-group-item-warning</li>
<li class="list-group-item list-group-item-danger">list-group-item-danger</li>
<li class="list-group-item list-group-item-primary">list-group-item-primary</li>
<li class="list-group-item list-group-item-danger">list-group-item-danger</li>
<li class="list-group-item list-group-item-light">list-group-item-light</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
向列表组添加自定义内容
- bootstrap 框架在链接列表组的基础上增加了两个样式：
.list-group-item-heading：用来定义列表项头部样式.list-group-item-text：用来定义列表项主要内容- 这两个样式最大的作用就是用来帮组开发者可以自定义列表项里的内容
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item active">
<h4 class="list-group-heading">list-group-item-success</h4>
</li>
<li class="list-group-item">
<h4 class="list-group-item-text">list-group-item-secondary</h4>
<p class="list-group-item-text">自定义内容</p>
</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-danger</li>
<li class="list-group-item">list-group-item-light</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
带复选框列表组
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./bootstrap5/bootstrap.min.css">
<link rel="stylesheet" href="./bootstrap5/bootstrap-icons.css">
<style>
.selector-for-some-widget {
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
<script src="./bootstrap5/bootstrap.bundle.min.js"></script>
</body>
</html>
徽章
- 徽章一般用于在网页上表明一些有价值的信息，例如重要的标题、警告信息、通知计数器等
创建徽章
- 徽章（Badges）主要用于突出显示新的或未读的项。如果使用违章，只需要将
.badge类加上带有指定意义的颜色类（如：.bg-secondary）添加到 span 元素上即可。徽章可以根据父元素的大小的变化而变化 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<h4 class="badge bg-warning">hot</h4>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
徽章的颜色
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<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>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
胶囊徽章
- 使用
.rounded-pill类来设置药丸形状徽章（具有更多圆角的徽章） - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<span class="badge rounded-pill bg-primary">主要</span>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
元素内的徽章
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<ul class="list-group">
<li class="list-group-item">首页</li>
<a href="#" class="list-group-item list-group-item-active">
分类
<span class="badge bg-danger rounded-pill">5</span>
</a>
<li class="list-group-item">消息</li>
</ul>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
表格
- Bootstrap5 通过
.table类来设置基础表格的样式 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
表格的颜色
- 通过指定意义的颜色类名可以为表格的行或者单元格设置颜色。表格颜色类的说明：
| 类名 | 描述 |
|---|---|
| table-primary | 蓝色：指定这是一个重要的操作 |
| table-success | 绿色：指定这是一个允许执行的操作 |
| table-danger | 红色：指定这是可以危险的操作 |
| table-info | 浅蓝色：表示内容已变更 |
| table-warning | 橘色：表示需要注意的操作 |
| table-active | 灰色：用于鼠标悬停效果 |
| table-secondary | 灰色：表示内容不怎么重要 |
| table-light | 浅灰色：可以是表格行的背景 |
| table-dark | 深灰色：可以是表格行的背景 |
创建带条纹行的表格
- 通过添加
.table-striped类，可在 tbody 内的行上看到条纹，即在基础表格的代码上为标签 table添加.table-striped类 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
带边框表格
- 通过将类
.table-bordered添加到 .table 类创建的表格上，就可以在表格和单元格的所有边上添加边框 - 实例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
无边框表格
- 通过添加
.table-borderless类可以取消表格和单元格所有边的边框 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped table-borderless">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
鼠标悬停状态表格
- 通过添加
.table-hover类可以为表格的每一行添加鼠标悬停效果（灰色背景） - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered table-hover ">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
创建较小的表格
.table-sm类用于通过减少内边距来设置较小的表格，使表格更紧凑并节省空间- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-sm ">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
响应式表格
- 要使任何表格具有响应性，只需将 .table 元素包裹在
.table-responsive元素内，即可创建响应式表格。还可以使用类.table-responsive{-sm|-md|-lg|-xl}根据视口宽度指定表格何时应具有滚动条 注意：.table-responsive类是在 div 外包裹一个 div 实现- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="table-responsive-">
<table class="table">
<thead>
<tr>
<th>首页</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
<th>分类</th>
<th>首页</th>
<th>分类</th>
</tr>
</thead>
<tbody>
<tr>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
</tr>
<tr>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>12</td>
<td>32</td>
<td>32</td>
<td>12</td>
<td>32</td>
</tr>
</tbody>
</table>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
图片
圆角图片
.rounded类为图像添加圆角- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" class="rounded" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
原形
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" class="rounded-circle" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
缩略图
.img-thumbanil类用于设置图片缩略图（图片有边框）- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" class="img-thumbnail" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
对齐图片
- 使用
.float-start类将图像左浮动，或使用.float-end向右浮动 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" style="width:200px;height:200px;" class="float-start" alt="Bootstrap5">
<img src="./img/01.jpg" style="width:200px;height:200px;" class="float-end" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
图片居中
- 使用
.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐：注意，是两个一起使用 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" class="mx-auto d-block" style="width:200px;height:200px;" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
响应式图片
- 图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。
- 可以通过在 img 标签中添加
.img-fluid类来设置响应式图片。 - 此类主要将样式 max-width:100% 和 height:auto 应用于图像，以便它很好地缩放以适合包含元素。
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<img src="./img/01.jpg" class="img-fluid" alt="Bootstrap5">
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
按钮
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
按钮设置边框
- Bootstrap5 还提供了 8 个轮廓/边框按钮。鼠标移动到按钮上添加突出的效果
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
按钮的尺寸
- Bootstrap5 可以设置按钮的大小，使用
.btn-lg类设置大按钮，使用.btn-sm类设置小按钮 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary btn-lg">Primary</button>
<button type="button" class="btn btn-primary btn-sm">Primary</button>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
块级按钮
- 如需创建跨越父元素整个宽度的块级按钮，通过添加
.btn-block类可以设置块级按钮，.d-grig类设置在父级元素中 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="d-grid">
<button type="button" class="btn btn-primary btn-block">Primary</button>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
按钮组
- 创建一个按钮组，只需将一系列具有
.btn类的按钮包裹在 div 元素中，然后在其上应用.btn-group类。还可以在单个按钮上应用.active类以指示活动状态。
基本的按钮组
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">warning</button>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
按钮组的大小
- 以使用
.btn-group-lg|sm|xs类来设置按钮组的大小，可应用到整个按钮组的大小调整，而不需要对每个按钮进行大小调整。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">warning</button>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
垂直按钮组
- 可以使按钮组显示为垂直堆叠而不是水平堆叠。为此，只需将类
.btn-group替换为类.btn-group-vertival - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-warning">warning</button>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
加载器 （Loading）
- 使用 Bootstrap 读取图标以表示元件加载状态，这些读取图标完全使用 HTML、CSS。要创建 spinner 加载器，可以使用
.spinner-border类： - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="spinner-border"></div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 可以使用文本颜色类设置不同的颜色
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<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>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
闪烁的加载效果
- 使用
.spinner-grow类来设置闪烁的加载效果 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<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>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
设置加载效果大小
- 使用
.spinner-border-sm或.spinner-grow-sm类来创建加载效果的大小 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="spinner-border spinner-border-sm text-muted"></div>
<div class="spinner-border spinner-border-sm text-primary"></div>
<div class="spinner-border spinner-border-sm text-success"></div>
<div class="spinner-border spinner-border-sm text-info"></div>
<div class="spinner-border spinner-border-sm text-warning"></div>
<div class="spinner-border spinner-border-sm text-danger"></div>
<div class="spinner-border spinner-border-sm text-secondary"></div>
<div class="spinner-border spinner-border-sm text-dark"></div>
<div class="spinner-border spinner-border-sm text-light"></div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
加载按钮
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
加载中...
</button>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
进度条
- 进度条可用于用户显示任务或操作的进度。进度条（progress bar）支持堆叠、动画背景和文本标签。
- 工作原理：
- 使用
.progress作为最外层元素，用于指示进度条（progress bar）的最大值 - 在内部使用
.progress-bar来指示到目前为止的进度 .progress-bar需要通过内联样式、工具类或自定义 CSS 属性来设置其宽度
- 使用
- 下面的示例将展示如何创建一个带有垂直渐变的简单进度条，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width: 30%;"></div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
进度条的高度
- 进度条的高度默认为 1rem （通常为 16px），但我们也可以根据需要通过在
.progress元素上设置 CSS height 属性来设置其高度 注意：必须为进度容器和进度条设置相同的高度- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- 3px 高度进度条 -->
<div class="progress" style="height: 3px;">
<div class="progress-bar" style="width: 30%;"></div>
</div>
<br />
<!-- 30px 高度进度条 -->
<div class="progress" style="height: 30px;">
<div class="progress-bar" style="width: 30%;"></div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
进度条标签
- 通过在
.progress-bar元素内添加文本，就可以为进度条添加标签，以显示可见的百分比。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress" style="height: 30px;">
<div class="progress-bar" style="width: 30%;">50%</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
进度条的颜色
- 可以使用背景颜色实用程序类来创建各种颜色的进度条，以便通过不同颜色传达不同的含义。默认情况下，进度条为蓝色（主要）
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-warning" style="width: 50%;">50%</div>
</div>
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-info" style="width: 50%;">50%</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
条纹进度条
- 创建条纹的进度条，只需向
.progress-bar元素添加一个额外的类.progress-bar-striped - 条纹是通过进度条背景颜色上的 CSS 渐变生成的。与纯色类似，还可以使用相同的背景色实用程序类创建不同颜色的带条纹的进度条
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-warning progress-bar-striped" style="width: 50%;">50%</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
进度条动画
- 将类
.progress-bar-animated添加到带有类.progress-bar的元素上可以为条纹的进度条设置动画，它将通过 CSS3 动画从右到左为条纹设置动画。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 50%;">50%</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
混合色彩进度条
- 可以在一个进度组件中放置多个进度条来使它们并排在一起，进度条也可以堆叠
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="progress" style="height: 30px;">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" style="width: 25%;">25%</div>
<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 25%;">25%</div>
<div class="progress-bar bg-danger progress-bar-striped progress-bar-animated" style="width: 25%;">25%</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
小工具
- Bootstrap5 提供了很多有用的类来帮助我们快速实现效果，不需要重复写一些 CSS 代码，可以在不使用任何 CSS 代码的情况下快速设置元素样式。
边框类
- 使用边框类为元素添加或删除边框，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="border border-primary" style="height:30px;">边框颜色</div>
<br>
<div class="border border-3">边框宽度</div>
<br>
<div class="border border-top-0 border-primary">顶部无边框</div>
<br>
<div class="border border-right-0 border-primary">右边无边框</div>
<br>
<div class="border border-bottom-0 border-primary">底部无边框</div>
<br>
<div class="border border-left-0 border-primary">底部无边框</div>
<br>
<div class="border-top">顶部边框</div>
<br>
<div class="border-start">左侧边框</div>
<br>
<div class="border-bottom">底部边框</div>
<br>
<div class="border-end">右侧边框</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
边框圆角
- 使用
rounded类为元素添加圆角：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="rounded bg-black text-white">边框圆角</div>
<br>
<div class="rounded-top bg-black text-white">上边圆角</div>
<br>
<div class="rounded-end bg-black text-white">右边圆角</div>
<br>
<div class="rounded-bottom bg-black text-white">底部圆角</div>
<br>
<div class="rounded-start bg-black text-white">左边圆角</div>
<br>
<div class="rounded-circle bg-black text-white text-center">100% 圆角</div>
<br>
<div class="rounded-pill bg-black text-white">50% 圆角</div>
<br>
<div class="rounded-0 bg-black text-white">无圆角</div>
<br>
<div class="rounded-1 bg-black text-white">圆角大小为0.25rem</div>
<br>
<div class="rounded-2 bg-black text-white">圆角大小为0.5rem</div>
<br>
<div class="rounded-3 bg-black text-white">圆角大小为1rem</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
浮动与清楚浮动
- 元素向右浮动使用
.float-end类，向左浮动使用.float-start类，.clearfix类用于清楚浮动 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="clearfix">
<span class="float-start">向左浮动</span>
<span class="float-end">向右浮动</span>
</div>
<!-- 响应式浮动 -->
<div class="clearfix">
<div class="float-sm-end">在小型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-md-end">在中型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-lg-end">在大型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-xl-end">在超大型屏幕或更宽的屏幕上向右浮动</div>
<div class="float-xxl-end">在特大型屏幕或更宽的屏幕上向右浮动</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
居中对齐
- 使用
.mx-auto类来设置元素居中对齐（添加 margin-left 和 margin-right 为 auto） - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="border mx-auto text-center border-primary" style="width: 200px;">
居中对齐
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
宽度、高度
- 使用
w-*类（.w-25、.w-50、.w-75）设置元素的宽度 - 使用
h-*类（.h-25、.h-50、.h-75）设置元素的高度 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container border border-warning" style="height: 600px;">
<div class="border text-center border-primary w-25 h-25">宽度为25%、高度为25%</div>
<div class="border text-center border-primary w-auto h-auto">自动设置宽度和高度</div>
<div class="border text-center border-primary mw-100 h-100">宽度和高度都100%</div>
<div class="border text-center border-primary mw-100 vh-100">高度为视口高度</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
间距
- 在元素中涉及使用内间距或者外间距时，
p-内间距，这个 Class 属性会设定 padding 值，m-外间距，这个 Class 属性会设定 margin 值m-用来设置marginp-用来设置padding
- 间距的方向
t-用来设置margin-top或padding-topb-用来设置margin-bottom或padding-bottoms-用来设置margin-left或padding-lefte-用来设置margin-right或padding-rightx-用来设置left或righty用来设置top和bottomblank用来设置元素在四个方向的margin或padding
- 间距的距离
0 -把margin或padding设置为01 -把margin或padding设置为.25rem2 -把margin或padding设置为0.5rem3 -把margin或padding设置为1rem4 -把margin或padding设置为1.5rem5 -把margin或padding设置为3remauto -把margin设置为auto
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container border border-warning">
<div class="pt-4 bg-warning">我只有上内边距 1.5rem</div>
<div class="p-4 bg-primary">所有边都有内边距 3rem</div>
<div class="m-5 bg-danger">所有边都有外边距 3rem</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
阴影
- Bootstrap5 可以使用
shadow-类为元素添加阴影
| 类 | 说明 |
|---|---|
| shodow | 为元素添加阴影 |
| shadow-sm | 为元素添加一个阴影 |
| shodow-lg | 为元素添加更大的阴影 |
| shodow-none | 从元素中移除阴影 |
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container border border-info shadow">
<div class="bg-danger m-5">所有边都有外边距 3rem</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
Flex 弹性盒子
- 弹性盒子是 CSS3 的一种新的布局模式，更适合响应式的设计。
弹性盒子容器
- 使用
d-flex类，创建 flexbox 容器并将直接子项转换为 flex 项 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
行内弹性盒子容器
- 使用
.d-inline-flex类创建行内 flexbox 容器 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-inline-flex">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
水平方向
- 使用
.flex-row可以设置弹性子元素水平显示，这是默认的。 - 使用
.flex-row-reverse类用于设置右对齐显示，即与.flex-row方向相反（等于倒序）。 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex flex-row-reverse">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
垂直方向
- 使用
.flex-column垂直显示 flex 项目（彼此堆叠），或使用.flex-column-reverse反转垂直方向 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex flex-column">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
换行
- 默认情况下，项目都排在一条线（又称“抽线”）上。
flex-wrap属性定义，如果一条抽线拍不下，如何换行。flex-nowrap（默认）：不换行flex-wrap：换行，第一行在上方flex-wrap-reverse：换行，第一行在下方
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex flex-wrap">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
对齐内容
- 水平对齐
- 使用
.justify-content-*类可改变弹性项目的对齐方式。*号允许的值有start（默认）endcenterbetweenaround
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex justify-content-center">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex justify-content-end">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex justify-content-start">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex justify-content-between">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex justify-content-around">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 垂直对齐
- 使用
.align-items-*类控制单行弹性项目的垂直对齐方式，*号允许的值有startendcenterbaseline：底部基线对齐stretch（默认值）
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex align-items-center border border-info" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex align-items-end border border-info" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex align-items-start border border-info" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex align-items-baseline border border-info" style="height: 300px;">
<h1 class="bg-primary w-25">1</h1>
<h2 class="bg-warning w-25">2</h2>
<h3 class="bg-info w-25">3</h3>
</div>
<br>
<div class="d-flex align-items-sm-stretch border border-info" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 多行项目的对齐方式
- 使用
.align-content-*用于控制多行项目的对齐方式，*号允许的值有startendcenterbetweenaroundstretch（默认值）
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex border border-info flex-wrap align-content-start" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex border border-info flex-wrap align-content-end" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex border border-info flex-wrap align-content-between" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex border border-info flex-wrap align-content-stretch" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
<br>
<div class="d-flex border border-info flex-wrap align-content-around" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info w-25">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
- 指定子元素对齐
- 要设置指定子元素对齐可以使用
.align-self-*类来控制，align-self-*属性允许单个项目有与其他项目不一样的对齐方式startendcenterbaselinestretch（默认值）
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
div.box {
width: 100px;
height: 100px;
margin-right: 10px;
border-radius: 20px;
}
div.box span {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="d-flex bg-info" style="width: 500px;height: 300px;">
<div class="p-2 bg-black">弹性项目1</div>
<div class="p-2 bg-primary align-self-center">弹性项目1</div>
<div class="p-2 bg-black">弹性项目3</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
等宽
- 在 flex 项目上使用
.flex-fill可强制它们等宽 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex border border-info align-items-start" style="height: 300px;">
<div class="bg-primary flex-fill">1</div>
<div class="bg-warning flex-fill">2</div>
<div class="bg-info flex-fill">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
伸展
- 在 flex 项目上使用
.flex-grow-1可占用多余的空间 - 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="d-flex border border-info align-items-start" style="height: 300px;">
<div class="bg-primary w-25">1</div>
<div class="bg-warning w-25">2</div>
<div class="bg-info flex-grow-1">3</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
案例：骰子布局
-
实例图片
-
示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<style>
div.box {
width: 100px;
height: 100px;
margin-right: 10px;
border-radius: 20px;
}
div span {
width: 20px;
height: 20px;
}
</style>
</head>
<body>
<div class="d-flex m-5">
<div class="p-2 shadow box border border-dark border-3 d-flex justify-content-center align-items-center">
<span class="bg-dark rounded-circle"></span>
</div>
<div
class="p-2 shadow box border border-dark border-3 d-flex flex-column justify-content-around align-items-center">
<span class="bg-dark rounded-circle"></span>
<span class="bg-dark rounded-circle"></span>
</div>
<div class="p-2 shadow box border border-dark border-3 d-flex justify-content-between">
<span class="bg-dark rounded-circle"></span>
<span class="bg-dark rounded-circle align-self-center"></span>
<span class="bg-dark rounded-circle align-self-end"></span>
</div>
<div class="p-2 shadow box border border-dark border-3 d-flex justify-content-around">
<div class="d-flex flex-column justify-content-around">
<span class="bg-dark rounded-circle"></span>
<span class="bg-dark rounded-circle"></span>
</div>
<div class="d-flex flex-column justify-content-around">
<span class="bg-dark rounded-circle"></span>
<span class="bg-dark rounded-circle"></span>
</div>
</div>
</div>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
字体图标
- 字体图标是在 Web 项目中使用的图标字体。
- 使用字体图标的好处是，可以通过应用 CSS color 属性来创建任何颜色的图标。此外，要更改图标的大小，只需使用 CSS font-size 属性即可。
获取字体图标
- 在网页中包含 Bootstrap5 图标的最简单方法是使用 CDN 链接。此 CDN 链接基本上指向一个远程 CSS 文件，其中包含生成字体图标所需的所有类。
- 我们可以在 Bootstrap 模板以及简单的网页中包含 Bootstrap5 图标，而无需使用 Bootstrap 框架。利用提供的公共 CDN 服务并将图标字体的样式表添加到网站的 head 标签内
- 或者从官网上下载安装包，然后把
fonts文件夹复制到bootstrap-icons.css文件同一级目录中即可 - 官网
- CDN地址
- 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap5</title>
<link rel="stylesheet" href="./css/bootstrap-icons.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<i class="bi bi-3-square-fill fs-1 text-success"></i>
<!-- 带图标的按钮 -->
<button class="btn btn-primary">
<i class="bi bi-3-square-fill text-white"></i>
登录
</button>
<script src="./js/bootstrap.bundle.min.js"></script>
</body>
</html>
1020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
