BootStrap笔记-加载效果的实现
生活随笔
收集整理的這篇文章主要介紹了
BootStrap笔记-加载效果的实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
程序如下：
代碼如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"> <!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script> <!-- 彈窗、提示、下拉菜單--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script> <!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head> <body><div class="container-fluid"><div class="spinner-border text-muted"></div><div class="spinner-border text-primary"></div><div class="spinner-border text-success"></div><div class="spinner-border text-info"></div><div class="spinner-border text-warning"></div><div class="spinner-border text-danger"></div><div class="spinner-border text-secondary"></div><div class="spinner-border text-dark"></div><div class="spinner-border text-light"></div><br/><div class="spinner-grow text-muted"></div><div class="spinner-grow text-primary"></div><div class="spinner-grow text-success"></div><div class="spinner-grow text-info"></div><div class="spinner-grow text-warning"></div><div class="spinner-grow text-danger"></div><div class="spinner-grow text-secondary"></div><div class="spinner-grow text-dark"></div><div class="spinner-grow text-light"></div><br/><button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span></button><button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span>Loading...</button><button class="btn btn-primary" disabled><span class="spinner-border spinner-border-sm"></span>Loading...</button><button class="btn btn-primary" disabled><span class="spinner-grow spinner-grow-sm"></span>Loading...</button></div> </body> </html>?解釋：
①如果只要圖標可以直接到div中的class中放spinner-xx（spinner-grow和spinner-border）；
②如果要放到button中，可以套一個button，再到里面放一個span；
總結
以上是生活随笔為你收集整理的BootStrap笔记-加载效果的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript变量提升/函数提升
- 下一篇： spring 数组中随机取几个_准备几个