Bootstrap/docs/4.5/components/progress

在GitHub上查看

进展

使用Bootstrap自定义进度条的文档和示例,这些进度条支持堆叠的条,动画背景和文本标签。

这个怎么运作

进度组件由两个HTML元素,一些用于设置宽度的CSS和一些属性构建。 我们不使用 HTML5 <progress> 元件 ,以确保您可以堆叠进度条,为其设置动画并在其上放置文本标签。

• 我们使用 .progress 作为包装,以指示进度条的最大值。
• 我们使用内在 .progress-bar 表示到目前为止的进度。
• The .progress-bar 需要内联样式,实用程序类或自定义CSS来设置其宽度。
• The .progress-bar 还需要一些 role and aria 属性以使其可访问。

将所有内容放在一起,您将看到以下示例。

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

Bootstrap提供了一些 设置宽度的实用程序 。根据您的需求,这些可能有助于快速配置进度。

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar w-75" role="progressbar"></div>
</div>

标签

通过将文本放置在进度栏中,将标签添加到进度条 .progress-bar.

25%

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

高度

我们只设置一个 height 的价值 .progress ,因此,如果您更改该值,则内部 .progress-bar 会相应地自动调整大小。

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

背景资料

使用后台实用程序类来更改单个进度条的外观。

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar bg-success" role="progressbar" style="width: 25%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar bg-warning" role="progressbar" style="width: 75%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar bg-danger" role="progressbar" style="width: 100%"></div>
</div>

多个酒吧

如果需要,在进度组件中包括多个进度栏。

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="15" class="progress-bar" role="progressbar" style="width: 15%"></div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="30" class="progress-bar bg-success" role="progressbar" style="width: 30%"></div>
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="20" class="progress-bar bg-info" role="progressbar" style="width: 20%"></div>
</div>

条状

Add .progress-bar-striped 去任何 .progress-bar 通过CSS渐变在进度条的背景颜色上应用条纹。

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="10" class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="25" class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="50" class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"></div>
</div>
<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"></div>
</div>

动画条纹

条纹渐变也可以设置为动画。 Add .progress-bar-animated to .progress-bar 通过CSS3动画从右到左对条纹进行动画处理。

切换动画

<div class="progress">
<div aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" class="progress-bar progress-bar-striped" role="progressbar" style="width: 75%"></div>
</div>
<button aria-pressed="false" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" type="button"> 切换动画 </button>