【简介】
Boostrap
的导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。是一个非常友好的响应式组件之一。
【引入文件】
需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。
[HTML]
纯文本查看
复制代码
1 2 3 4 5 | <link rel="stylesheet" href="lib/css/bootstrap.css"><script src="lib/js/jquery.v1.12.4.js"></script><script src="lib/js/bootstrap.js"></script> |
【基本结构与效果】
1. Html代码结构
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">传智播客</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">前端与移动开发</a></li> <li><a href="#">JavaEE</a></li> <li><a href="#">测试</a></li> <li><a href="#">UI设计</a></li> </ul> </div> </div></nav> |
2. 效果
【响应式导航栏结构与效果】
折叠起来的导航栏实际上是一个带有class .navbar-toggle 及两个 data- 元素的按钮。第一个是 data-toggle，用于告诉 JavaScript 需要对按钮做什么，第二个是 data-target，指示要切换到哪一个元素。三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。
1. Html代码结构
[HTML]
纯文本查看
复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse"> <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="#">传智播客</a> </div> <div class="collapse navbar-collapse" id="example-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">前端与移动开发</a></li> <li><a href="#">JavaEE</a></li> <li><a href="#">测试</a></li> <li><a href="#">UI设计</a></li> </ul> </div> </div></nav> |
2. 效果
在大屏幕pc端下面和普通导航栏是一样的效果。
在移动端的效果如下。
点击右侧按钮，导航栏的内容慢慢下拉显示
【可选的显示方案】
为最外层div添加一个额外.navbar类，就可把导航条固定在顶部或者底部 。
1. 固定在顶部
2. 只需添加.navbar-fixed-top类，记得要给<body>增加40px的padding（内补）才能不让导航条挡住其下面的内容。一定要在Bootstrap核心CSS（即bootstrap.css）文件之后，响应式CSS（bootstrap-responsive.css）文件之前添加。
[HTML]
纯文本查看
复制代码
1 2 3 4 5 | <div class="navbar navbar-fixed-top"> ...</div> |
3. 固定在底部
添加.navbar-fixed-bottom即可。
<div class="navbar navbar-fixed-bottom">
...
</div>
4. 顶部（可隐藏）导航条
通过添加.navbar-static-top即可创建一个与页面等宽的导航条，它会随着页面向下滚动而消失。和.navbar-fixed-top类不同的是，你不需要对改变body的内补（padding）。
[HTML]
纯文本查看
复制代码
1 2 3 4 5 | <div class="navbar navbar-static-top"> ...</div> |
5. 反色
通过添加.navbar-inverse类可改变导航条的外观。
[HTML]
纯文本查看
复制代码
1 2 3 4 5 | <div class="navbar navbar-inverse"> ...</div> |
效果：
更多技术资讯可关注：gzitcast
