Bootstrap 组件：进度条组件（progress）

最新推荐文章于 2024-08-01 11:33:58 发布

汪末末

最新推荐文章于 2024-08-01 11:33:58 发布

阅读量1.6k

点赞数 2

分类专栏： # Bootstrap 框架文章标签： bootstrap css html css3 html5

本文链接：https://blog.youkuaiyun.com/WangMinGirl/article/details/108458083

版权

本文介绍了Bootstrap的进度条组件，包括默认样式、带有提示标签、情境变化效果、条纹和动画效果，以及堆叠效果。通过CSS3的transition和animation属性实现动态效果，适用于不同场景的实时反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作者:WangMin
格言:努力做好自己喜欢的每一件事
优快云原创文章
博客地址 👉 WangMin

通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈。

注意： 进度条组件使用了 CSS3 的 transition 和 animation 属性来完成一些特效。这些特性在 Internet Explorer 9 或以下版本中、Firefox 的老版本中没有被支持。Opera 12 不支持 animation 属性。

默认样式进度条

实现原理：需要两个容器，外容器使用类名.progress，子容器使用类名.progress-bar;其中.progress用来设置进度条容器的背景色，容器的高度，间距等；而.progress-bar设置进度方向，进度条的背景色和过度效果。

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%;">
		<span class="sr-only">60% Complete</span>
	</div>
</div>

在这里插入图片描述

带有提示标签的进度条

将设置了.sr-only类的<span>标签从进度条组件中移除类，从而让当前进度显示出来。

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

在这里插入图片描述

在展示很低的百分比时，如果需要让文本提示能够清晰可见，可以为进度条设置min-width属性。

<div class="progress">
	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width:20px;">
		<span>0% Complete

最低0.47元/天解锁文章