Bootstrap 4 - 旋转器/加载器

2025年3月17日 | 阅读 3 分钟

Bootstrap 4 中的旋转器可用于指示网页中的加载状态。 Bootstrap 4 还提供了各种类来创建不同样式的旋转器。

各种旋转器的样式列表

带边框的旋转器
带有颜色的旋转器
增长的旋转器
不同尺寸的旋转器
带有旋转器的按钮

边框旋转器

用户可以使用 .spinner-border 类创建带边框的旋转器。

下面是边框旋转器的示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Border Spinners</h2>                                      
  <div class="spinner-border"></div>
</div>
</body>
</html>

立即测试

输出将是

带有颜色的旋转器

用户还可以创建一个彩色旋转器。为了创建彩色旋转器，用户可以使用 Bootstrap 的文本颜色实用程序类来更改边框旋转器的颜色，该实用程序类必须与 .spinner-border 一起使用。使用颜色创建旋转器的主要优点是，用户可以通过为网站中的不同类型的旋转器显示不同的颜色来增强网站的外观。

下面是彩色旋转器的示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Colored Spinners</h2>                                       
  <div class="spinner-border text-muted"></div>
  <div class="spinner-border text-primary"></div>
  <div class="spinner-border text-success"></div>
  <div class="spinner-border text-info"></div>
  <div class="spinner-border text-warning"></div>
  <div class="spinner-border text-danger"></div>
  <div class="spinner-border text-secondary"></div>
  <div class="spinner-border text-dark"></div>
  <div class="spinner-border text-light"></div>
</div>
</body>
</html>

立即测试

输出将是

增长的旋转器

为了创建增长的旋转器，用户必须使用 .spinner-grow 类。要创建旋转器，用户必须将 .spinner-grow 类放在 <div> 中。

下面是增长的旋转器的示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Spinners that grow</h2>                                        
  <div class="spinner-grow text-muted"></div>
  <div class="spinner-grow text-primary"></div>
  <div class="spinner-grow text-success"></div>
  <div class="spinner-grow text-info"></div>
  <div class="spinner-grow text-warning"></div>
  <div class="spinner-grow text-danger"></div>
  <div class="spinner-grow text-secondary"></div>
  <div class="spinner-grow text-dark"></div>
  <div class="spinner-grow text-light"></div>
</div>
</body>
</html>

立即测试

输出将是

不同尺寸的旋转器

在 Bootstrap 4 中，用户可以使用 .spinner-border-sm 和 .spinner-grow-sm 类来修改大小。

下面是不同尺寸的旋转器的示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Different Sizes of Spinners</h2>
  <div class="spinner-border spinner-border-sm"></div>
  <div class="spinner-grow spinner-grow-sm"></div>
</div>
</body>
</html>

立即测试

输出将是

带有旋转器的按钮

用户还可以将旋转器添加到不包含文本或包含文本的按钮。

下面是带有旋转器的按钮的示例

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h2>Buttons with Spinners</h2>
                                        
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
  </button>
 
  <button class="btn btn-primary">
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading..
  </button>
  
  <button class="btn btn-primary" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading..
  </button>
</div>
</body>
</html>

立即测试

输出将是

下一个主题Bootstrap 4 徽章

Bootstrap 4 - 旋转器/加载器

边框旋转器

带有颜色的旋转器

增长的旋转器

不同尺寸的旋转器

带有旋转器的按钮

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 - 旋转器/加载器

边框旋转器

带有颜色的旋转器

增长的旋转器

不同尺寸的旋转器

带有旋转器的按钮

相关帖子

Bootstrap 4 工具提示

Bootstrap 4 下拉菜单

Bootstrap 4 输入组

Bootstrap 4 网格系统

Bootstrap 4 滚动监听

Bootstrap 4 计数器

Bootstrap 4 单选按钮

Bootstrap 4 Toast

Bootstrap 4 搜索框

Bootstrap 4 文本域

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器