如何在Bootstrap中使用spinner组件

在Bootstrap中，您可以使用内置的spinner组件来表示加载或处理状态

1. 首先，确保已将Bootstrap CSS和JavaScript文件添加到项目中。在< head> 部分中包含以下链接：

<
    !-- CSS -->
    
<
    link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    

<
    !-- JavaScript -->
    <
    script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js">
    <
    /script>
    <
    script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js">
    <
    /script>
    

1. 若要创建一个基本的spinner，只需在HTML中添加以下代码：

<
    div class="spinner-border" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>
    

这将显示一个默认大小且具有边框样式的spinner。

1. 若要更改spinner的大小，可以添加.spinner-border-sm类来获得一个较小的spinner，或者在.spinner-border之后添加.spinner-border-lg类来获得一个较大的spinner。

例如：

<
    !-- Small spinner -->
    
<
    div class="spinner-border spinner-border-sm" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>
    

<
    !-- Large spinner -->
    
<
    div class="spinner-border spinner-border-lg" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>

1. 若要更改spinner的颜色，请为.spinner-border元素添加text-{ color} 类，其中{ color} 是Bootstrap支持的颜色名称（如primary、secondary、success等）。

例如：

<
    div class="spinner-border text-primary" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>
    

1. 若要创建一个带有文本的growing型spinner，请将.spinner-grow类与.spinner-grow-sm或.spinner-grow-lg类结合使用。

例如：

<
    !-- Small growing spinner -->
    
<
    div class="spinner-grow spinner-grow-sm text-primary" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>
    

<
    !-- Large growing spinner -->
    
<
    div class="spinner-grow spinner-grow-lg text-primary" role="status">
    
  <
    span class="visually-hidden">
    Loading...<
    /span>
    
<
    /div>
    

现在，您应该已经成功地在Bootstrap项目中实现了spinner组件。根据需要自定义颜色、大小和类型，以适应您的设计。

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