关键词搜索

源码搜索 ×
×

BootStrap笔记-加载效果的实现

发布2022-01-17浏览1164次

详情内容

程序如下：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.     <div class="container-fluid">
  20.  
  21.         <div class="spinner-border text-muted"></div>
  22.         <div class="spinner-border text-primary"></div>
  23.         <div class="spinner-border text-success"></div>
  24.         <div class="spinner-border text-info"></div>
  25.         <div class="spinner-border text-warning"></div>
  26.         <div class="spinner-border text-danger"></div>
  27.         <div class="spinner-border text-secondary"></div>
  28.         <div class="spinner-border text-dark"></div>
  29.         <div class="spinner-border text-light"></div>
  30.  
  31.         <br/>
  32.  
  33.         <div class="spinner-grow text-muted"></div>
  34.         <div class="spinner-grow text-primary"></div>
  35.         <div class="spinner-grow text-success"></div>
  36.         <div class="spinner-grow text-info"></div>
  37.         <div class="spinner-grow text-warning"></div>
  38.         <div class="spinner-grow text-danger"></div>
  39.         <div class="spinner-grow text-secondary"></div>
  40.         <div class="spinner-grow text-dark"></div>
  41.         <div class="spinner-grow text-light"></div>
  42.  
  43.         <br/>
  44.  
  45.         <button class="btn btn-primary">
  46.             <span class="spinner-border spinner-border-sm"></span>
  47.         </button>
  48.  
  49.         <button class="btn btn-primary">
  50.             <span class="spinner-border spinner-border-sm"></span>
  51.             Loading...
  52.         </button>
  53.  
  54.         <button class="btn btn-primary" disabled>
  55.             <span class="spinner-border spinner-border-sm"></span>
  56.             Loading...
  57.         </button>
  58.  
  59.         <button class="btn btn-primary" disabled>
  60.             <span class="spinner-grow spinner-grow-sm"></span>
  61.             Loading...
  62.         </button>
  63.  
  64.     </div>
  65. </body>
  66. </html>

 解释：

①如果只要图标可以直接到div中的class中放spinner-xx（spinner-grow和spinner-border）；

②如果要放到button中，可以套一个button，再到里面放一个span；

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载