Bootstrap 各种进度久详解

同一:默认的速度长长的

创造一个为主的快长之步调如下:

  • 累加一个涵盖 class .progress 的 <div>。
  • 随即,在上面的 <div> 内,添加一个带有 class .progress-bar
    的空的 <div>。
  • 加上一个蕴含百分比表示的升幅之 style 属性,例如 style=”60%”;
    表示进度长以 60% 的职。

让咱们看下面的实例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 进度条</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60"
    aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    40% 完成
    </div>
    </div>

    </body>
    </html>

结果如下所示:

 图片 1

老二:交替的快长达

缔造不同样式的进度长条的步子如下:

  • 加上一个分包 class .progress 的 <div>。
  • 继,在点的 <div> 内,添加一个涵盖 class .progress-bar
    和 class progress-bar-* 的空的 <div>。其中,* 可以是
    success、info、warning、danger
  • 长一个含百分比表示的肥瘦的 style 属性,例如 style=”60%”;
    表示进度长条在 60% 的职务。

叫咱看看下面的实例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 交替的进度条</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 90%;">
    90% 完成(成功)
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 30%;">
    30% 完成(信息)
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 20%;">
    20% 完成(警告)
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 10%;">
    10% 完成(危险)
    </div>
    </div>

    </body>
    </html>

结果如下所示:

 图片 2

老三:条纹的进度久

创一个条纹的速长长的之手续如下:

  • 长一个含有 class .progress.progress-striped
    <div>。
  • 随着,在面的 <div> 内,添加一个分包 class
    .progress-bar 和 class
    progress-bar-* 的空的 <div>。其中,* 可以是
    success、info、warning、danger
  • 丰富一个暗含百分比表示的升幅之 style 属性,例如 style=”60%”;
    表示进度长长的以 60% 的位置。

被我们看下面的实例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 条纹的进度条</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 90%;">
    90% 完成(成功)
    </div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 30%;">
    30% 完成(信息)
    </div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 20%;">
    20% 完成(警告)
    </div>
    </div>
    <div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 10%;">
    10% 完成(危险)
    </div>
    </div>

    </body>
    </html>

结果如下所示:

 图片 3

季:动画的速条

始建一个动画的快慢长达的步骤如下:

  • 丰富一个包含 class .progress.progress-striped
    <div>。同时丰富 class .active
  • 继而,在点的 <div> 内,添加一个饱含 class
    .progress-bar 的空的 <div>。
  • 长一个分包百分比表示的大幅度的 style 属性,例如 style=”60%”;
    表示进度长条在 60% 的职位。

当下将会使条纹有从右侧为左的运动感。

于咱们看看下面的实例:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 动画的进度条</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 40%;">
    40% 完成
    </div>
    </div>

    </body>
    </html>

结果如下所示:

 图片 4

五:堆叠的快慢长

您还好堆叠多个进度漫漫。把多单进度修在同样之 .progress
中即可实现堆叠,如下面的实例所示:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 实例 - 堆叠的进度条</title>
    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>

    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 40%;">
    40% 完成
    </div>
    <div class="progress-bar progress-bar-info" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 30%;">
    30% 完成(信息)
    </div>
    <div class="progress-bar progress-bar-warning" role="progressbar"
    aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
    style="width: 20%;">
    20% 完成(警告)
    </div>
    </div>

    </body>
    </html>

结果如下所示:

 图片 5


相关文章