一、进度条
1.1 创建进度条
进度条可以显示用户任务的完成过程。
创建一个基本的进度条的步骤如下：
- 添加一个带有 .progress 类的
。
- 接着，在上面的
内，添加一个带有 class .progress-bar 的空的
。
- 添加一个带有百分比表示的宽度的 style 属性，例如 style="width:70%" 表示进度条在 70% 的位置。
<div class="container mt-3"> <h2>基本进度条</h2> <p>要创建一个默认的进度条，可以在容器元素上添加 .progress 类，在子元素上添加 progress-bar 类，并设置进度条进度情况：:</p> <div class="progress"> <div class="progress-bar" style="width:70%"></div> </div> </div>
1.2 进度条高度
进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：
<div class="container mt-3"> <h2>进度条高度</h2> <p>进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他：</p> <div class="progress" style="height:10px;"> <div class="progress-bar" style="width:40%;"></div> </div> <br> <div class="progress" style="height:20px;"> <div class="progress-bar" style="width:50%;"></div> </div> <br> <div class="progress" style="height:30px;"> <div class="progress-bar" style="width:60%;"></div> </div> </div>
1.3 进度条标签
可以在进度条内添加文本，如进度的百分比：
<div class="container mt-3"> <h2>进度条文本标签</h2> <div class="progress"> <div class="progress-bar" style="width:70%">70%</div> </div> </div>
1.4 不同颜色的进度条
默认情况下进度条为蓝色，Bootstrap5 还提供了以下颜色的进度条：
<div class="container mt-3"> <h2>多种颜色的进度条</h2> <p>Bootstrap5 提供了以下几种进度条颜色:</p> <div class="progress"> <div class="progress-bar" style="width:30%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-success" style="width:40%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-info" style="width:50%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-warning" style="width:60%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-danger" style="width:70%"></div> </div> </div>
1.5 条纹的进度条
可以使用 .progress-bar-striped 类来设置条纹进度条：
<div class="container mt-3"> <h2>条纹的进度条</h2> <p>可以使用 .progress-bar-striped 类来设置条纹进度条：</p> <div class="progress"> <div class="progress-bar progress-bar-striped" style="width:30%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div> </div> <br> <div class="progress"> <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div> </div> </div>
1.6 动画进度条
使用 .progress-bar-animated 类可以为进度条添加动画：
<div class="container mt-3"> <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>
1.7 混合色彩进度条
进度条可以设置多种颜色：
<div class="container mt-3"> <h2>混合色彩进度条</h2> <p>进度条可以设置多种颜色:</p> <div class="progress"> <div class="progress-bar bg-success" style="width:40%"> 安全线 </div> <div class="progress-bar bg-warning" style="width:10%"> 警告线 </div> <div class="progress-bar bg-danger" style="width:20%"> 危险线 </div> </div> </div>
二、加载效果
2.1 创建加载效果
要创建加载中效果可以使用 .spinner-border 类:
<div class="container mt-3"> <h2>加载中效果</h2> <p>要创建加载中效果可以使用 .spinner-border 类:</p> <div class="spinner-border"></div> </div>
2.2 设置颜色
可以使用文本颜色类设置不同的颜色：
<div class="container mt-3"> <h2>不同颜色加载效果</h2> <p>可以使用文本颜色类设置不同的颜色：</p> <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> </div>
2.3 闪烁的加载效果
使用 .spinner-grow 类来设置闪烁的加载效果:
<div class="container mt-3"> <h2>闪烁的加载效果</h2> <p>使用 .spinner-grow 类来设置闪烁的加载效果:</p> <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> </div>
2.4 设置加载效果大小
使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:
<div class="container mt-3"> <h2>设置加载效果大小</h2> <p>使用.spinner-border-sm 或 .spinner-grow-sm 类来创建加载效果的大小:</p> <div class="spinner-border spinner-border-sm"></div> <div class="spinner-grow spinner-grow-sm"></div> </div>
2.5 加载按钮
我们也可以设置一个正在加载的按钮
<div class="container mt-3"> <h2>加载按钮</h2> <p>按钮添加正在加载按钮:</p> <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> </div>
