来源于菜鸟教程
一、汉堡菜单
1.折叠的内容必须包裹在带有 class .collapse、.navbar-collapse 的 <div> 中。
2.折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。
3.三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。
二、滚动监听事件
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
1.向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target（ id="myScrollspy"/data-toggle="#myScrollspy"/data-target=".bs-js-navbar-scrollspy"）。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-toggle="#myScrollspy">
<div class="banner row"id="myScrollspy">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<!-- data-toggle="collapse"：要实现的操作
#example-navbar-collapse：要对实现操作的元素-->
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse"
data-target=".bs-js-navbar-scrollspy">
<!--汉堡按钮-->
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#home">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#ios">iOS</a></li>
<li><a href="#svn">SVN</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="main" style="margin-top: 50px">
<h4 id="ios">iOS</h4>
.
.
.
.
.
.
.
.
<h4 id="svn">SVN</h4>
.............
</div>
3913
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
