三、下拉菜单
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触发