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>

结果如下所示:

 Bootstrap 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>

结果如下所示:

 Bootstrap 2

三:条纹的进程条

创立一个条纹的进度条的手续如下:

  • 累加一个饱含 class .progress.progress-striped
    <div>。
  • 随即,在地点的 <div> 内,添加一个富含 class
    .progress-bar 和 class
    Bootstrap,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>

结果如下所示:

 Bootstrap 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>

结果如下所示:

 Bootstrap 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>

结果如下所示:

 Bootstrap 5


相关文章