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笔记-加载效果的实现相关推荐
- 1.2文字排版、颜色、表格、图像形状、Jumbotron、信息提示框、按钮、按钮组、徽章、加载效果、分页、列表组、卡片、下拉菜单、折叠
Bootstrap 5 默认设置 Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5. 此外,所有的 <p> 元素 margin-top ...
- layui的几个简单使用(简单弹窗,加载效果,移除加载效果)
1.加载效果和移除加载效果 function layuiLoading(msg){layui.use(['layer', 'form'], function(){index = layer.load( ...
- Jquery页面加载效果
1.说明 Jquery页面加载可实现异步请求时提示"请稍后,正在加载..."效果,同步请求不可用(即ajax async: false).本文地址:http://www.cnblo ...
- 如何让页面停止加载_Axure 案例:数值加载效果
今天要说到的数值加载效果,我们在使用App和网站的时候是经常见到的,尤其是金融类的产品.借贷类的产品等. 在我们打开某个页面,比如我的财富时,账户当中的金额会进行不断往上叠加,直到叠加到账户中的金额数 ...
- swiper 上滑触发_四种方式快速实现上滑触底加载效果
在智能小程序的开发过程中,上拉加载是一种十分常见的加载效果,最近也收到了一些开发者在开发上拉加载时遇到的问题,今天的内容就为您介绍一下如果想实现下述效果的上拉加载,我们需要如何去做. 以下是为大家总结 ...
- django:bootstrap table加载django返回的数据
bootstrap table加载表格数据有两类方式: 一种通过data属性的方式配置,一种是javascipt方式配置 这里看js配置方式: 1.当数据源为.json文件时 url参数写上json文 ...
- Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图
Qt文档阅读笔记-加载HeightMap(高度图)构造3D地形图 QHeightMapSurfaceDataProxy:是Q3DSurface的一个基本代理类. 他是专门加载高度图. 高度图是没有X, ...
- jQuery模拟原生态App上拉刷新下拉加载效果代码
以下任意均可: 1. jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. 原文:http://www.sucaij ...
- js图片加载效果(延迟加载+瀑布流加载)
概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...
最新文章
- Java集合:ConcurrentHashMap(JDK 1.7 JDK 1.8)
- android通过数组,流播放声音的方法,音频实时传输
- UVa 10375 - Choose and divide(唯一分解定理)
- 二、PHP基础——连接msql数据库进行增删改查操作 实战:新闻管理项目
- 排序算法总结(四)快速排序【QUICK SORT】
- java类转换异常,java.lang.ClassCastException: java.lang.Integer cannot be cast to java.lang.Long
- python xgboost_告别无聊循环!Python帮你自动化处理文件
- 【VC皮肤】SkinSharp 1.0.6.6的使用
- Preferences DataStore------JAVA
- echart表格颜色设置
- Linux 操作rar压缩包
- 电商运营从哪些方面做数据分析?
- excel 查找/替换 回车键
- (转发)线性代数的本质
- 实践是检验真理的唯一标准!
- BUUCTF_Crypto_异性相吸(yxxx)
- c#基础编程题第三题:求1-1/3+1/5-1/7+......共n项之和
- Linux下的触摸屏驱动
- Internet Download Manager6.40最高版电脑高速下载工具
- 浅谈消防设备电源监控系统的设计与应用
热门文章
- oracle 之索引,同义词 ,关键词,视图 ,存储过程,函数,触发器
- 【转载】JS获取浏览器版本信息
- 程序员都长得丑?颜值底线是程序员?
- 小证明题 编译原理--题目原型:
- JAVASCRIPT干了不下四五种工作
- Google推出了Python最牛逼的编辑器,你知道吗?
- c/c++永不过时的编程语言
- 第三节:创建一个Vue实例,超简单
- jfinal调用mysql存储过程 封装_jfinal如何调用存储过程?
- 怎么样才能学好java_单人拉丁舞应该怎么样才能学好?初学者需要做到的4点要求...