Bootstrap的旋转器组件

昊虹AI笔记

于 2023-10-23 15:07:52 发布

阅读量335

点赞数

分类专栏： Bootstrap 文章标签： bootstrap

本文链接：https://blog.csdn.net/wenhao_ir/article/details/133979254

版权

Bootstrap 专栏收录该内容

50 篇文章 3 订阅

订阅专栏

旋转效果可以用来指示状态，比如页面的加载状态。

可以用类spinner-border实现普通旋转的旋转器效果。
用类spinner-grow实现渐渐变大的旋转器效果。

01-最基本的示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转器颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>第一种旋转器</h3>
<div class="spinner-border"></div>
<h3>第二种旋转器</h3>
<div class="spinner-grow"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

在这里插入图片描述

02-设置旋转器的颜色

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>旋转器颜色</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3>旋转器颜色</h3>
<div class="spinner-border text-primary"></div>
<div class="spinner-border text-secondary"></div>
<div class="spinner-border text-success"></div>
<div class="spinner-border text-danger"></div>
<div class="spinner-border text-warning"></div>
<div class="spinner-border text-info"></div>
<div class="spinner-border text-light"></div>
<div class="spinner-border text-dark"></div>
<br/>
<br/>
<div class="spinner-grow text-primary"></div>
<div class="spinner-grow text-secondary"></div>
<div class="spinner-grow text-success"></div>
<div class="spinner-grow text-danger"></div>
<div class="spinner-grow text-warning"></div>
<div class="spinner-grow text-info"></div>
<div class="spinner-grow text-light"></div>
<div class="spinner-grow text-dark"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

03-设置旋转器的大小

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置旋转器的大小</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">小的旋转器</h3>
<div class="spinner-border spinner-border-sm"></div>
<div class="spinner-grow spinner-grow-sm  ml-5"></div><hr/>
<h2 align="center">大的旋转器</h2>
<div class="spinner-border" style="width: 3rem; height: 3rem;"></div>
<div class="spinner-grow ml-5" style="width: 3rem; height: 3rem;"></div>
</body>
</html>

运行效果如下：
在这里插入图片描述

04-设置旋转器的对齐方式

略…

05-把旋转器放在按钮中

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>按钮旋转器</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">按钮旋转器</h3>
<button class="btn btn-danger" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
</button>
<button class="btn btn-danger" type="button" disabled>
    <span class="spinner-border spinner-border-sm"></span>
    Loading...
</button><hr/>
<button class="btn btn-success" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
</button>
<button class="btn btn-success" type="button" disabled>
    <span class="spinner-grow spinner-grow-sm"></span>
    Loading...
</button>
</body>
</html>