dropdown-nav-finish.html
<!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 class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">项目二
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">下拉菜单项目一</a></li>
<li><a href="#">下拉菜单项目二</a></li>
</ul>
</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>
分享到：
相关推荐
在Bootstrap中，导航栏（Navbar）是网站头部导航的重要组成部分，而下拉菜单（Dropdown Menu）则为导航栏增加了更多交互性。本实践将详细介绍如何在Bootstrap中创建一个居右的下拉菜单。 首先，为了创建一个基本的...
在这个主题“23种bootstrap导航菜单布局”中，我们将深入探讨如何利用Bootstrap的组件和jQuery插件来创建多种导航菜单效果。 首先，Bootstrap的导航菜单主要基于`<nav>`和`<ul>`元素构建，通过应用不同的类（如`....
Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级下拉导航菜单.rar Bootstrap响应式多级...
在这个"HTML5 Bootstrap响应式手机导航下拉菜单代码"中，开发者可以找到实现手机端导航栏下拉功能的具体代码。这种导航菜单在小屏幕设备上特别有用，因为它允许用户在一个紧凑的空间内浏览多个导航选项，而不必在...
在Bootstrap中，构建一个左侧下拉三级菜单导航是常见的需求，尤其对于那些具有复杂层级结构的网站。这种导航可以帮助用户轻松地浏览和访问网站的各个部分。 首先，让我们了解下Bootstrap菜单的基本构造。Bootstrap...
例如，`.dropdown`和`.dropdown-menu`类可以创建下拉菜单，而`.form-inline`可以让表单元素在导航栏中水平排列。 6. **可定制性** 每个模板都可以根据项目需求进行进一步定制。通过修改Bootstrap的SASS源码或添加...
Bootstrap响应式多级下拉导航菜单是Web开发中常见的组件，尤其在构建现代、互动性强的网站时。这个组件基于Bootstrap 3.3.6框架，利用其强大的样式和JavaScript功能，结合jQuery 1.11.0库，实现了一个灵活且适应不同...
Bootstrap 3.3.7 导航栏下拉菜单鼠标滑过展开效果 Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap 是...
该插件集成了23种Bootstrap导航菜单效果，有下拉菜单，大型菜单，侧边栏菜单，购物车菜单等，可以满足大部分网页导航菜单设计的需求。本代码适用浏览器：搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗...
在本示例中，主要关注的是Bootstrap的导航栏（Navbar）组件，它是构建导航菜单的关键。Bootstrap的导航栏可以轻松地创建水平布局，并且可以折叠在小屏幕设备上，以节省空间。当用户点击折叠按钮时，下拉菜单会显示，...
Bootstrap是一款流行的前端开发框架，它的导航条组件提供了丰富的样式和交互功能，包括下拉菜单。然而，默认情况下，带有下拉菜单的导航项在点击时只会显示下拉菜单，而不会跳转到链接地址。以下是如何解决这个问题...
本实例主要关注Bootstrap中的导航栏、下拉菜单和表单的使用，这些都是构建现代网页界面的关键元素。 首先，我们来看Bootstrap导航栏（Navbar）。在HTML结构中，导航栏由`<nav>`元素与`navbar`类定义，如`...
这是一款基于Bootstrap的炫酷下拉菜单鼠标滑过动画特效jQuery插件。该插件在鼠标滑过Bootstrap dropdown组件的时候，下拉面板会以指定的Animate.css中的CSS3动画出现。
下面，我们将深入探讨Bootstrap导航菜单的核心概念、jQuery插件的作用以及如何利用这些资源来提升你的网页设计。 首先，让我们理解Bootstrap导航菜单的基础。Bootstrap的导航菜单主要由.navbar组件构成，它可以是...
通常，Bootstrap的菜单主要用在页面头部，作为导航栏的一部分。然而，这个"鼠标右键下拉菜单特效"扩展了这一功能，将菜单与鼠标右键事件相结合，提供了一种非传统的交互方式。这种设计特别适用于需要在某个元素或...
通常，Bootstrap的导航栏包含一个`.navbar`类，内部是一个`.container`或`.container-fluid`容器，接着是`.navbar-toggler`（用于在小屏幕设备上显示汉堡菜单）和`.navbar-nav`（包含导航链接）。对于下拉菜单，我们...