溫馨提示×

Bootstrap spinner與其他UI組件的搭配

小樊
82
2024-08-29 08:07:52
欄目: 編程語言

Bootstrap Spinner 是一個(gè)內(nèi)置的 CSS 動畫，用于在加載過程中顯示一個(gè)簡單的旋轉(zhuǎn)動畫。它可以與其他 UI 組件搭配使用，以增強(qiáng)用戶體驗(yàn)。以下是一些建議的搭配：

  1. 與按鈕搭配：
<button type="button" class="btn btn-primary" disabled>
  <span class="spinner-border" role="status" aria-hidden="true"></span>
  正在加載...
</button>
  1. 與表單控件搭配：
<div class="form-group">
  <label for="inputEmail">郵箱地址</label>
  <input type="email" class="form-control" id="inputEmail" placeholder="請輸入郵箱地址" disabled>
  <span class="spinner-border" role="status" aria-hidden="true"></span>
</div>
  1. 與卡片組件搭配：
<div class="card">
  <div class="card-body">
    <h5 class="card-title">卡片標(biāo)題</h5>
    <p class="card-text">這是一個(gè)簡單的卡片示例，其中包含一個(gè)旋轉(zhuǎn)動畫。</p>
    <a href="#" class="btn btn-primary">點(diǎn)擊我</a>
    <span class="spinner-border" role="status" aria-hidden="true" style="display: none;"></span>
  </div>
</div>
  1. 與警告框組件搭配：
<div class="alert alert-warning" role="alert">
  <strong>警告！</strong> 這是一個(gè)警告框，其中包含一個(gè)旋轉(zhuǎn)動畫。請謹(jǐn)慎操作。
  <span class="spinner-border" role="status" aria-hidden="true" style="display: none;"></span>
</div>
  1. 與模態(tài)框組件搭配：
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">模態(tài)框標(biāo)題</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="關(guān)閉">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        這是一個(gè)模態(tài)框，其中包含一個(gè)旋轉(zhuǎn)動畫。
        <span class="spinner-border" role="status" aria-hidden="true" style="display: none;"></span>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">關(guān)閉</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

在這些示例中，我們使用了 Bootstrap 的禁用樣式（disabled）以及 aria-hidden="true" 屬性來隱藏旋轉(zhuǎn)動畫，以便在相關(guān)控件處于加載狀態(tài)時(shí)提供更好的用戶體驗(yàn)。

0 踩