Bootstrap 3 进度条的实现

这篇文章主要介绍了Bootstrap 3 进度条的实现,非常不错,具有参考借鉴价值,需要的朋友可以参考下

基本样式

<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>60% Complete</span> </div> </div>

自带进度

<div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> 60% </div> </div>

<div> <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"> 0% </div> </div> <div> <div role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100"> 2% </div> </div>

多种颜色

<div> <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span>40% Complete (success)</span> </div> </div> <div> <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <span>20% Complete</span> </div> </div> <div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>60% Complete (warning)</span> </div> </div> <div> <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> <span>80% Complete (danger)</span> </div> </div>

条纹

<div> <div role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span>40% Complete (success)</span> </div> </div> <div> <div role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> <span>20% Complete</span> </div> </div> <div> <div role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <span>60% Complete (warning)</span> </div> </div> <div> <div role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"> <span>80% Complete (danger)</span> </div> </div>

动态

<div> <div role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"> <span>45% Complete</span> </div> </div>

堆叠

<div> <div> <span>35% Complete (success)</span> </div> <div> <span>20% Complete (warning)</span> </div> <div> <span>10% Complete (danger)</span> </div> </div>

以上所述是小编给大家介绍的Bootstrap 3 进度条的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwzfxz.html