Bootstrap spinner的常見用法有哪些

小樊
84
2024-08-29 08:03:56

Bootstrap 是一個(gè)流行的前端框架，它提供了一系列預(yù)定義的樣式和組件，用于快速構(gòu)建網(wǎng)頁(yè)

  1. 按鈕加載狀態(tài)：當(dāng)用戶點(diǎn)擊按鈕時(shí)，可以在按鈕內(nèi)顯示一個(gè) spinner，表示正在處理請(qǐng)求。這可以提高用戶體驗(yàn)，告知用戶請(qǐng)求正在進(jìn)行中。
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  加載中...
</button>
  1. 頁(yè)面加載提示：在頁(yè)面或部分區(qū)域顯示一個(gè) spinner，表示內(nèi)容正在加載。這可以提高用戶體驗(yàn)，避免用戶在等待過(guò)程中感到困惑。
<div class="d-flex justify-content-center">
  <div class="spinner-border" role="status">
    <span class="sr-only">加載中...</span>
  </div>
</div>
  1. 自定義顏色和大?。和ㄟ^(guò)修改 spinner 的 CSS 類，可以自定義其顏色和大小。例如，創(chuàng)建一個(gè)藍(lán)色的、更大的 spinner：
  .custom-spinner {
    color: blue;
    width: 5rem;
    height: 5rem;
  }
</style>

<div class="spinner-border custom-spinner" role="status">
  <span class="sr-only">加載中...</span>
</div>
  1. 使用 Grow spinner：除了默認(rèn)的 Border spinner，Bootstrap 還提供了一種 Grow spinner 效果。要使用 Grow spinner，只需將 spinner-border 類替換為 spinner-grow 類。
<div class="spinner-grow" role="status">
  <span class="sr-only">加載中...</span>
</div>
  1. 結(jié)合 JavaScript 和 AJAX：在處理異步請(qǐng)求時(shí)，可以結(jié)合 JavaScript 和 AJAX 動(dòng)態(tài)顯示和隱藏 spinner。這樣可以確保 spinner 僅在數(shù)據(jù)加載或處理時(shí)顯示。
// 顯示 spinner
function showSpinner() {
  document.getElementById("spinner").style.display = "block";
}

// 隱藏 spinner
function hideSpinner() {
  document.getElementById("spinner").style.display = "none";
}

// 發(fā)送 AJAX 請(qǐng)求
function fetchData() {
  showSpinner();
  fetch("/api/data")
    .then((response) => response.json())
    .then((data) => {
      // 處理數(shù)據(jù)
      hideSpinner();
    })
    .catch((error) => {
      // 處理錯(cuò)誤
      hideSpinner();
    });
}

這些常見用法展示了如何在不同場(chǎng)景下使用 Bootstrap spinner。根據(jù)實(shí)際需求，可以靈活地調(diào)整 spinner 的樣式和行為。

0 踩