前端學習-UI框架學習-Bootstrap5-012-進度條

ayubene發表於2024-03-29
前端UI框架boot

菜鳥教程連結

建立一個基本的進度條的步驟如下：

新增一個帶有 .progress 類的

。
接著，在上面的
內，新增一個帶有 class .progress-bar 的空的
。
新增一個帶有百分比表示的寬度的 style 屬性，例如 style="width:70%" 表示進度條在 70% 的位置。
注意：我發現如果這個contianer裡面不放文字，直接放progress的話，是不會顯示的

<template>
  <div class="container mt-3">
      <h3>進度80%進度進度進度80%</h3>
    <div class="progress">
      <div class="progress-bar" style="width: 80%"></div>
    </div>
  </div>
</template>

進度條高度

進度條高度預設為 16px。我們可以使用 CSS 的 height 屬性來修改

<template>
  <div class="container mt-3">
      <h3>進度80%進度進度進度80%</h3>
    <div class="progress" style="height: 30px">
      <div class="progress-bar" style="width: 80%"></div>
    </div>
  </div>
</template>

進度條標籤

新增文字

<template>
  <div class="container mt-3">
      <h3>進度80%進度進度進度80%</h3>
    <div class="progress" style="height: 30px">
      <div class="progress-bar" style="width: 80%"> 80% </div>
    </div>
  </div>
</template>

不同顏色的進度條

預設情況下進度條為藍色

<template>
  <div class="container mt-3">
      <h3>進度進度進度進度進度進度</h3>
    <div class="progress" style="height: 20px">
      <div class="progress-bar bg-warning" style="width: 80%"> 80% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar bg-danger" style="width: 70%"> 70% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar bg-info" style="width: 60%"> 60% </div>
    </div>
  </div>
</template>

條紋的進度條

可以使用 .progress-bar-striped 類來設定條紋進度條：

<template>
  <div class="container mt-3">
      <h3>進度進度進度進度進度進度</h3>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"> 80% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-striped bg-danger" style="width: 70%"> 70% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar bg-info" style="width: 60%"> 60% </div>
    </div>
  </div>
</template>

動畫進度條

使用 .progress-bar-animated 類可以為進度條新增動畫：
和條紋配套使用，條紋會動起來（像理髮店那個轉圈圈的）；如果沒有設定條紋，沒有什麼效果


<template>
  <div class="container mt-3">
      <h3>進度進度進度進度進度進度</h3>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"> 80% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 70%"> 70% </div>
    </div>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-animated bg-info" style="width: 60%"> 60% </div>
    </div>
  </div>
</template>

混合色彩進度條

進度條可以設定多種顏色：

<template>
  <div class="container mt-3">
      <h3>進度進度進度進度進度進度</h3>
    <div class="progress" style="height: 20px">
      <div class="progress-bar progress-bar-striped bg-warning" style="width: 30%"> 30% </div>
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" style="width: 20%"> 20% </div>
      <div class="progress-bar progress-bar-animated bg-info" style="width: 10%"> 10% </div>
    </div>
  </div>
</template>

相關文章