利用bootstrap实现的响应式导航条 - 好文

响应式导航条，在不同屏幕大小显示的效果不同，先看一下效果

上面是在PC端显示的效果

上面的是在小屏幕上显示的效果

上面是当我们点击三横的时候，导航条上的文字出现了

看完效果我来总结一下用到的知识点：

总体上涉及到的知识点有导航条相关的和折叠相关的，响应式导航条依赖collapse

导航条相关知识：基类：navbar

logo：一般放在.navbar-brand之内（因为它已经被设置了内填充和高度），为了解决移动端上存在的小bug，一般将它放在另外一个标签中，如下
<div class="navbar-header"> <a href="#" class="navbar-brand">logo</a> </div>
按钮：对于<button>元素，加上.navbar-btn后可以让它在导航条里垂直居中

固定在顶部：添加.navbar-fixed-top类可以让导航条固定在顶部，还可以包含一个.container或.container-fluid容器，从而让导航条居中，并在两侧添加内填充

注意：需要为body元素设置内填充，因为这个固定的导航条会遮住页面上的其他内容，除非给body元素设置了padding-top

嗯、有必要说一下是怎么实现的，倒不是因为它难，而是提醒我自己一下，别忘了。嗯、其实就是下面的代码喽，最主要的是用到了.icon-bar这个类啦
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span> </button>
还有一个下拉菜单的功能，这个其实也不难，学过bootstrap的应该都会吧，这里我们重点不在它，所以就不在啰嗦了

其实响应式导航条最主要用到了折叠相关类collapse，因为有交互效果，所以data-属性肯定也是不可少的了

data-toggle：以collapse事件触发，
data-target：事件的目标，找到对应的id；

这里让菜单显示隐藏，主要用到的类是：collapse navbar-collapse

其实bootstrap中很多的用法都很相似，用法也就那么几种，看多了，用多了自然也就会了，所以我就不多说了，直接上代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>响应式导航条</title> <link rel="stylesheet" href="css/bootstrap.css"> <style>
body{ position:relative;} </style> </head> <body> <nav class="nav
navbar-inverse navbar-fixed-top"> <div class="container"> <div
class="navbar-header"> 
<button class="navbar-toggle" data-toggle="collapse" data-target="#menu"> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span> </button> <a href="#" class="navbar-brand">logo</a>
</div> <div id="menu" class="collapse navbar-collapse"> <ul class="nav
navbar-nav"> <li class="active"><a href="#">one</a></li> <li><a
href="#">two</a></li>  <li class="dropdown"><a href="#"
class="dropdown-toggle" data-toggle="dropdown"> three<span
class="caret"></span></a> <ul class="dropdown-menu"> <li><a
href="#">first</a></li> <li><a href="#">second</a></li> </ul> </li> </ul>
</div> </div> </nav> <script src="js/jquery-1.11.1.js"></script> <script
src="js/bootstrap.js"></script> </body> </html>

热门工具换一换