bootstrap 实现loading页面
时间: 2023-08-04 20:08:19 浏览: 130
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文件。