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左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航 Bootstrap左侧下拉三级菜单导航
一款基于Bootstrap的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
练习
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码,Bootstrap自适应电脑手机端导航下拉菜单网页特效。
jquery bootstrap侧边隐藏响应式下拉导航菜单栏
Bootstrap响应式多级下拉导航菜单基于bootstrap.3.3.6.min.css和jquery-1.11.0.min.js制作,界面简洁,四级下拉导航菜单。
该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、傲游、世界之窗...
主要介绍了bootstrap导航栏、下拉菜单、表单的简单应用实例解析,非常不错,具有参考借鉴价值,需要的朋友参考下吧
HTML5 Bootstrap响应式手机导航下拉菜单代码
主要介绍了Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果,需要的朋友可以参考下
bootstrap 导航 菜单 HTML5 模板 5个不同样式bootstrap导航菜单模板
jQuery Bootstrap简洁的响应式导航下拉菜单代码
主要为大家详细介绍了bootstrap实现二级下拉菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了Bootstrap导航条可点击和鼠标悬停显示下拉菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Bootstrap手机导航下拉菜单代码是一款基于HTML5 Bootstrap实现的手机响应式导航下拉菜单代码。