Bootstrap—进度条progress-bar

Bootstrap为我们提供具有漂亮样式的进度条来表示一个事务的进度,如下:

Bootstrap—进度条progress-bar_第1张图片

实现方法如下:

(1)引入bootrap文件,

    

(2)添加一个

(3)在

中添加一个

其中,

aria-valuenow="40"——进度条目前进度值。

aria-valuemax="100"——最大进度值。

aria-valuemin=“0”——最小进度值。

style="width:40%;"——让进度条指在40%的位置。

完整代码如下:




    
    进度条
    


默认的进度条

以上是实现一个默认进度条,底色的灰色,进度颜色是蓝色,我们还可以在默认进度条的基础上,通过加入不同的样式来实现丰富多彩的进度条。

(1)交替进度条:

中加入.progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

交替的进度条


(2)条纹进度条:

加入.progress-striped。

 

(3)动画进度条:在条纹进度条的基础上,在

中加入.active。

动画进度条


(4)堆叠进度条: 把多个进度条放在相同的
 

堆叠进度条


 
  

 效果如下: 
  

Bootstrap—进度条progress-bar_第2张图片


本文参考资料来自:http://www.runoob.com/bootstrap/bootstrap-progress-bars.html

你可能感兴趣的:(Bootstrap,Bootstrap学习之路)