Bootstrap 简明教程
Bootstrap - Spinners
本章将讨论 Bootstrap 旋转器。Bootstrap 旋转器使用 .spinner 类显示项目加载状态。
How it works
-
Bootstrap 旋转器使用 HTML 和 CSS 显示项目的加载状态。构建它们不需要 JavaScript。
-
需要自定义 JavaScript 来切换其可见性。外观、对齐方式和尺寸都可以使用 Bootstrap 的实用程序类进行轻松自定义。
-
每个加载器都有 role="status" 和一个嵌套的 <span class="visually-hidden">Loading…​ </span > ,以方便访问。
Border spinner
使用 .spinner-border 类来创建轻量级的旋转器/加载指示器。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Border Spinner</h3>
<div class="spinner-border mt-2" role="status">
<span class="spinner-grow text-white spinner-grow-sm" role="status"></span>
<span class="visually-hidden"></span>
</div>
</body>
</html>
Colors
边框旋转器使用 currentColor 作为其 border-color ,它可以使用 text color utilities 进行自定义。对标准旋转器使用文本颜色实用程序。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Colored Spinner</h3>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
Growing spinner
-
您可以将旋转器的旋转类型更改为增长旋转器。从技术上讲,它不会旋转,而是会重复增长。
-
使用 .spinner-grow 类来创建增长旋转器。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Growing Spinner</h3>
<div class="spinner-grow" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
此旋转控件使用 currentColor 通过 text color utilities 更改其外观。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Growing color Spinners</h3>
<div class="spinner-grow text-primary" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-secondary" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-info" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-dark" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-warning" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-success" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-light" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow text-danger" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
Margin
对于简单的间距,请使用 margin utilities ,例如 .m-4 。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h3>Margin</h3>
<div class="spinner-border m-4" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
Placement
Bootstrap 旋转控件可以使用 flexbox utilities 、 float utilities 或 text alignment utilities 放置。
Flex
使用 Flexbox 放置类来设置旋转控件的位置。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="text-center">Flex placement at start, center, end</h5>
<div class="d-flex justify-content-start">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="d-flex justify-content-end">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</body>
</html>
可以使用 Flexbox 放置来更改旋转控件的对齐方式。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="d-flex align-items-end mt-2">
<h5 class="text-center">Flex placement</h5>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>
</body>
</html>
Float
使用 Float 放置类来设置旋转控件的位置。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5>Float placement at start and end</h5>
<div class="clearfix float-start mt-2">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="clearfix float-end">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</body>
</html>
Text align
使用 .text-align 放置类来设置旋转控件项目的位置。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="text-center">Text Align at start, center, end</h5>
<div class="text-start">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
<div class="text-end">
<div class="spinner-border" role="status">
<span class="visually-hidden"></span>
</div>
</div>
</body>
</html>
Size
旋转控件大小可用于创建不同大小的旋转控件。
-
对于 small-size spinners ,请使用 .spinner-border-sm 和 .spinner-grow-sm 类。
-
对于 medium-size spinners ,请使用 .spinner-border-md 和 .spinner-grow-md 类。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="mt-2">Small Size Spinner</h5>
<div class="spinner-border spinner-border-sm text" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden"></span>
</div>
<h5 class="mt-2">Medium Size Spinner</h5>
<div class="spinner-border spinner-border-md" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow spinner-grow-md" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
要根据需要修改维度,请使用自定义 CSS 或行内样式。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="mt-2">Spinner using custom CSS</h5>
<div class="spinner-border" style="width: 2rem; height: 2rem;" role="status">
<span class="visually-hidden"></span>
</div>
<div class="spinner-grow" style="width: 2rem; height: 2rem;" role="status">
<span class="visually-hidden"></span>
</div>
</body>
</html>
Buttons
-
按钮旋转控件用于显示当前正在进行处理的操作。如果需要,请将旋转控件元素文本替换为按钮文本。
-
使用 .btn 和 .spinner-border 类创建旋转控件按钮。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="mt-2">Spinner Buttons</h5>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden"></span>
</button>
<button class="btn btn-secondary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Wait...
</button>
</body>
</html>
使用 .btn 和 .spinner-grow 类创建增大尺寸的旋转控件按钮。
Example
您可以使用*编辑和运行*选项编辑并尝试运行此代码。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Spinners</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<h5 class="mt-2">Growing Spinner Buttons</h5>
<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">Wait...</span>
</button>
<button class="btn btn-secondary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
Wait...
</button>
</body>
</html>