目录
加载器
彩色加载器
实例
闪烁加载器
实例
加载器大小
实例
加载器按钮
实例
分页
分页的基本结构
实例
活动状态
实例
禁用状态
实例
分页大小
实例
分页对齐
实例
面包屑（Breadcrumbs）
实例
加载器
彩色加载器
在 Bootstrap 5 中，要创建一个加载效果，可以使用 .spinner-border 类。这个类会创建一个基本的加载动画，可以使用它来指示数据正在加载或处理中。注意：可以使用文本颜色类设置不同的颜色。
实例
Bootstrap 实例 彩色加载器
运行结果（动态的）
闪烁加载器
可以使用Bootstrap提供的.spinner-grow类来创建一个“增长”效果的加载器。
实例
Bootstrap 实例 闪烁加载器
运行结果（动态的）
加载器大小
在Bootstrap中，设置加载效果的大小可以通过使用不同的spinner类来实现，Bootstrap 5 提供.spinner-border-sm或.spinner-grow-sm类来改变加载效果的大小。
实例
Bootstrap 实例 闪烁加载器
运行结果（动态的）
加载器按钮
可以向按钮添加加载器，无论是否带有文本。
实例
Bootstrap 实例 加载器按钮
运行结果（动态的）
分页
Bootstrap 5中的分页功能相对于Bootstrap 4在功能和性能上都有所提升。
分页的基本结构
网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap 5 可以很简单的实现分页效果。要创建一个基本的分页可以在
- 元素上添加 .pagination 类。然后在
- 元素上添加 .page-item 类，
- 元素的标签上添加 .page-link 类:
实例
Bootstrap 实例 分页的基本结构
- 上一页
- 1
- 2
- 3
- 下一页
运行结果
活动状态
在Bootstrap中，可以通过在对应的
- 元素上添加.active类来高亮显示当前页。
实例
Bootstrap 实例 当前页页码状态
- 上一页
- 1
- 2
- 3
- 下一页
运行结果
禁用状态
在Bootstrap中，可以通过在
- 元素上添加.disabled类来使分页链接不可点击。这对于那些由于某种原因（例如，没有更多的页面可显示）而禁用的链接是非常有用的。
实例
Bootstrap 实例 禁用状态
- 上一页
- 1
- 2
- 3
- 下一页
在这个例子中，上一页链接已经被禁用，用户无法点击它。注意tabindex=”-1″和aria-disabled=”true”这两个属性：它们是为了确保禁用的链接无法通过键盘导航到达，并且辅助技术（如屏幕阅读器）知道这个链接已经被禁用。
运行结果
分页大小
Bootstrap 5允许通过添加特定的类来改变分页条目的大小。.pagination-lg类可以使分页条目变大，而.pagination-sm类可以使分页条目变小。
实例
Bootstrap 实例 分页大小
默认大小：
- 上一页
- 1
- 2
- 3
- 下一页
大型大小：
- 上一页
- 1
- 2
- 3
- 下一页
小型大小：
- 上一页
- 1
- 2
- 3
- 下一页
运行结果
分页对齐
在Bootstrap中，可以使用一些实用工具类来改变分页的对齐方式。例如，可以使用.justify-content-center（居中对齐），.justify-content-end（右对齐）或.justify-content-start（左对齐）类来改变分页条目的水平对齐方式。
实例
Bootstrap 实例 分页对齐
居中对齐：
- 上一页
- 1
- 2
- 3
- 下一页
右对齐：
- 上一页
- 1
- 2
- 3
- 下一页
左对齐：
- 上一页
- 1
- 2
- 3
- 下一页
运行结果
面包屑（Breadcrumbs）
在Bootstrap中，可以使用.breadcrumb和.breadcrumb-item类来创建一个面包屑导航。面包屑导航是一种在网站上显示用户当前位置的方法，通常显示在页面顶部或底部。
实例
Bootstrap 实例 面包屑导航
在这个例子中，.breadcrumb类被应用于
- 元素，它表示面包屑导航的容器。每个
- 元素都使用.breadcrumb-item类，表示一个单独的面包屑链接。
注意，在Bootstrap 5中，必须使用