进度条--层叠进度条，玩转Bootstrap（基础）教程-慕课网

进度条--层叠进度条

Bootstrap框架除了提供上述几种进度条之外，还提供了一种层叠进度条，层叠进度条，可以将不同状态的进度条放置在一起，按水平方式排列。具体使用如下：

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

运行效果如下：

或许你会感到疑问，没有为层叠进度条添加额外的样式代码，怎么就正常了呢？可以回过头来看基本进度条那部分，不难发现，在“progress-bar”上有一个左浮动的样式。也就是这个样式，在不增加任何样式代码就能实现上例的层叠效果。当然有一点需要注意，层叠进度条宽度之和不能大于100%，大于100%就会造成下面的不良效果（见右侧代码编辑器）：

除了层叠彩色进度条之外，还可以层叠条纹进度条，或者说条纹进度条和彩色进度条混合层叠，仅需要在“progress”容器中添加对应的进度条，同样要注意，层叠的进度条之和不能大于100%。来简单的看一个示例：

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:20%"></div>
    <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div>
    <div class="progress-bar progress-bar-warning" style="width:30%"></div>
    <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div>
</div>

运行效果如下：

任务

本小节没有任务，单击“提交”按钮进行下一个小节学习。

?不会了怎么办

index.html
style.css

<!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> <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:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-striped progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%"></div> </div> <br/> <br/> <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>

body { padding:30px 100px; }

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

全屏

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

7-12 进度条--层叠进度条