• 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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

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

    在这里插入图片描述

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32

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

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19

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

    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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

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

  • 相关阅读:
    前端做自动化测试 —— 用TDD的思想做组件测试
    在 Swift 图表中使用 Foudation 库中的测量类型
    基于MATLAB的人民币识别系统
    三、CAS原理与原子类
    张量维度改变总结
    MySQL锁:全局锁、表级锁和行锁
    nginx-反向代理缓存
    什么是it运维工单系统?有哪些应用价值?
    IntelliJ IDEA 中的控制台输出日志中文乱码之解决办法
    Ubuntu上安装Anaconda
  • 原文地址:https://blog.csdn.net/wenhao_ir/article/details/133979254