• 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

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

  • 相关阅读:
    【Java 进阶篇】HTML文本标签详解
    HEAD detached from origin/...导致push失败
    二分套网络流:ABC320G
    非零基础自学Java (老师:韩顺平) 第6章 数组、排序和查找 6.12 多维数组 - 二维数组 && 6.13 二维数组的使用
    Vue2 常用用法
    Django(6)路由
    【LeetCode】20. 有效的括号
    【机器学习合集】标准化与池化合集 ->(个人学习记录笔记)
    python统计秒数
    基于Java+SpringBoot+Vue前后端分离家政服务管理系统的设计与实现【Java毕业设计·文档报告·代码讲解·安装调试】
  • 原文地址:https://blog.csdn.net/wenhao_ir/article/details/133979254