Bootstrap spinner与其他UI组件的搭配

Bootstrap Spinner 是一个内置的 CSS 动画，用于在加载过程中显示一个简单的旋转动画。它可以与其他 UI 组件搭配使用，以增强用户体验。以下是一些建议的搭配：

与按钮搭配：

<button type="button" class="btn btn-primary" disabled>  <span class="spinner-border" role="status" aria-hidden="true"></span>  正在加载...</button>

与表单控件搭配：

<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>

与卡片组件搭配：

<div class="card">  <div class="card-body">    <h5 class="card-title">卡片标题</h5>    <p class="card-text">这是一个简单的卡片示例，其中包含一个旋转动画。</p>    <a href="#" class="btn btn-primary">点击我</a>    <span class="spinner-border" role="status" aria-hidden="true" style="display: none;"></span>  </div></div>

与警告框组件搭配：

<div class="alert alert-warning" role="alert">  <strong>警告！</strong> 这是一个警告框，其中包含一个旋转动画。请谨慎操作。  <span class="spinner-border" role="status" aria-hidden="true" style="display: none;"></span></div>

与模态框组件搭配：

<!-- 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">模态框标题</h5>        <button type="button" class="close" data-dismiss="modal" aria-label="关闭">          <span aria-hidden="true">&times;</span>        </button>      </div>      <div class="modal-body">        这是一个模态框，其中包含一个旋转动画。        <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">关闭</button>        <button type="button" class="btn btn-primary">保存</button>      </div>    </div>  </div></div>

在这些示例中，我们使用了 Bootstrap 的禁用样式（disabled）以及 aria-hidden="true" 属性来隐藏旋转动画，以便在相关控件处于加载状态时提供更好的用户体验。