閱讀(768) 書簽贊(0) 我要糾錯

Bootstrap5 進(jìn)度條

2023-06-25 15:30 更新

進(jìn)度條可以顯示用戶任務(wù)的完成過程。

創(chuàng)建一個基本的進(jìn)度條的步驟如下：

添加一個帶有 .progress 類的 <div>。
接著，在上面的 <div> 內(nèi)，添加一個帶有 class .progress-bar 的空的 <div>。
添加一個帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進(jìn)度條在 70% 的位置。

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>基本進(jìn)度條</h2>
  <p>要創(chuàng)建一個默認(rèn)的進(jìn)度條，可以在容器元素上添加 .progress 類，在子元素上添加 progress-bar 類，并設(shè)置進(jìn)度條進(jìn)度情況：:</p>
  <div class="progress">
    <div class="progress-bar" style="width:70%"></div>
  </div>
</div>

</body>
</html>

進(jìn)度條高度

進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的 height 屬性來修改他：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>進(jìn)度條高度</h2>
  <p>進(jìn)度條高度默認(rèn)為 16px。我們可以使用 CSS 的 height 屬性來修改他：</p> 
  <div class="progress" style="height:10px;">
    <div class="progress-bar" style="width:40%;"></div>
  </div>
  <br>
  <div class="progress" style="height:20px;">
    <div class="progress-bar" style="width:50%;"></div>
  </div>
  <br>
  <div class="progress" style="height:30px;">
    <div class="progress-bar" style="width:60%;"></div>
  </div>
</div>

</body>
</html>

進(jìn)度條標(biāo)簽

可以在進(jìn)度條內(nèi)添加文本，如進(jìn)度的百分比：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>進(jìn)度條文本標(biāo)簽</h2>
  <div class="progress">
    <div class="progress-bar" style="width:70%">70%</div>
  </div>
</div>

</body>
</html>

不同顏色的進(jìn)度條

默認(rèn)情況下進(jìn)度條為藍(lán)色，Bootstrap5 還提供了以下顏色的進(jìn)度條：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>多種顏色的進(jìn)度條</h2>
  <p>Bootstrap4 提供了以下幾種進(jìn)度條顏色:</p> 
  <div class="progress">
    <div class="progress-bar" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger" style="width:70%"></div>
  </div>
</div>

</body>
</html>

條紋的進(jìn)度條

可以使用 .progress-bar-striped 類來設(shè)置條紋進(jìn)度條：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>條紋的進(jìn)度條</h2>
  <p>可以使用 .progress-bar-striped 類來設(shè)置條紋進(jìn)度條：</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped" style="width:30%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
  </div>
  <br>
  <div class="progress">
    <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
  </div>
</div>

</body>
</html>

動畫進(jìn)度條

使用 .progress-bar-animated 類可以為進(jìn)度條添加動畫：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>動畫進(jìn)度條</h2>
  <p>使用 .progress-bar-animated 類可以為進(jìn)度條添加動畫：</p> 
  <div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
  </div>
</div>

</body>
</html>

混合色彩進(jìn)度條

進(jìn)度條可以設(shè)置多種顏色：

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap5 實(shí)例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
  <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<div class="container mt-3">
  <h2>混合色彩進(jìn)度條</h2>
  <p>進(jìn)度條可以設(shè)置多種顏色:</p> 
  <div class="progress">
    <div class="progress-bar bg-success" style="width:40%">
      安全線
    </div>
    <div class="progress-bar bg-warning" style="width:10%">
      警告線
    </div>
    <div class="progress-bar bg-danger" style="width:20%">
      危險(xiǎn)線
    </div>
  </div>
</div>

</body>
</html>

以上內(nèi)容是否對您有幫助：

← Bootstrap5 徽章（Badges）

Bootstrap5 加載效果 →

寫筆記

我要補(bǔ)充