bootstrap——组件（八、进度条）

1、进度条基本用法

主要依赖.progress和.progress-bar
aria-valuenow表示当前值
aria-valuemin表示最小值
aria-valuemax表示最大值
width:60%表示当前进度条位置

<div class="progress">
    <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">div>
div>

---

2、带有提示标签的进度条

<div class="progress">
    <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>

---

3、根据情境变化效果

<div class="progress">
    <div class="progress-bar progress-bar-danger" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-info" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-success" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>

.progress-bar-danger
.progress-bar-info
.progress-bar-success
.progress-bar-warning

---

4、条纹效果

.progress-bar-striped可以和其他状态的类一起使用

<div class="progress">
    <div class="progress-bar progress-bar-warning progress-bar-striped" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>

---

5、动画效果

为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。

<div class="progress">
    <div class="progress-bar progress-bar-striped active" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
        <span>60%span>
    div>
div>

---

6、堆叠效果

把多个进度条放入同一个 .progress 中，使它们呈现堆叠的效果。

<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: 35%">
        class="sr-only">35% Complete (success)
    div>
    <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
        class="sr-only">20% Complete (warning)
    div>
    <div class="progress-bar progress-bar-danger" style="width: 10%">
        class="sr-only">10% Complete (danger)
    div>
div>