如何在Bootstrap中使用spinner组件

avatar
作者
猴君
阅读量:0

在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支持的颜色名称(如primarysecondarysuccess等)。

例如:

<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组件。根据需要自定义颜色、大小和类型,以适应您的设计。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!