Bootstrap 3参考手册

Bootstrap 进度条

简介

在本教程中，您将看到如何使用 Bootstrap 创建加载、重定向或动作状态的进度条。

基本的、条纹的和动画的进度条实例

实例

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>一个基本的垂直方向进度条</h3>
            <div class="progress">
                <div class="bar"
                     style="width: 60%;"></div>
            </div>
            <h3>条纹进度条,使用梯度来创建一个条纹的效果</h3>
            <div class="progress progress-striped">
                <div class="bar" style="width: 60%;"></div>
            </div>
            <h3>一个动画进度条</h3>
            <div class="progress progress-striped active">
                <div class="bar" style="width: 50%;"></div>
            </div>
        </div>
    </div>

    <hr>
</div>

在线查看实例

请注意，如果要显示第三种进度条，请添加 '.active' class 来让它具有运动感。Bootstrap 使用 css3 过渡效果创建这个动画。您也可以通过 JavaScript 动态地调整进度条的宽度。这样，就可以掌握进度行为。

在创建进度条时，您可以使用其他的颜色。

带有其他颜色的进度条实例

实例

<div class="container">
    <div class="row">
        <div class="span4">
            <h3>进度条也可能有其他颜色</h3>
            <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 20%"></div>
            </div>
            <div class="progress progress-success progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 40%"></div>
            </div>
            <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
                <div class="bar" style="width: 60%"></div>
            </div>
            <div class="progress progress-danger progress-striped active" style="margin-bottom: 9px;">
                <div class="bar" style="width: 80%"></div>
            </div>
        </div>
    </div>
</div>
<hr>
</div>

在线查看实例

浏览器支持

我们已经在不同的浏览器中测试了上面的两个实例。我们发现，在 Firefox 12 和 Chrome 19.0.1084.52 中能正常显示，但是在 Opera 11.62 中不能显示动画效果，即便您可以看到条纹和梯度。在 Internet Explorer 8 中，所有的显示效果都不佳，没有动画，也没有条纹和梯度。

点击这里，下载本教程中使用到的所有 HTML、CSS、JS 和图片文件。

	Bootstrap 进度条

Bootstrap 3

Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

主页	https://getbootstrap.com/
源码	https://github.com/twbs/bootstrap
版本	3
发布版本	3.3.7

Bootstrap 3目录

1.Components
2.CSS
3.JavaScript
4.Bootstrap 响应式设计
5.Bootstrap 3 CSS 概览
6.Bootstrap 分页
7.Bootstrap 进度条
8.Bootstrap 缩略图
9.Bootstrap 图标
10.Bootstrap 表单
11.Bootstrap 折叠
12.Bootstrap 按钮
13.Bootstrap Typeahead
14.Bootstrap 轮播
15.Bootstrap 下拉菜单
16.Bootstrap 弹出框
17.Bootstrap LESS
18.Bootstrap Glyphicons
19.Bootstrap 简介
20.Bootstrap 网格系统
21.Bootstrap CSS 概览
22.Bootstrap 输入框组
23.Bootstrap 进度条
24.Bootstrap 提示工具（Tooltip）插件
25.Bootstrap 标签页（Tab）插件
26.Bootstrap 模态框（Modal）插件
27.Bootstrap 过渡效果（Transition）插件
28.Bootstrap 插件概览
29.Bootstrap v2 教程
30.Bootstrap 附加导航（Affix）插件
31.Bootstrap 轮播（Carousel）插件
32.Bootstrap 折叠（Collapse）插件
33.Bootstrap CSS编码规范
34.Bootstrap HTML编码规范
35.Bootstrap 创建一个网页