导航条
导航条和导航一样也是独立的组件
1)基础导航条
使用方法:
1)先在ul的nav后添加类名“navbar-nav”
2)然后在外面添加一个容器(div)并添加类名“navbar-default”
2)加入导航标题
在容器中添加一个新的名为“nav-header”的容器并在其中添加名为“nav-brand”的a标签
代码如下:
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">嘤嘤</a>
</div>
<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>
二级导航栏
使用方法:
在li中添加dropdown,然后嵌套ul
如下代码:
<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>
3)带搜索条表单
在装有navbar的div中添加一个类名为navbar-form的表单
同样提供navbar-left以及navbar-right类名放在navbar-form后表示左对齐或者右对齐
4)导航栏按钮,文本,普通链接
添加类名
按钮:navbar-btn
文本:navbar-text
普通链接:navbar-link
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<div class="nav navbar-nav">
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
<a href="##" class="navbar-text">Navbar Text</a>
</div>
</div>(鼠标悬浮时带有下划线)
<div class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a href="##" class="navbar-brand">慕课网</a>
</div>
<ul class="nav navbar-nav">
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
<li><a href="##" class="navbar-text">Navbar Text</a></li>
</ul>
</div>(纯文本不带下划线)
5)固定导航条
在设定容器时,在nav nav-default后添加类名
navbar-fixed-top(固定在浏览器顶端)
navbar-fixed-bottom(固定在浏览器底部)
存在问题:页面主内容顶部或底部都被固定导航条遮住
解决法一:
body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
因为默认固定导航条高度为50px
解决法二:
把固定导航条放在所有内容前面
<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>
** 6)响应式导航条
适应屏幕大小的导航栏
使用方法:
1.在窄频时,需要折叠的内容被装在一个div中并且为这个div添加两个类名:collapse以及nav-collapse两个类名,然后为这个div添加一个class类名或者id
2.保证在窄屏时要显示的图标样式(固定写法):
<button class="navbar-toggle" type="button" data-toggle="collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
3.为button添加data-target=“.类名/ID名”(由需要折叠的div来决定)
需要折叠的div:
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav">
…
</ul>
</div>
窄频时显示图标:
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#example">
...
</button>
或者:
需要折叠的div:
<div class="collapse navbar-collapse example" >
<ul class="nav navbar-nav">
…
</ul>
</div>
窄频时,显示图标
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".example">
...
</button>
完整代码:
<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">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 确保无论是宽屏还是窄屏,navbar-brand都显示 -->
<a href="##" class="navbar-brand">嘤嘤</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>
7)反色导航条
将nav-default改成nav-inverse
只改变背景颜色以及文本
8)分页导航
带页码的导航
使用方法:
使用ul>li>a的结构
并在ul标签添加类名“pagination”
同样,可以在pagination后添加类名:pagination-lg(变大)或者pagination-sm(变小)
7)翻页导航
如:上一页 下一页之类的导航
使用方法:
在ul中添加类名“pager”
注意:默认是居中
如果需要一个左边一个右边
就在相应的li中添加类名“previous”或者“next”
如下代码:
<ul class="pager">
<li class="previous"><a href="#">«上一页</a></li>
<li class="next"><a href="#">下一页»</a></li>
</ul>
8)标签
添加标签告诉用户额外信息如:new
bootstrap特意将这类标签效果提取出来成为一个标签组件 使用lable来显示高亮
使用方法:
可以在span中添加类名lable以及样式lable-default
代码如下:
<h3>Example heading <span class="label label-default”>New</span></h3>
同样提供多种颜色:
label-default:默认,深灰色
label-primary:主要标签,深蓝色
lable-success:成功标签,绿色
label-info:信息标签,浅蓝色
label-warning:警告标签,橙色
label-danger:错误标签,红色
9)徽章
使用方法:在span中添加类名“badge”
可以在其后添加“pill-right”类名,使其悬浮在右侧