Bootstrap 3 进度条的实现

2024-02-29 02:34:03 498

基本样式

<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进度条的实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

Bootstrap 3 进度条的实现

热门推荐

随机推荐