首页 参考手册 笔记

Bootstrap V2 教程
Bootstrap 简介 Bootstrap 3 CSS 概览 Bootstrap 网格系统 Bootstrap 布局 Bootstrap 响应式设计 Bootstrap 排版 Bootstrap Glyphicons Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图像 Bootstrap 图标 Bootstrap 导航 Bootstrap 导航条 Bootstrap 内联标签和徽章 Bootstrap 缩略图 Bootstrap 进度条 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 警告和错误 Bootstrap 清单组/价格表 Bootstrap LESS Bootstrap 模态框 Bootstrap 弹出框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 轮播 Bootstrap Typeahead Bootstrap 按钮 Bootstrap 折叠

Bootstrap 教程

Bootstrap 教程 Bootstrap 简介 Bootstrap 环境安装 Bootstrap 可视化布局 Less 教程 Bootstrap CSS 概览 Bootstrap 网格系统 Bootstrap 排版 Bootstrap 代码 Bootstrap 表格 Bootstrap 表单 Bootstrap 按钮 Bootstrap 图片 Bootstrap 辅助类 Bootstrap 响应式实用工具 Bootstrap 字体图标 Bootstrap 下拉菜单 Bootstrap 按钮组 Bootstrap 按钮下拉菜单 Bootstrap 输入框组 Bootstrap 导航元素 Bootstrap 导航栏 Bootstrap 面包屑导航 Bootstrap 分页 Bootstrap 标签 Bootstrap 徽章 Bootstrap 超大屏幕 Bootstrap 页面标题 Bootstrap 缩略图 Bootstrap 警告 Bootstrap 进度条 Bootstrap 多媒体对象 Bootstrap 列表组 Bootstrap 面板 Bootstrap Well Bootstrap 插件概览 Bootstrap 过渡效果 Bootstrap 模态框 Bootstrap 下拉菜单 Bootstrap 滚动监听 Bootstrap 标签页 Bootstrap 提示工具 Bootstrap 弹出框 Bootstrap 警告框 Bootstrap 按钮 Bootstrap 折叠 Bootstrap 轮播 Bootstrap 附加导航 Bootstrap UI 编辑器 Bootstrap v2 教程 Bootstrap HTML编码规范 Bootstrap CSS编码规范
提示：你当前查看的是 Bootstrap 2.x 版本，Bootstrap3.x 版本点我。

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> <!-- /container -->
在线查看实例

请注意，如果要显示第三种进度条，请添加 '.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> <!-- /container -->
在线查看实例

浏览器支持

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

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