BootStrap之进度条progress

基础进度条用法：

<div class="progress">
  <div class="progress-bar" style="width: 20%">
	20%
  </div>
</div>

<div class="progress">
  <div class="progress-bar" style="width: 20%;">
		<!--sr-only:隐藏数字-->
	<span class="sr-only">20%</span>
  </div>
</div>

基本进度条效果图：

不同主题的进度条用法：

<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 20%;">
	<span class="sr-only">20%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 20%;">
     <span class="sr-only">20%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 20%;">
   	<span class="sr-only">20%</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 20%;">
	<span class="sr-only-focusable">20%</span>
  </div>
</div>

不同主题进度条效果图：

 

条纹进度条用法：

<div class="progress progress-striped">
	<div class="progress-bar-info progress-bar-striped" style="width: 20%">
      <span>25%</span>
	</div>
</div>

条纹进度条效果图：

 

多条纹进度条用法：

<!--progress-bar-striped:控制条纹属性-->
<div class="progress">
	<div class="progress-bar progress-bar-success progress-bar-striped" style="width: 20%">
		<span>25%</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-info progress-bar-striped" style="width: 20%">
		<span>25%</span>
	</div>
</div>
<div class="progress">
	<div class="progress-bar progress-bar-danger progress-bar-striped" style="width: 20%">
	    <span>25%</span>
	</div>
	<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
	     <span>25%</span>
	</div>
</div>

 

多条纹进度条效果图：