bootstrap js插件篇——下拉菜单、滚动监测、选项卡

三、下拉菜单

3.1基本结构

3.2 触发方式

 注：1、测试时发现js触发的下拉菜单点时只出现无法消失，建议data-toggle触发

        2、如果触发下拉菜单的元素是一个链接元素，为了避免点击链接，页面跳到顶部，可以使用   

             data-target="#"来替代href="#"

四、滚动侦测

4.1 基本结构

4.2 data的其他属性

data-spy="scroll"，指定监控的导航条//必填

data-offset="0-100"，监控过程中滚动条偏移位置//测试发现并无太大作用

4.3 在body中加滚动监控器

4.4 js触发法式

<nav id="navbar-menu" class="navbar navbar-default navbar-static" role="navigation">  …</nav>

<div class="scrollspy" id="scrollspy">  …</div>

 $(function(){    $("#scrollspy").scrollspy({       

        target: "#navbar-menu"   

       });

 })

五、选项卡

5.1 基本结构

      注：1、data-target="对应内容面板的选择符(一般是ID)";

             2、如果是链接的话，还可以通过 href="对应内容面板的选择符(一般是ID)"

             3、将nav-tab换为nav-pill，data-toggle=“tab”换为data-toggle=”pill”,实现胶囊式选项卡

    

     4、tab-pane 后可跟fade 实现渐隐渐现的效果，其中第一个元素中还要加上in类名，表示初始状态为显示状态

    

5.2 js触发