好库网 好库网首页 | 我的好库
好饱的专栏

Bootstrap响应式导航菜单栏的实现方法

发布者:好饱
发布日期:2016/2/12 20:55:09   更新日期:2016/2/12 20:55:09
阅读次数:2537
评分:4.80
介绍:本文介绍了Bootstrap基本导航栏及更加美观导航栏的实现方法。
正文:

一、基本导航栏

基于Bootstrap的响应式导航栏非常简单,下面的例子给出了一个简单的导航栏。

<!DOCTYPE html>
<html>
<head>
<title>好库编程网导航栏</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./navbar.css" rel="stylesheet">
<script src="./jquery.min.js"></script>
<script src="./bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<header id="top" class="navbar navbar-fixed-top navbar-default nav-common" role="banner">
<nav id="navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#codereplayermenu" data-original-title="" title="">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://www.okbase.net">好库编程网</a>
</div>
<div class="collapse navbar-collapse" id="codereplayermenu">
<ul class="nav navbar-nav nav-pills"><!-- 去掉 nav-pills 可以在手机界面纵向排列-->
<li class="ienav"><a href="http://www.okbase.net"><span class="ienav">首页</span></a></li>
<li><a href="http://www.okbase.net/doc/list">文章</a></li>
<li><a href="http://www.okbase.net/file/list">代码</a></li>
<li><a href="http://blog.okbase.net">博客</a></li>
<li><a href="http://club.okbase.net">社区</a></li>
</ul>
</div>
</nav>
</body>
</html>

二、更加美观的导航栏

基本的导航栏显得有点单调,我们对其进行改进。
1)增加菜单项图标
我们采用bootstrap自带的glyphicons字体图标
使用方法举例:
<span class="glyphicon glyphicon-tags"></span>

 

2)利用yamm3实现轻量级大型导航菜单
yamm3是一款基于Bootstrap3的轻量级大型导航菜单插件。该大型菜单使用Bootstrap3标准的导航菜单标签和流式网格系统来制作。它具有顶部固定和响应式等特点,适合用于制作复杂的网站导航菜单。
使用方法:
在标准的Bootstrap3导航菜单的<nav>标签的class中添加.yamm 类。然后将你的菜单添加到ul.dropdown-menu中。可以通过.yamm-content来使用带padding的包裹元素。另外,需要添加必要的CSS样式。

效果见下图:

 

具体实现的代码比较长,请下载代码文件。


源码下载:http://www.okbase.net/file/item/33759

 

 


评论 [发表评论]
账号 密码 还没帐号呢,现在注册一个?

免责声明:好库网所展示的信息由买卖双方自行提供,其真实性、准确性和合法性由信息发布人负责。好库网不提供任何保证,并不承担任何法律责任。