web前端全系列 教程
1839个小节阅读:2242.9k
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
通过这些简单、灵活的进度条,为当前工作流程或动作提供实时反馈
默认样式的进度条
xxxxxxxxxx
<div class="progress">
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
将设置了 .sr-only
类的 <span>
标签从进度条组件中移除 类,从而让当前进度显示出来
xxxxxxxxxx
<div class="progress">
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
在展示很低的百分比时,如果需要让文本提示能够清晰可见,可以为进度条设置 min-width
属性
xxxxxxxxxx
<div class="progress">
<div class="progress-bar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"
style="min-width: 2em; width: 2%;">
2%
</div>
</div>
进度条组件使用与按钮和警告框相同的类,根据不同情境展现相应的效果
xxxxxxxxxx
<div class="progress">
<div class="progress-bar progress-bar-success" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" aria-valuenow="20" aria-valuemin="0"
aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
通过渐变可以为进度条创建条纹效果,IE9 及更低版本不支持
xxxxxxxxxx
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" aria-valuenow="40"
aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
为 .progress-bar-striped
添加 .active
类,使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持
xxxxxxxxxx
<div class="progress">
<div class="progress-bar progress-bar-striped active" aria-valuenow="45"
aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
把多个进度条放入同一个 .progress
中,使它们呈现堆叠的效果
xxxxxxxxxx
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
实时效果反馈
1. 下列那个类可以实现动画效果的进度条:
A .progress
B .progress-bar
C .progress-bar-striped active
D .progress-bar-striped
答案
1=>C