今天武志伟小编分享一下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
怎么用word2016制作作文网格稿纸 如何自制稿纸
- 3
nero如何刻录系统盘
- 4
如何用nero刻录系统光盘图文教程
- 5
Word 2010:[6]稿纸功能
- 6
如何提高光盘刻录的成功率!
- 7
word制作名片和稿纸
- 8
如何使word文档迅速变为稿纸
- 9
ps2游戏镜像如何刻录光盘
- 10
在WORD中怎样制作方格式稿纸
- 11
光盘刻录软件破解版:电脑怎样刻录光盘?
- 12
word如何快速制作方格稿纸?
- 13
Word文档也能用稿纸
- 14
Win7如何刻录dvd光盘?Win7刻录DVD方法
- 15
怎么在word中找到稿纸设置
- 16
车载dvd视频格式如何刻录光盘
- 17
word中稿纸的设置方法和技巧(田字格和本子格)
- 18
word如何给你的文档添加稿纸
- 19
怎么用Nero Express刻录音乐光盘
- 20
word中如何设置稿纸
- 21
如何用U盘刻录及安装电脑操作系统?
