Bootstrap 进度条.pdfVIP

Bootstrap 进度条 Bootstrap 进度条 本章将讲解 Bootstrap 进度条。在本教程中，您将看到如何使⽤ Bootstrap 创建加载、 重定向或动 状态的进度条。 Bootstrap 进度条使⽤ CSS3 过渡和动画来获得该效果。Internet Explorer 9 及之前的版本和旧版的 Firefox 不⽀持该特性，Opera 12 不⽀ 持动画。 默认的进度条 创建⼀个基本的进度条的步骤如下： 添加⼀个带有 class .progress 的 div 。 接着，在上⾯的 div 内，添加⼀个带有 class .progress-bar 的空的 div 。 添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style= 60% ; 表⽰进度条在 60% 的位置。 让我们看看下⾯的实例： !DOCTYPE html html head titleBootstrap 实例 - 进度条/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody div class=progress div class=progress- ar role=progress ar aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 style=width: 40% ; span class=sr-only40% 完成/span /div /div / ody /html 尝试⼀下 » 结果如下所⽰： 交替的进度条 创建不同样式的进度条的步骤如下： 添加⼀个带有 class .progress 的 div 。 接着，在上⾯的 div 内，添加⼀个带有 class .progress-bar 和 class progress- bar-* 的空的 div 。其中，* 可以是 success、info、warning、danger 。 添加⼀个带有百分⽐表⽰的宽度的 style 属性，例如 style= 60% ; 表⽰进度条在 60% 的位置。 让我们看看下⾯的实例： !DOCTYPE html html head titleBootstrap 实例 - 交替的进度条/title link href=/ ootstrap/css/ ootstrap.min.css rel=stylesheet script src=/scripts/jquery .min.js/script script src=/ ootstrap/js/ ootstrap.min.js/script /head ody div class=progress div class=progress- ar progress- ar-success role=progress a aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 style=width: 90% ; span class=sr-only90% 完成 （成功）/span /div /div div class=progress div class=progress- ar progress- ar-info role=progress ar aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 style=width: 30% ; span class=sr-only30% 完成 （信息）/span /div /div div class=progress div class=progress- ar progress- ar-warning role=progress a aria-valuenow=60 ar