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

 进度条：
    引用外部的样式 bootstrap 的css 即可
    使用方法： 使用类名 process
    <div class="contanier">
     <div class="row">
         <div class="col">
             // 高度需要加在父级上
             <div class="process">
                 // 进度条 需要使用宽度 例如： w-25 背景色放在里面的子元素
                 <div class="process-bar w-25 bg-success"></div>
             </div>
         </div>
     </div>
    </div>

    多个进度条： 只需要在子级添加想要的个数

    条纹进度条： 使用类名 process-bar-striped 在process-bar的后面
    
    动画进度条： 使用类名 process-bar-animated 在process-bar的后面添加即可


   ================ 滚动监控===========================
   滚动监控： 只能在导航中或者列表中使用
   引用外部：  引用3个js 1个css
   在导航里使用导航监控：
    <div class="container">
        <div class="row">
            <div class="col">
                <nav class="navbar bar-light bg-light" id="scroll">
                    <a href="" class="navbar-brand">Navbar</a>
                    <ul class="nav nav-pills">
                        <li class="nav-item"><a href="#item1" class="nav-link">item1</a></li>
                        <li class="nav-item"><a href="#item2" class="nav-link">item2</a></li>
                        <li class="nav-item">
                            // 下拉菜单
                            <a href="#item3" class="nav-link" data-toggle='dropdown'>item3</a>
                            <div class="dropdown-menu">
                                <a href="#dropmenu1" class="dropdown-item">dropmenu1</a>
                                <a href="#dropmenu2" class="dropdown-item">dropmenu2</a>
                                <a href="#dropmenu3" class="dropdown-item">dropmenu3</a>
                            </div>
                        </li>
                    </ul>
                </nav>

                // 使用滚动监听
                <div class="scrollBody" data-spy='scoll' data-target='#scroll' data-offset='0'>
                    <h1 id="item1"></h1>
                    <h1 id="item2"></h1>
                    <h1 id="item3"></h1>
                    <h1 id="dropmenu1"></h1>
                    <h1 id="dropmenu2"></h1>
                    <h1 id="dropmenu3"></h1>

                </div>
            </div>
        </div>
    </div>

    嵌套导航：
    垂直的列表，和上面的用法是一样的


    ================旋转加载================
    旋转加载： 
    外部引用bootstrap css 即可
    使用方法： 使用类名 spinner-border
    <div class="spinner-border"></div>

    // 背景 tex-success/info 等

    一闪一闪: 使用类名 spinner-grop

    // 大小：
    spinner-border-sm 只有变小
    spinner-group-sm 只有变小
    大尺寸通过行间样式可以变大尺寸

    // 放到按钮身上
    <button class="btn btn-primary" disabled>
        <span class="spinner-border"></span>loading
    </button>


    ===================推送消息框=====================
    推送消息框：使用类名toast
    外部应用2个js(不要popover) 1个css
    使用方法：
    <div class="toast">
     <div class="toast-title">
         <strong>Bootstrap</strong>
         <small class="mr-auto">11 min ago</small>
         <button class="close ml-2 mb-1" data-dismiss='toast'>
             <span>&times;</span>
         </button>
     </div>
     <div class="toast-body">body</div>
    </div>
    <script>
        // 需要初始化
        $(function(){
            $('.toast').toast('show')
        })
    </script>

   位置：使用的是弹性盒模型的位置

   属性
   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(){})