bootstrap进度条

来源：互联网发布：浮生一日知乎编辑：程序博客网时间：2024/04/30 18:21

（1）普通进度条

1.实现

外容器使用“progress”样式，子容器使用“progress-bar”样式。

2.说明

<div class="progress">    <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">        <span class="sr-only">40% Complete</span>    </div></div>

1、role属性作用：告诉搜索引擎这个div的作用是进度条。

2、aria-valuenow="40"属性作用：当前进度条的进度为40%。

3、aria-valuemin="0"属性作用：进度条的最小值为0%。

4、aria-valuemax="100"属性作用：进度条的最大值为100%。

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>进度条--基本样式</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body>  <div class="progress">     <div class="progress-bar" style="width:80%"></div></div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>

（2）彩色进度条

1.实现

在progress-bar后添加指定样式即可

☑ progress-bar-info：表示信息进度条，进度条颜色为蓝色

☑ progress-bar-success：表示成功进度条，进度条颜色为绿色

☑ progress-bar-warning：表示警告进度条，进度条颜色为黄色

☑ progress-bar-danger：表示错误进度条，进度条颜色为红色

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>进度条--彩色进度条</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body>  <div class="progress">    <div class="progress-bar progress-bar-success" style="width:40%"></div></div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:60%"></div></div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%"></div></div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:50%"></div></div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>

（3）条纹进度条

1.实现

在progress后添加progress-striped即可

2.实现动态条纹

继续加上active即可

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>进度条--动态条纹进度条</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><div class="progress progress-striped active">    <div class="progress-bar progress-bar-success" style="width:40%"></div></div> <div class="progress progress-striped active"><div class="progress-bar progress-bar-info" style="width:60%"></div></div> <div class="progress progress-striped"><div class="progress-bar progress-bar-warning" style="width:80%"></div></div> <div class="progress progress-striped active"><div class="progress-bar progress-bar-danger" style="width:50%"></div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>

（4）层叠进度条

1.实现

将所有progress-bar放在同一个progress下即可

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>进度条--层叠进度条</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><h5>正常层叠进度条</h5><div class="progress">    <div class="progress-bar progress-bar-success" style="width:20%"></div>    <div class="progress-bar progress-bar-info" style="width:10%"></div>    <div class="progress-bar progress-bar-warning" style="width:30%"></div>    <div class="progress-bar progress-bar-danger" style="width:15%"></div></div> <h5>不良效果层叠进度条</h5> <div class="progress"><div class="progress-bar progress-bar-success" style="width:20%"></div><div class="progress-bar progress-bar-info" style="width:40%"></div><div class="progress-bar progress-bar-warning" style="width:30%"></div><div class="progress-bar progress-bar-danger" style="width:45%"></div></div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>

2.注意

所有和不能超过100%

（5）含有label进度条

1.实现

将内容放在progress-bar的范围之内即可

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>进度条--带Label的进度条</title><link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></head><body><h1>进度条1</h1><div class="progress">    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>  </div>  <div class="progress"><div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"   style="width:70%">70%</div></div><div class="progress"><div class="progress-bar progress-bar-warning"  role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div></div><div class="progress"><div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" style="width:15%">15%</div></div><h1>进度条2</h1> <div class="progress">  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div></div>  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body></html>

0 0