responsive-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">
<link href="../bootstrap/css/bootstrap-responsive.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">导航<small>响应式菜单</small></h1>
<div class="navbar" >
<div class="navbar-inner">
<div class="container">
<a href="#" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="Bootstrap"></a>
<!-- 当浏览器窗口宽度小于940像素的时候 ,内容会自动隐藏,内容会作为下拉菜单的内容-->
<div class="nav-collapse">
<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>
<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的导航菜单布局设计jQuery插件。该插件集成了23种Bootstrap导航菜单效果,有下拉菜单,大型菜单,侧边栏菜单,购物车菜单等,可以满足大部分网页导航菜单设计的需求。
jquery bootstrap侧边隐藏响应式下拉导航菜单栏
jQuery Bootstrap简洁的响应式导航下拉菜单代码
一款简洁实用基于HTML5 Bootstrap实现的响应式手机导航下拉菜单代码,Bootstrap自适应电脑手机端导航下拉菜单网页特效。
主要介绍了BootStrap实现导航栏的响应式布局,当在小屏幕、手机屏幕浏览时自动折叠隐藏的效果,非常不错,具有参考借鉴价值,对bootstrap 响应式布局导航栏功能感兴趣的朋友一起学习吧
Bootstrap响应式侧边栏导航菜单代码
Bootstrap响应式侧边栏导航菜单代码是一款基于jquery+html5实现的同时兼容手机与电脑端响应式导航菜单特效,手机触屏滑动导航菜单特效。
Bootstrap响应式导航栏文章中相关js和css
bootstrap实现响应式自适应导航栏,并实现平滑滚动
bootstrap响应式布局,调整浏览器大小查看效果
HTML5 Bootstrap响应式手机导航下拉菜单代码
Bootstrap响应式多级下拉导航菜单基于bootstrap.3.3.6.min.css和jquery-1.11.0.min.js制作,界面简洁,四级下拉导航菜单。
为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-...
宽屏棒球运动专题bootstrap模板_宽屏 棒球 运动 专题 整站 简洁 大图 bootstrap 菜单 导航 手机 响应式 宽屏棒球运动专题bootstrap模板_宽屏 棒球 运动 专题 整站 简洁 大图 bootstrap 菜单 导航 手机 响应式
本书讨论了使用Bootstrap构建网站,从...在对Bootstrap有了基本的理解之后,我们会讨论漂亮的导航条、面包屑式导航、媒体对象等。接着JavaScript插件登场,比如下拉菜单、传送带、模态框,它们为网站提供了交互功能。
这是一款移动优先的响应式侧边栏导航菜单界面设计效果。该侧边栏设计中提供了多级子菜单,菜单图标,激活状态子菜单,以及按钮的设计方案。来还额外提供了顶部导航的搜索框和右侧菜单的设计效果。
bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。bootstrap navBar demo 稍微整理了下。
黑白设计时尚服装设计师企业模板_黑白 设计 模特 菜单 导航 时尚 服装 服装设计 bootstrap 手机 响应式 整站.rar