Bootstrap4 加载学习笔记

本篇学习笔记主要介绍如何使用 Bootstrap4 中的加载组件。

加载组件

Bootstrap4 中提供了以下几种加载组件：

• Spinners（旋转图标）
• Progress bars（进度条）

Spinners

Spinners 可以用于在等待异步操作完成的情况下向用户显示加载状态。

使用实例

在 HTML 文件中添加以下代码：

htmlCopy Code
<div class="spinner-border" role="status">
  <span class="sr-only">Loading...</span>
</div>

该代码将显示一个默认大小的旋转图标，可以通过设置 spinner-border 的类名来更改图标的大小。

Progress bars

Progress bars 可以用于显示某个任务的进度。

使用实例

在 HTML 文件中添加以下代码：

htmlCopy Code
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

该代码将显示一个宽度为 25% 的进度条，可以通过修改 style 属性中的值来更改进度条的宽度。

总结

以上就是 Bootstrap4 中的加载组件的使用方法。通过这些组件，能够更好地向用户展示异步操作和任务的进度，提高用户体验。