Bootstrap的旋转器组件

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

可以用类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>

运行效果如下:
Bootstrap的旋转器组件_第1张图片
Bootstrap的旋转器组件_第2张图片
Bootstrap的旋转器组件_第3张图片

Bootstrap的旋转器组件_第4张图片

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>

运行效果如下:
Bootstrap的旋转器组件_第5张图片

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>

运行效果如下:
Bootstrap的旋转器组件_第6张图片

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>

运行效果如下:
Bootstrap的旋转器组件_第7张图片

你可能感兴趣的:(Bootstrap,bootstrap)