引导设置进度条的方法

　　介绍

这篇文章主要介绍引导设置进度条的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

<强> 1,实现方法如下:

(1)引入bootrap文件:

& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/" . ./libs/bootstrap-3.3.7/css/bootstrap.css”>

(2)添加一个& lt; div类=皃rogress"在

(3)在& lt; div类=皃rogress"祝辞中添加一个& lt; div类=皃rogress-bar"在

& lt; div类=皃rogress-bar"aria-valuenow=?0”;aria-valuemax=?00”;aria-valuemin=?”;风格=翱矶?40%;“在

aria-valuenow=?0”——进度条目前进度值。

aria-valuemax=?00”——最大进度值。

aria-valuemin=" 0 "——最小进度值。

风格=翱矶?40%;“——让进度条指在40%的位置。

完整代码如下:

& lt; !doctype html> 　　& lt; html> 　　& lt; head> 　　& lt;元charset=癠TF-8"祝辞 　　& lt; title>进度条& lt;/title> 　　& lt;链接rel=皊tylesheet"href=https://www.yisu.com/zixun/" . ./libs/bootstrap-3.3.7/css/bootstrap.css”> 　　头 　　<身体> 　　 　　

默认的进度条

　　
　　
　　
　　
　　
　　 　　

以上是实现一个默认进度条,底色的灰色,进度颜色是蓝色,我们还可以在默认进度条的基础上,通过加入不同的样式来实现丰富多彩的进度条。

2,指定颜色。

progress-bar-success, progress-bar-info, progress-bar-warning, progress-bar-danger

& lt; div类=皃rogress"比; 　　& lt; div类=敖忍鮬rogress-bar-success"风格=翱矶?90%;“比; 　　& lt;/div> 　　& lt;/div> 　　& lt; div类=皃rogress"祝辞 　　& lt; div类=敖忍鮬rogress-bar-info"风格=翱矶?30%;“比; 　　& lt;/div> 　　& lt;/div> 　　& lt; div类=皃rogress"祝辞 　　& lt; div类=敖忍鮬rogress-bar-warning"风格=翱矶?20%;“比; 　　& lt;/div> 　　& lt;/div> 　　& lt; div类=皃rogress"祝辞 　　& lt; div类=敖忍鮬rogress-bar-danger"风格=翱矶?10%;“比; 　　& lt;/div> 　　& lt;/div>

引导设置进度条的方法

3条纹状,通过在根div添加progress-striped即可

& lt; div类=敖絧rogress-striped"比; 　　& lt; div类=敖忍鮬rogress-bar-success"风格=翱矶?90%;“比; 　　& lt;/div> 　　& lt;/div>

4,在根div添加活跃,即可实现带动画的进度条。

& lt; div类=敖絧rogress-striped active"比; 　　& lt; div类=敖忍鮬rogress-bar-success" 　　风格=翱矶?40%;“比; 　　& lt;/div> 　　& lt;/div>

以上是引导设置进度条的方法的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!

引导设置进度条的方法