Bootstrap|Bootstrap 进度条 Bootstrap|教程

进度条 Bootstrap提供了多种漂亮的进度条，可以使用进度条来表示加载、跳转等正在执行中的状态。进度条本身只是一个静态元素，要让它拥有交互能力，还需要JavaScript代码的配合。
基本进度条
【Bootstrap|Bootstrap 进度条】进度条由嵌套的两层结构定义：外层结构用于创建进度条的容器，使用 .progress 类定义；内层结构用于创建进度条，使用 .bar 类定义，并通过CSS的 width 属性值来设置进度的百分比。如：

class="progress">
class="bar" style="width: 60%; ">

默认情况下，进度条容器的背景为浅灰色，进度条本身为蓝色，并带有垂直渐变。效果如图 4?56所示：

文章图片
图4-56 Bootstrap进度条组件
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。