<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单--属性声明式方法（一）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.scrollspy-example{
height:500px;
font-size:20px;
overflow:auto;
}
</style>
</head>
<body >
<div class="bs-docs-section">
<h1 class="page-header" id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example2">
<div class="container-fluid">
<div class="navbar-header">
<button data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> //button部分的效果是：点击Toggle navigation页面将跳转到首页
<a href="#" class="navbar-brand">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li> //href的值应与所连接内容的id相一致
<li class="dropdown">
<a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" id="navbarDrop1" href="#">Dropdown <span class="caret"></span></a>
<ul aria-labelledby="navbarDrop1" role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#one">one</a></li>
<li><a tabindex="-1" href="#two">two</a></li> //此处href同上
<li class="divider"></li> //添加一条下划线
<li><a tabindex="-1" href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
<h4 id="fat">@fat</h4>
<p>.......</p>
<h4 id="mdo">@mdo</h4>
<p>.......</p>
<h4 id="one">one</h4>
<p>.........</p>
<h4 id="two">two</h4>
<p>........</p>
<h4 id="three">three</h4>
<p>.......</p>
<p>......</p>
</div>
</div><!-- /example -->
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>下拉菜单--属性声明式方法（一）</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.scrollspy-example{
height:500px;
font-size:20px;
overflow:auto;
}
</style>
</head>
<body >
<div class="bs-docs-section">
<h1 class="page-header" id="scrollspy">ScrollSpy <small>scrollspy.js</small></h1>
<h2 id="scrollspy-examples">Example in navbar</h2>
<p>The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.</p>
<div class="bs-example">
<nav role="navigation" class="navbar navbar-default navbar-static" id="navbar-example2">
<div class="container-fluid">
<div class="navbar-header">
<button data-target=".bs-example-js-navbar-scrollspy" data-toggle="collapse" type="button" class="navbar-toggle collapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> //button部分的效果是：点击Toggle navigation页面将跳转到首页
<a href="#" class="navbar-brand">Project Name</a>
</div>
<div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
<ul class="nav navbar-nav">
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li> //href的值应与所连接内容的id相一致
<li class="dropdown">
<a aria-expanded="false" role="button" data-toggle="dropdown" class="dropdown-toggle" id="navbarDrop1" href="#">Dropdown <span class="caret"></span></a>
<ul aria-labelledby="navbarDrop1" role="menu" class="dropdown-menu">
<li><a tabindex="-1" href="#one">one</a></li>
<li><a tabindex="-1" href="#two">two</a></li> //此处href同上
<li class="divider"></li> //添加一条下划线
<li><a tabindex="-1" href="#three">three</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
//底下为所连接的内容
<div class="scrollspy-example" data-offset="0" data-target="#navbar-example2" data-spy="scroll"><h4 id="fat">@fat</h4>
<p>.......</p>
<h4 id="mdo">@mdo</h4>
<p>.......</p>
<h4 id="one">one</h4>
<p>.........</p>
<h4 id="two">two</h4>
<p>........</p>
<h4 id="three">three</h4>
<p>.......</p>
<p>......</p>
</div>
</div><!-- /example -->
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.min.js"></script>
</body>
</html>
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
