佚站 網址 ：http://www.yeahzan.com/course/122-bs-20.html

1、Bootstrap進度條預設樣式

定義一個進度條的，需要分兩個結構進行，第一個是父容器，第二個是進度條，所以類似編碼如下：<div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">  </div> </div>外層的div作為整個進度條的容器，引入樣式progress，內部的div作為進度條整體結構，引入樣式progress-bar，從而顯示當前進度。

2、Bootstrap進度條其他樣式

與按鈕元素等樣式相同，Bootstrap進度條同樣提供了其他顏色的樣式進行呼叫，對應顏色也分別有綠色、藍色、橙色以及紅色。
例如需要呼叫綠色的進度條樣式，那麼編碼如下：<div class="progress">   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">  </div> </div>

3、Bootstrap進度條條紋樣式

採用條紋樣式的進度條，只需要在父容器中加入progress-striped樣式即可，例如：<div class="progress progress-striped">  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">

echo "<td>";
	echo '<div class="progress">
		<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		</div>
	</div>';
echo "</td>";

5、進度條中顯示文字，並且文字的位置控制：

$health= $up/$amount_each*100;
echo "<td style='vertical-align: middle;text-align: center;'>";
if( $health < 50 ) {
	echo "<div class='progress'>
		<div class='progress-bar progress-bar-danger' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: $health%'>
		</div> $health%
	</div>";
} else if( $health < 100 ) {
	echo "<div class='progress'>
		<div class='progress-bar progress-bar-info' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: $health%'> $health%
		</div>
	</div>";
} else {
	echo "<div class='progress'>
		<div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='60' aria-valuemin='0' aria-valuemax='100' style='width: $health%'> $health%
		</div>
	</div>";
}
echo "</td>";

在不同的 <div> 的 文字會顯示在不同地方。