这篇文章主要介绍了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 进度条的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: