<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>附加导航插件</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
ul.nav-tabs{
width: 140px;
margin-top: 20px;
border-radius: 4px;
border: 1px solid #ddd;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
}
ul.nav-tabs li{
margin: 0;
border-top: 1px solid #ddd;
}
ul.nav-tabs li:first-child{
border-top: none;
}
ul.nav-tabs li a{
margin: 0;
padding: 8px 16px;
border-radius: 0;
}
ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
color: #fff;
background: #0088cc;
border: 1px solid #0088cc;
}
ul.nav-tabs li:first-child a{
border-radius: 4px 4px 0 0;
}
ul.nav-tabs li:last-child a{
border-radius: 0 0 4px 4px;
}
ul.nav-tabs.affix{
top: 30px;
}
</style>
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
<div class="jumbotron">
<h1>Bootstrap Affix</h1>
</div>
<div class="row">
<div class="col-xs-3" id="myScrollspy">
<ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
<li class="active"><a href="#section-1">第一部分</a></li>
<li><a href="#section-2">第二部分</a></li>
<li><a href="#section-3">第三部分</a></li>
<li><a href="#section-4">第四部分</a></li>
<li><a href="#section-5">第五部分</a></li>
</ul>
</div>
<div class="col-xs-9">
<h2 id="section-1">第一部分</h2>
<p>...</p>
<p>...</p>
<hr>
<h2 id="section-2">第二部分</h2>
<p>...</p>
<hr>
<h2 id="section-3">第三部分</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<hr>
<h2 id="section-4">第四部分</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<hr>
<h2 id="section-5">第五部分</h2>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
</div>
</div>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body>
</html>
效果图：
相关推荐
下面，我们将深入探讨Bootstrap导航菜单的核心概念、jQuery插件的作用以及如何利用这些资源来提升你的网页设计。 首先，让我们理解Bootstrap导航菜单的基础。Bootstrap的导航菜单主要由.navbar组件构成，它可以是...
在这个主题“23种bootstrap导航菜单布局”中，我们将深入探讨如何利用Bootstrap的组件和jQuery插件来创建多种导航菜单效果。 首先，Bootstrap的导航菜单主要基于`<nav>`和`<ul>`元素构建，通过应用不同的类（如`....
在第8章“输入框和导航组件”中，我们将深入探讨Bootstrap如何处理表单元素和导航结构，这两部分是任何网页设计中的关键组成部分。 **一、输入框组件** Bootstrap的输入框组件（Form Controls）为创建美观且功能...
Bootstrap 附加导航（Affix）插件是一种强大的工具，它允许开发者将页面上的某个 `<div>` 元素固定在特定位置，以便用户在滚动页面时始终保持可见。这种功能在创建侧边栏导航、页眉或页脚等元素时非常有用，可以提供...
Bootstrap分页插件是前端开发中常用的一种工具，它基于Twitter Bootstrap框架，为网页提供美观且功能丰富的分页导航。这个压缩包文件“bootstrap分页插件.zip”包含了一个名为“317482454-tm.pagination-195db9b”的...
Bootstrap固定顶部导航菜单自动隐藏插件是Web开发中一个实用的工具，尤其对于那些希望优化网页界面用户体验的设计者。这个插件专为Bootstrap框架设计，兼容Bootstrap 4和Bootstrap 3，使得在页面滚动时导航栏能根据...
Bootstrap分页插件是一种基于流行的前端框架Bootstrap设计的页面导航工具，主要用于在大量数据或内容中实现分块显示，提供用户友好的翻页体验。在Web应用中，当需要展示的数据超过一个页面所能容纳的范围时，分页就...
Bootstrap4 for AxureRP9 插件是一款专为Axure RP9设计的工具，它将流行的前端框架Bootstrap 4引入到原型设计过程中，使设计师能够更便捷地创建响应式、移动优先的网页原型。Bootstrap 4是目前最广泛使用的前端框架...
插件描述：基于bootstrap的进度插件。参见实例：http://www.jq22.com/jquery-info4654
Bootstrap响应式侧边栏导航菜单是现代网页设计中不可或缺的一部分，尤其在移动优先的设计策略下。Bootstrap框架以其灵活性和易用性，成为了构建此类菜单的首选工具。本资源提供的代码正是利用Bootstrap，jQuery以及...
Bootstrap时间轴插件是基于流行的前端开发框架Bootstrap构建的一个组件，它主要用于展示一系列事件或历程，以直观的时间顺序排列。这种插件对于网站或者应用来说，尤其适合展示历史、项目进度、用户活动流或者新闻...
Bootstrap 图片视频一体播放器插件是一种用于网页的交互式媒体组件，它结合了图片浏览和视频播放功能，为用户提供了一种统一且便捷的多媒体体验。这个插件的设计灵感来源于新浪微博，利用了Bootstrap这一流行的前端...
Bootstrap3 是一个流行的前端开发框架，由 Twitter 开发并开源，它提供了丰富的预定义样式、组件和JavaScript插件，使得创建响应式、移动优先的网页变得简单易行。在这个特定的场景中，我们关注的是Bootstrap3中的...
在基于Bootstrap的可拖拽式网格系统插件——jquery.gridstrap.js中，我们能够实现更灵活的布局设计，使用户可以直观地通过拖放操作调整页面元素的位置。 该插件的核心功能是构建一个基于Bootstrap的响应式网格系统...
在给定的压缩包文件中，我们很可能找到了与Bootstrap左侧导航相关的js（JavaScript）和css（样式表）插件。这些插件可能是开发者为了实现自定义的侧边栏导航效果而编写的，可能包括折叠菜单、平滑滚动、动态加载等...
在Bootstrap 4中，实现带有隐藏按钮的侧边导航栏是一项常见的需求，尤其在创建现代网页设计时。这样的导航栏可以节省空间，提升用户体验，特别是在移动设备上。 首先，要创建一个侧边导航栏，我们需要引入Bootstrap...
Bootsnav则是在Bootstrap基础上进一步扩展的导航插件，增加了如多级菜单、滚动效果等特性。 在创建多级导航菜单时，主要涉及以下步骤： 1. **HTML结构**：首先，你需要在HTML中定义导航菜单的基本结构。这通常包括...
Bootstrap Toast消息框插件是基于流行的前端框架Bootstrap开发的一个组件，用于在网页上优雅地展示短暂的通知或消息。这些消息通常包含重要的信息、警告或成功提示，会在用户界面上短暂出现，然后自动消失，或者通过...
Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级...