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