Bootstrap 3 进度条的实现
基本样式
<divclass="progress"> <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%;"> <spanclass="sr-only">60%Complete</span> </div> </div>
自带进度
<divclass="progress"> <divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%;"> 60% </div> </div>
<divclass="progress"> <divclass="progress-bar"role="progressbar"aria-valuenow="0"aria-valuemin="0"aria-valuemax="100"style="min-width:2em;"> 0% </div> </div> <divclass="progress"> <divclass="progress-bar"role="progressbar"aria-valuenow="2"aria-valuemin="0"aria-valuemax="100"style="min-width:2em;width:2%;"> 2% </div> </div>
多种颜色
<divclass="progress"> <divclass="progress-barprogress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width:40%"> <spanclass="sr-only">40%Complete(success)</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width:20%"> <spanclass="sr-only">20%Complete</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%"> <spanclass="sr-only">60%Complete(warning)</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width:80%"> <spanclass="sr-only">80%Complete(danger)</span> </div> </div>
条纹
<divclass="progress"> <divclass="progress-barprogress-bar-successprogress-bar-striped"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width:40%"> <spanclass="sr-only">40%Complete(success)</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-infoprogress-bar-striped"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width:20%"> <spanclass="sr-only">20%Complete</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-warningprogress-bar-striped"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width:60%"> <spanclass="sr-only">60%Complete(warning)</span> </div> </div> <divclass="progress"> <divclass="progress-barprogress-bar-dangerprogress-bar-striped"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width:80%"> <spanclass="sr-only">80%Complete(danger)</span> </div> </div>
动态
<divclass="progress"> <divclass="progress-barprogress-bar-stripedactive"role="progressbar"aria-valuenow="45"aria-valuemin="0"aria-valuemax="100"style="width:45%"> <spanclass="sr-only">45%Complete</span> </div> </div>
堆叠
<divclass="progress"> <divclass="progress-barprogress-bar-success"style="width:35%"> <spanclass="sr-only">35%Complete(success)</span> </div> <divclass="progress-barprogress-bar-warningprogress-bar-striped"style="width:20%"> <spanclass="sr-only">20%Complete(warning)</span> </div> <divclass="progress-barprogress-bar-danger"style="width:10%"> <spanclass="sr-only">10%Complete(danger)</span> </div> </div>
以上所述是小编给大家介绍的Bootstrap3进度条的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！