Bootstrap入门书籍之（五）导航条、分页导航_javascript技巧

导航条

导航条（navbar）和上一节介绍的Bootstrap入门书籍之（四）菜单、按钮及导航。导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。在导航条(navbar)中有一个背景色、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。

基础导航条

实际上，导航条和导航在外观上的差别并不是那么的大，但是在实际使用中导航条要比导航复杂得多。下面就来实现一个最基础的导航条。

<div class="navbar navbar-default" role="navigation"><!--role是为了方便屏幕阅读器理解此处内容-->
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
</div>

可以达到的效果是这样的：

立即学习“Java免费学习笔记（深入）”；

宽屏：

窄屏：

在制作一个基础导航条时，主要注意以下几点：

1.首先在制作导航的列表(

)基础上添加类名 .navbar-nav


2.在列表外部添加一个容器（div）在这里允许的话 推荐使用

3.navbar 类的主要功能就是设置左右padding和圆角等效果，通过 .navbar-default 来进行控制导航条的颜色比如还有 .navbar-inverse 。


带标题、二级菜单

在Web页面制作中，一般都可以在菜单前面看到有一个标题（文字字号比其它文字稍大一些），其实在Bootstrap框架也为大家做了这方面考虑，其通过 .navbar-header 和 .navbar-brand 来实现，如：

<div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
</div>

登录后复制

当然也可以用来做logo， 中文官网描述 ，在此不进行详细描述。

二级菜单自然不用多说，在上一篇博客中已经进行了详细说明，若还是不太了解的话，可以再去翻翻我的上一篇博客，我们一起来看看下面这段代码以及能实现的效果：（注意这里使用的是 navbar-inverse 反色的导航条）

<div class="navbar navbar-inverse" role="navigation">
 <div class="navbar-header">
 <a href="##" class="navbar-brand">WEB开发</a>
 </div>
 <ul class="nav navbar-nav">
 <li class="active"><a href="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li class="dropdown" >
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">JavaScript
 <span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">jQuery</a></li>
 <li><a href="#">Vue</a></li>
 <li><a href="#">NodeJS</a></li>
 </ul>
 </li>
 <li ><a href="#">PHP</a></li>
 </ul>
</div>

登录后复制

效果如下：

 


带表单

我们常常在导航条中都能看到搜索表单，比如知乎，新浪微博等等都具有，Bootstrap框架当然不可能缺掉这样的东西。使用方法也非常简单：

在Bootstrap框架中提供了一个 .navbar-form ，在 .navbar 容器中放置一个带有 .navbar-form 类名的表单；再添加 .navbar-left 让表单左浮动，更好实现对齐。

在Bootstrap中，还提供了 .navbar-right 样式，让元素在导航条靠右对齐。

把这段代码复制到代码当中看看效果吧：

<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>

登录后复制

按钮、文本和链接

除了上面的一些样式之外，bootstrap框架提供了三种其他样式：

1.导航条中的按钮 navbar-btn ，使不在

中的按钮在导航条里垂直居中

2.导航条中的文本 navbar-text ，一般使用

元素，达到最优的行距

3.导航条中的普通链接 navbar-link ，非导航的链接，添加这个类，可以有正确的默认颜色与反色设置
但这三种样式在框架中使用时受到一定的限制，需要和 navbar-brand 、 navbar-nav 配合起来使用。而且 对数量也有一定的限制，一般情况在使用一到两个不会有问题，超过两个就会有问题 。

固定导航条

有时，我们希望导航条固定在浏览器顶部或底部，Bootstrap为我们方便的提供了两个类来实现这样的样式：

.navbar-fixed-top ：导航条固定在浏览器窗口顶部
.navbar-fixed-bottom ：导航条固定在浏览器窗口底部

使用方法很简单，只需要在制作导航条最外部容器（navbar）上追加对应的类名即可。

<nav class="navbar navbar-default navbar-static-top">
 ...
</nav>

登录后复制

这个固定的导航条会 遮住页面上的其它内容 ，除非你给

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

元素底部设置了 padding 。提示：导航条的 默认高度 是 50px。如： body { padding-bottom: 70px; } ，当然你也可以使用你自己的值。

响应式导航条

在上面的例子中，导航条就仅仅能大屏幕下有一个不错的效果，在屏幕变小的情况下，还 直接把所有的导航项直接展现出来就不适合了 。为了有一个更好的显示效果，响应式的导航条设计也就随之而来。我们先来看看效果，再一步一步分析它！

 

窄屏时，点击右边的按钮图标可展开，效果与上面的展开效果除了 active 状态不再溢出容器外，其他基本相同。实现代码如下：

<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">WEB开发</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="#">HTML</a></li>
 <li><a href="#">CSS</a></li>
 <li><a href="#">JavaScript</a></li>
 <li><a href="#">PHP</a></li>
 </ul>
 </div>
</div>

登录后复制

分析：

和普通导航条一样，最外层使用