Bootstrap进度条使用方法

佚站 网址 ：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>

需要将对应的颜色样式引入到容器内的div中，且需要与progress-bar同时引用，这几个颜色的样式分别为：

Progress-bar-success、Progress-bar-info、progress-bar-warning以及progress-bar-danger。

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%">

</div>

</div>

以上代码就是定义了绿色条纹进度条。

4、在表格中加入进度条

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>";

注意 style='width: $health%' 控制进度条宽度。

在不同的 <div> 的 文字会显示在不同地方。