创建条纹引导进度条


按以下步骤在 Bootstrap 中创建条纹进度条 −

  • 增加一个具有 .progress 和 .progress-striped 类的 <div>。
  • 接着,在上述 <div> 内,增加一个具有 .progress-bar 和进度条-* 类的空 <div>,其中 * 可能为 success、info、warning、danger。
  • 增加一个使用百分比表示宽度的 style 特性。例如,style = "60%"; 表示进度条处于 60%。

你可以尝试运行以下代码,以形成一个条纹进度条 −

示例

实时演示

<!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>
      <h2>Striped Progress Bars</h2>
      <h3>Warning Progress Bar</h3>
      <div class = "progress progress-striped">
         <div class = "progress-bar progress-bar-warning" role = "progressbar"
         aria-valuenow = "45" aria-valuemin = "0" aria-valuemax = "100" style="width: 45%;">
            <span class = "sr-only">45%Complete (warning)</span>
         </div>
      </div>
      <h3>Danger Progress Bar</h3>
      <div class = "progress progress-striped">
         <div class = "progress-bar progress-bar-danger" role = "progressbar"
            aria-valuenow = "80" aria-valuemin = "0" aria-valuemax = "100" style = "width: 80%;">
            <span class = "sr-only">80% Complete (danger)</span>
         </div>
      </div>
   </body>
</html>

更新于: 2020 年 6 月 12 日

483 次浏览

开启您的职业生涯

完成本课程获取认证

开始学习
广告