Boostrap4 学习笔记 ——手风琴折叠，模态框，弹出框，提示框，滚动监听

说明

本文每个bootstra4的class用法和HTML结构相关
结构和样式的表明用css选择器简单表示
其中[]代表可选
||代表或者
其中data-是H5中数据存储的方式，
在bootstrap4中不能缺省，用[]进行表示，会和class分开

折叠

.button[data-toggle="collapse" data-target="#demo"]
div#demo.collapse[.show || .fade][data-parent="#parentBox"(可选)]

最简手风琴效果

    

        First
        
This is the first demo
    
    

        Second
        
This is the second demo
    
    

        Third
        
This is the third demo
    

卡片式手风琴

  

    
      选项一
    
  
  

    

      #1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    
  


  

    
    选项二
  
  
  

    

      #2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    
  


  

    
      选项三
    
  
  

    

      #3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
    
  

模态框

button.btn.btn-primary[type="button" data-toggle="modal" data-target="#myModal"]
div.modal.fade.#myModal
    div.modal-dialog[.modal-sm|lg]
        div.modal-content
            div.modal-header
                h4.modal-title{this is the header}
                button.close[type="button" data-dismiss="modal"]{×}
            div.modal-body
            div.modal-footer
                button.close[type="button" data-dismiss="modal"]{关闭}

提示框

鼠标移动到这儿显示
$(function(){
    $('[data-toggle="tooltip"]').tooltip()
})

弹出框

多次点我
$('[data-toggle="popover"]').popover()

data-trigger:focus>>>点击其他地方可关闭弹出框，默认点击再次元素才能关闭
                    hover>>>悬浮于元素显示，移开鼠标后消失

滚动监听

...
  

    
Section 1
    ...


  
Section 1
  
Try to scroll this page and look at the navigation bar while scrolling!

...