<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>导航菜单</title>
<link href="../bootstrap/css/bootstrap.css" rel="stylesheet"
type="text/css">
<!--[if lt IE 9]>
<script src="../bootstrap/js/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<h1 class="page-header">导航</h1>
<div class="navbar navbar-fixed-top" >
<!-- navbar-fixed-top 让导航菜单固定显示页面的最上方-->
<!-- navbar-fixed-bottom 让导航菜单固定显示页面的最下方方-->
<div class="navbar-inner">
<div class="container">
<a class="brand" href="Bootstrap"></a>
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">项目一</a></li>
<li><a href="#">项目二</a></li>
</ul>
<form action="" class="navbar-search">
<input type="text" class="search-query" />
</form>
<ul class="nav pull-right">
<li><a href="#">登录</a></li>
<li class="divider-vertical"></li>
<li><a href="#">注册</a></li>
</ul>
</div>
</div>
</div>
<div style="height: 1580px"></div>
</div>
<script src="../bootstrap/js/jquery-1.7.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.js"></script>
</body>
</html>
分享到：
相关推荐
在这个主题“23种bootstrap导航菜单布局”中，我们将深入探讨如何利用Bootstrap的组件和jQuery插件来创建多种导航菜单效果。 首先，Bootstrap的导航菜单主要基于`<nav>`和`<ul>`元素构建，通过应用不同的类（如`....
下面，我们将深入探讨Bootstrap导航菜单的核心概念、jQuery插件的作用以及如何利用这些资源来提升你的网页设计。 首先，让我们理解Bootstrap导航菜单的基础。Bootstrap的导航菜单主要由.navbar组件构成，它可以是...
Bootstrap是一款广泛应用于网页...总之，这些Bootstrap导航菜单模板为开发者提供了丰富的设计选择，无论你是初学者还是经验丰富的开发者，都能从中找到灵感和实用代码，快速构建出功能完善且视觉效果出色的网页导航。
该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗...
JQuery.hoverify-bootnav是一款Bootstrap导航菜单动画视觉增强jQuery插件。该插件在Bootstrap导航菜单的基础上，当鼠标滑过导航菜单项时，可以制作出非常炫酷的遮罩层滑动效果。
JQuery.hoverify-bootnav是一款Bootstrap导航菜单动画视觉增强jQuery插件。该插件在Bootstrap导航菜单的基础上，当鼠标滑过导航菜单项时，可以制作出非常炫酷的遮罩层滑动效果。
Bootstrap的导航菜单主要基于`<nav>`、`<ul>`和`<li>`元素，配合类名如`.navbar`、`.nav`、`.dropdown`等来实现各种效果。对于下拉菜单，我们需要使用`.dropdown-menu`类来创建菜单项的下拉列表。 创建一个基本的二...
本文实例为大家分享了Bootstrap导航菜单的具体代码，供大家参考，具体内容如下 效果图： 点击菜单的箭头有点小问题，后面改，不是很影响。 <!DOCTYPE html> <html lang=en> <head> <meta ...
Bootstrap多级导航菜单是网页设计中常用的一种交互元素，它基于流行的前端开发框架Bootstrap和Bootsnav库，为用户提供清晰且易于操作的导航结构。在本文中，我们将深入探讨这个主题，了解如何创建和优化这样的多级...
在“bootstrap导航菜单模板”中，我们通常会涉及到以下几个核心知识点： 1. **导航条（Navbar）**: Bootstrap的导航条组件是网页设计中的重要元素，它提供了多种样式和功能，如固定顶栏、折叠菜单、品牌标识、导航...
总结来说，解决Bootstrap导航菜单点击后无法自动添加“active”类的问题的关键在于，通过编写适当的JavaScript代码，动态地根据当前页面的URL地址来判断并更新导航菜单项的激活状态。这种方法简单有效，但需要注意，...
完成以上步骤后，我们就可以在HTML中动态生成一个无限级的Bootstrap导航菜单。记得在页面中引入Bootstrap的CSS和JS库，确保样式和交互正常工作。 此外，为了使菜单更具交互性，我们还可以添加一些额外的功能，如...
Bootstrap导航菜单通常基于`<ul>`（无序列表）元素构建，每个菜单项则是一个`<li>`元素。为了应用Bootstrap样式，我们需要在`<ul>`元素上添加特定的类。对于标签式的导航菜单，我们需要添加`nav`和`nav-tabs`类，而...
在这个项目中，jQuery被用来增强Bootstrap导航菜单的功能，比如点击展开/折叠子菜单，或者添加平滑的过渡效果。通过使用jQuery，开发者可以更轻松地实现这些复杂的交互，而无需编写大量的JavaScript代码。 `index....
Bootstrap响应式侧边栏导航菜单是现代网页设计中不可或缺的一部分，尤其在移动优先的设计策略下。Bootstrap框架以其灵活性和易用性，成为了构建此类菜单的首选工具。本资源提供的代码正是利用Bootstrap，jQuery以及...
在这个“bootstrap多级导航菜单代码”压缩包中，我们主要探讨的是如何利用Bootstrap的导航组件创建一个多级导航菜单。 Bootstrap的导航菜单（Navbar）是其核心组件之一，它支持水平布局和垂直布局，可以轻松实现...