bootstrap 组件之 进度条 滚动监控 旋转加载 消息推送框 组件学习总结

进度条: 引用外部的样式 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(){})

    推荐阅读