<div class="spinner-border"></div>
时间: 2023-08-13 15:14:48 浏览: 52
这行代码定义了一个 div 元素,并为它添加了一个 class 属性 `spinner-border`。根据这个类名,可以猜测这个 div 元素是用来实现旋转图标的,通常用于实现页面加载器。
`.spinner-border` 是 Bootstrap 框架中的一个 CSS 类,它可以实现一个圆形旋转图标,用于提示用户页面正在加载中。这个类会为元素添加以下样式:
```css
.spinner-border {
display: inline-block;
width: 2rem;
height: 2rem;
vertical-align: text-bottom;
border: .25em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation: spinner-border .75s linear infinite;
animation: spinner-border .75s linear infinite;
}
```
这些样式定义了旋转图标的大小、边框、动画等属性,从而实现了一个旋转的圆形图标。在 HTML 中使用这个类可以快速实现一个旋转图标,用于提示用户页面正在加载中。
相关问题
bootstrap等待效果
Bootstrap 提供了多种等待效果,可以使用其中的任何一种效果。
1. 旋转等待效果
```html
<div class="spinner-border" role="status">
<span class="sr-only">Loading...</span>
</div>
```
2. 转圈等待效果
```html
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
```
3. 脉冲等待效果
```html
<div class="spinner-grow" role="status">
<span class="sr-only">Loading...</span>
</div>
```
4. 多个点的等待效果
```html
<div class="spinner-border text-success" role="status">
<span class="sr-only">Loading...</span>
</div>
```
5. 自定义等待效果
```html
<div class="spinner-border text-danger" role="status">
<span class="sr-only">Loading...</span>
</div>
```
可以在上面的代码中修改 `text-primary`、`text-success`、`text-danger` 等属性来改变颜色。可以将 `spinner-border` 改为 `spinner-grow` 来使用不同的效果。
bootstrap 实现loading页面
Bootstrap是一个流行的前端框架,提供了许多组件和样式来快速构建页面。Bootstrap也提供了一些内置的loading效果,可以很方便地使用。下面是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Loading Page</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
```
这段代码使用了Bootstrap提供的spinner-border组件来实现loading效果,同时使用了d-flex、justify-content-center和align-items-center来居中显示。可以通过修改spinner-border的class来改变loading效果的颜色、大小等。注意要引入Bootstrap所需的CSS和JS文件。