进度条:
引用外部的样式 bootstrap 的css 即可
使用方法: 使用类名 process
// 高度需要加在父级上
// 进度条 需要使用宽度 例如: w-25 背景色放在里面的子元素
多个进度条: 只需要在子级添加想要的个数条纹进度条: 使用类名 process-bar-striped 在process-bar的后面动画进度条: 使用类名 process-bar-animated 在process-bar的后面添加即可================ 滚动监控===========================
滚动监控: 只能在导航中或者列表中使用
引用外部:引用3个js 1个css
在导航里使用导航监控:
// 使用滚动监听
嵌套导航:
垂直的列表,和上面的用法是一样的================旋转加载================
旋转加载:
外部引用bootstrap css 即可
使用方法: 使用类名 spinner-border
// 背景 tex-success/info 等一闪一闪: 使用类名 spinner-grop// 大小:
spinner-border-sm 只有变小
spinner-group-sm 只有变小
大尺寸通过行间样式可以变大尺寸// 放到按钮身上
===================推送消息框=====================
推送消息框:使用类名toast
外部应用2个js(不要popover) 1个css
使用方法:
>Bootstrap
class="mr-auto">11 min ago
body
>
// 需要初始化
$(function(){
$('.toast').toast('show')
})
位置:使用的是弹性盒模型的位置属性
data-animation='true' 是否需要动画
data-autohide='true' 是否需要隐藏
data-delay='2000' 延迟关闭的时间,但是需要data-autohie='true'// 方法与事件
方法
显示
$('').toast('show')
隐藏
$('').toast('hide')事件
// 开始显示
$('').on('show.bs.toast',function(){})
// 完全显示
$('').on('shown.bs.toast',function(){})
// 开始隐藏
$('').on('hide.bs.toast',function(){})
// 完全隐藏
$('').on('hidden.bs.toast',function(){})
推荐阅读
- Bootstrap 5都有什么新功能
- 前端|bootstrap基础知识(五)--进度条
- buttons.css——可以与bootstrap融合的按钮样式库
- bootstrap图片样式
- bootstrap|Bootstrap打造特色进度条
- (转) bootstrap 加载进度条
- Bootstrap|Bootstrap 条纹进度条
- bootstrap-3-基本标签使用类
- Bootstrap|Bootstrap 基本进度条