在一个优秀的网站中,导航栏是必不可少的,接下来我们就来学习导航栏元素,这些元素有个特点就是使用相同的标记和基类.nav。Bootstrap中也提供了一个用于共享标记和状态的帮助器类,该表装饰的class,在不同的样式之间切换。
表格导航或者标签
- 需要一个class="nav"的无序列表
- 添加一个class="nav-tabs"
<ul class="nav nav-tabs">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li>
<a href="#">
Php
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
代码解读:如上nav是基类,类似字体图标中必须的类glyphicon,我们添加了class="nav-tabs"样式
运行结果
胶囊式的导航栏
如果需要胶囊式的导航栏的话,只需要将上述样式的class="nav-tabs"换成class="nav-pills"
<ul class="nav nav-pills">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li>
<a href="#">
Php
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
运行结果
垂直的导航栏
使用垂直的导航栏也非常简单,只需要在<ul>中加上class="nav-stacked",导航栏的风格是可以堆叠的,比如我们可以设计垂直的胶囊导航栏,那么<ul>就变成<ul class="nav nav-pills nav-stacked">。
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li>
<a href="#">
Php
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
运行结果
两端对齐自适应的导航栏
我们知道Bootstrap是移动设备优先的响应流式布局,同样的在这个导航栏上同样是有着响应式的优点。
我们只需要在有<ul class="nav nav-tabs">或者<ul class="nav nav-pills">的标签导航栏或者胶囊导航栏上添加class="nav-justified"即可
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li>
<a href="#">
Php
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
代码解读:在<768px的屏幕下,它会发生重叠,在>768px的屏幕下,它会充满整个父元素
当缩小窗口的时候它显然发生了堆叠
禁用链接
在基类为nav的<ul>中的<li>,添加class="disabled"可以禁用<li>的链接,该链接会变成灰色,而且改变鼠标的悬浮状态。
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li class="disabled">
<a href="#">
Php
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
代码解读:我们在第三个<li>中添加了class="disabled"禁用了该链接
运行结果
下拉菜单与导航栏
要想添加下拉菜单在导航栏中,你需要做的是
- 由于导航栏是通过<ul>中的<li>来展示各个链接的,那么你应该在你所想要展开的<li>上编写下拉菜单
- <li class="dropdown"></li>中编写下拉菜单
<ul class="nav nav-tabs">
<li class="active"><a href="#">Java</a></li>
<li>
<a href="#">Html</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Php<span class="caret"></span>
<ul class="dropdown-menu">
<li>
<a href="#">PHP简介</a>
</li>
<li>
<a href="#">PHP教程</a>
</li>
<li>
<a href="#">PHP应用</a>
</li>
<li>
<a href="#">PHP优秀源代码</a>
</li>
</ul>
</a>
</li>
<li>
<a href="#">JavaScript</a>
</li>
</ul>
代码解读:我们在PHP的<li>中编写了下拉菜单,具体格式如下
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
PHP<span class="caret"></span>
<ul class="dropdown-menu">
<li>....</li>
<li>....</li>
<ul>
</li>
当用户点击导航栏上的PHP图标时,就会显示出下拉菜单。
运行结果
当然了,胶囊式的标签页也是一样的
注:本篇文章为博主在菜鸟教程学习的日记,菜鸟教程:http://www.runoob.com/