Bootstrap ScrollSpy(滚动监听)
描述
在本教程中,您将看到如何使用 Bootstrap ScrollSpy(滚动监听)插件来根据滚动条的位置自动更新对应的导航目标。
什么是必需的
您必须饮用 Jquery、Bootstrap CSS 和一个 JavaScript 文件 - bootstrap-scrollspy.js,位于 Bootstrap 主文件夹中的 'js' 文件夹下。如果您使用了下拉菜单,您还需要在 HTML 文件中引用 bootstrap-dropdown.js。
Jquery 位于您的 Bootstrap 主文件夹中的 docs > assets > js 下,名为 jquery.js。或者您可以直接访问 https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js 下载 Jquery。
下面是本教程最后创建的输出结果:
在您的网站中使用 Bootstrap ScrollSpy(滚动监听)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap ScrollSpy Example</title>
<meta name="description" content="Twitter Bootstrap ScrollSpy example">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
.scrollspy-example {
height: 200px;
overflow: auto;
position: relative;
}
</style>
</head>
<body>
<div class="span9 columns">
<h2>The links of the following navbar is going to be highlighted</h2>
<p>Scroll the area below and watch the navigation update. The dropdown sub items will be highlighted as well. Try
it!</p>
<div id="navbarExample" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">w3resource</a>
<ul class="nav">
<li class="active"><a href="#php">PHP</a></li>
<li class=""><a href="#js">JS</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Databases<b class="caret"></b></a>
<ul class="dropdown-menu">
<li class=""><a href="#mysql">MySQL</a></li>
<li class=""><a href="#pgsql">PostgreSQL</a></li>
<li class=