基础导航条。样式:class="navbar navbar-default",属性:role="navigation"
<div class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li><a href="##">系列教程</a></li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> </div>
效果图
1)带二级菜单,表单元素
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">公司LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">网站首页</a></li> <li class="dropdown"> <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="##">CSS3</a></li> <li><a href="##">JavaScript</a></li> <li class="disabled"><a href="##">PHP</a></li> </ul> </li> <li><a href="##">名师介绍</a></li> <li><a href="##">成功案例</a></li> <li><a href="##">关于我们</a></li> </ul> <form action="##" class="navbar-form navbar-left" rol="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="请输入关键词" /> </div> <button type="submit" class="btn btn-default">搜索</button> </form> </div>
导航条标题: class="navbar-brand
二级菜单:class="dropdown-toggle" data-toggle="dropdown"
带表单导航条:class="navbar-form"
导航条位置控制:class="navbar-left"
2)导航条中的按钮、文本和链接
1、导航条中的按钮:navbar-btn
2、导航条中的文本:navbar-text
3、导航条普通链接:navbar-link
但这三种样式在框架中使用时受到一定的限制,需要和navbar-brand、navbar-nav配合起来使用。而且对数量也有一定的限制,一般情况在使用一到两个不会有问题,超过两个就会有问题。
3)固定导航条(固定页头页脚)
.navbar-fixed-top:导航条固定在浏览器窗口顶部
.navbar-fixed-bottom:导航条固定在浏览器窗口底部
使用注意:从运行效果中大家不难发现,页面主内容顶部和底部都被固定导航条给遮住了。为了避免固定导航条遮盖内容,我们需要在body上做一些处理:
解决方案<一>:
固定导航条默认高度是50px,我们一般设置padding-top和padding-bottom的值为70px,当然有的时候还是需要具体情况具体分析。
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
解决方案<二>:
其实除了这种解决方案之外,我们还有其他的解决方法,把固定导航条都放在页面内容前面。
<!--固定顶部--> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> … </div> <!--固定底部--> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> … </div> <!--页面内容--> <div class="content">我是内容</div>
例:
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="navbar-header"> <a href="##" class="navbar-brand">LOGO</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="##">首页</a></li> <li><a>页头</a></li> </ul> </div> <div class="content">我是内容</div> <div class="navbar navbar-default navbar-fixed-bottom" role="navigation"> <ul class="nav navbar-nav"> <li><a href="##">主页</a></li> <li><a href="##">刷新</a></li> <li><a href="##">关于</a></li> </ul> </div>
4)响应式导航
自适应屏幕显示导航
<div class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <!-- .navbar-toggle样式用于toggle收缩的内容,即nav-collapse collapse样式所在元素 --> <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="sr-only"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- 确保无论是宽还是窄,navbar-brand都显示 --> <a href="##" class="navbar-brand">LOGO</a> </div> <!-- 屏幕宽度小于768px时,div.navbar-responsive-collapse容器里的内容都会隐藏,显示icon-bar图标,当点击icon-bar图标时,再展开。屏幕大于768px时,默认显示。 --> <div class="collapse navbar-collapse navbar-responsive-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="##">首页</a></li> <li><a href="##">简介</a></li> <li><a href="##">新闻</a></li> <li><a href="##">案例</a></li> <li><a href="##">关于</a></li> </ul> </div> </div>
窄屏导航图标
<button class="navbar-toggle" type="button" data-toggle="collapse"> <span class="sr-only"></span> <!--横线图标--> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> <!--一个icon-bar代表一个横线--> </button>