旋转效果可以用来指示状态,比如页面的加载状态。
可以用类spinner-border实现普通旋转的旋转器效果。
用类spinner-grow实现渐渐变大的旋转器效果。
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>
运行效果如下:
示例代码如下:
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>
运行效果如下:
示例代码如下:
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>
运行效果如下:
略…
示例代码如下:
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>
运行效果如下: