PHP前端开发

bootstrap怎么设置进度条

百变鹏仔 1个月前 (11-14) #bootstrap
文章标签 进度条


1、实现方法如下:

(1)引入bootrap文件:

 <link>

(2)添加一个

(3)在

中添加一个

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

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

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

——让进度条指在40%的位置。

完整代码如下:

nbsp;html>        进度条    <link>
    

默认的进度条

    
        
        
    

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

2、指定颜色.

progress-bar-success、progress-bar-info、progress-bar-warning、progress-bar-danger

<div>    <div>    </div></div><div>    <div>    </div></div><div>    <div>    </div></div><div>    <div>    </div></div>

3、条纹状,通过在根div添加 progress-striped 即可

<div>    <div>    </div>   </div>

4、在根div 添加active,即可实现带动画的进度条。

<div>    <div>    </div>  </div>

推荐:bootstrap/" target="_blank">bootstrap入门教程