Bootstrap spinner与其他UI组件的搭配

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

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">
    卡片标题<
    /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>
    

1. 与警告框组件搭配：

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

1. 与模态框组件搭配：

<
    !-- 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" 属性来隐藏旋转动画，以便在相关控件处于加载状态时提供更好的用户体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！