使用Bootstrap堆叠多个进度条

要在Bootstrap中堆叠多个进度条,您可以尝试运行以下代码

示例

<!DOCTYPE html>

<html>

   <head>

      <title>Bootstrap Example</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%;">

            <span class = "sr-only">40% Complete (success)</span>

         </div>

         <div class = "progress-bar progress-bar-warning" role = "progressbar"

            aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">

            <span class = "sr-only">30% Complete (warning)</span>

         </div>

         <div class = "progress-bar progress-bar-danger" role = "progressbar"

            aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">

            <span class = "sr-only">20%Complete (danger)</span>

         </div>

      </div>

   </body>

</html>

以上是 使用Bootstrap堆叠多个进度条 的全部内容, 来源链接: utcz.com/z/340920.html

回到顶部