今天武志伟小编分享一下Bootstrap4如何设置进度条属性,做出漂亮的进度条。
工具/原料
Bootstrap4
方法/步骤
1
添加一个带有 .progress 类的
。接着,在上面的
内,添加一个带有 class .progress-bar 的空的
。添加一个带有百分比表示的宽度的 style 属性,例如 style='width:70%' 表示进度条在 70% 的位置。实例
2
进度条高度进度条高度默认为 16px。我们可以使用 CSS 的 height 属性来修改他:实例
3
进度条标签可以在进度条内添加文本,如进度的百分比:实例
4
不同颜色的进度条默认情况下进度条为蓝色,Bootstrap4 还提供了以下颜色的进度条:实例
5
条纹的进度条可以使用 .progress-bar-striped 类来设置条纹进度条:实例
6
动画进度条使用 .progress-bar-animated 类可以为进度条添加动画:实例
7
混合色彩进度条进度条可以设置多种颜色:实例
注意事项
本经验代码格式适用于Bootstrap4,可能不适用其他版本。
上一篇:PS特效,如何制作亮丽灯泡海报
下一篇:vim 技巧 快速使用
推荐信息
- 1
Bootstrap4如何设置进度条
- 2
给笔记本清灰的方法
- 3
生化危机8钢琴怎么弹
- 4
如何破解下载付费歌曲
- 5
如何清理显卡灰尘
- 6
显卡风扇如何拆卸及安装
- 7
安装显卡驱动后出现花屏的解决办法
- 8
戴尔g3散热怎么解决
- 9
650ti玩绝地求生帧数太低怎么办
- 10
lol团战掉帧,对线线帧数挺高
- 11
Lenovo Ideapad Y430A-TSI 升级CPU、内存
- 12
主机噪音—如何清洗显卡风扇
- 13
《稻香》这首歌的寓意是什么
- 14
何如换电脑的cpu导热硅脂?
- 15
DIY散热铜片!解决本本散热“大”问题!
- 16
改装显卡散热器
- 17
耕升1070Ti追风显卡拆解测试
- 18
笔记本1年换一次散热硅脂的好处?
- 19
最美的不是下雨天是与你躲过得屋檐 是周杰伦哪首歌的歌词
- 20
如何给笔记本清灰换硅脂
- 21
显卡驱动升级后电脑花屏的详细解决办法
