Bootstrap入门书籍之(五)导航条、分页导航


Posted in Javascript onFebruary 17, 2016

导航条

导航条(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>

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

宽屏:

Bootstrap入门书籍之(五)导航条、分页导航 

窄屏:

Bootstrap入门书籍之(五)导航条、分页导航 

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

1.首先在制作导航的列表( <ul class="nav"> )基础上添加类名 .navbar-nav

2.在列表外部添加一个容器(div)在这里允许的话 推荐使用 <nav> ,并且使用类名 .navbar 和 .navbar-default

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框架当然不可能缺掉这样的东西。使用方法也非常简单:

在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 ,使不在 <form> 中的按钮在导航条里垂直居中

2.导航条中的文本 navbar-text ,一般使用 <p> 元素,达到最优的行距

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

固定导航条

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

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

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

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

这个固定的导航条会 遮住页面上的其它内容 ,除非你给 <body> 元素底部设置了 padding 。提示:导航条的 默认高度 是 50px。如: body { padding-bottom: 70px; } ,当然你也可以使用你自己的值。

响应式导航条

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

Bootstrap入门书籍之(五)导航条、分页导航 

窄屏时,点击右边的按钮图标可展开,效果与上面的展开效果除了 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>

分析:

和普通导航条一样,最外层使用 <div class="navbar navbar-default" role="navigation"> 容器包裹,主要是 .navbar 和 .navbar-default 类。

保证在窄屏时 需要折叠的内容必须 包裹在带一个div内,并且为这个div加入 .collapse 、 .navbar-collapse 两个类名。最后为这个div 添加一个class类名或者id名 。

保证在窄屏时要显示的图标样式(固定写法):

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

并为button添加 data-target=”.类名/#id名” ,究竞是类名还是id名呢?由 需要折叠的div 来决定。(这里很关键,你可以把上面的代码在这里进行修改,会发现无法展开)

分页导航

分页导航几乎在所有的网站都可以看到,好的分页导航可以给用户带来更好额用户体验,还可以方便爬虫在网页中进行搜索。

带页码的分页导航

带页码的分页导航,应该是最常见的一种分页导航,特别是在列表页内容很多的时候,会给用户提供带页码的分页导航方式,在Bootstrap中使用的是 ul>li>a 这样的结构,在ul标签上加入 pagination 类:

<ul class="pagination ">
 <li><a href="#">«第一页</a></li>
 <li><a href="#">6</a></li>
 <li class="active"><a href="#">7</a></li>
 <li><a href="#">8</a></li>
 <li><a href="#">9</a></li>
 <li><a href="#">10</a></li>
 <li class="disabled"><a href="#">最后一页»</a></li>
</ul>

实现效果如下:

Bootstrap入门书籍之(五)导航条、分页导航 

可以看到同样会有 hover 、 active 、 disabled 等等状态,当然它也可以调整大小:在外层容器中的 .pagination 类后,添加 .pagination-lg 让分页导航变大; .pagination-sm 让分页导航变小:

翻页分页导航

其实这种方式,就是看不到具体的页码,只会提供一个 上一页 和 下一页 的按钮。

使用方式很简单,也就是在ul标签上添加 pager 类:

<ul class="pager">
 <li><a href="#">«上一页</a></li>
 <li><a href="#">下一页»</a></li>
</ul>

它默认是居中显示的,如果我们需要一个居左一个居右显示的话,添加两个样式: previous 让“上一步”按钮居左; next 让“下一步”按钮居右。(同样可以使用 disabled 表示禁用状态)

<ul class="pager">
 <li class="previous disabled"><a href="#">«上一页</a></li>
 <li class="next"><a href="#">下一页»</a></li>
</ul>

其他

标签

在一些Web页面中常常会添加一个标签用来告诉用户一些额外的信息,比如说在导航上添加了一个新导航项,可能就会加一个“new”标签,来告诉用户。这是新添加的导航项。

在Bootstrap专门将这样的效果提取成为了单独的标签组件。可以使用 <span> 这样的行内标签添加 .label 类来控制大小,再使用情景类来控制高亮显示的颜色如: label-default 、 label-danger 等等(在原来笔记中说到过这样的情景类,只不过这里需要加上不同的前缀)

Bootstrap入门书籍之(五)导航条、分页导航 

徽章(角标)

其实和上面的标签效果很大一部分是类似的,一般用作信息提示,例如剩余多少未读信息等等,也就是我们常常能在右上角看到的未读信息提示。在Bootstrap中,把这种效果称作为徽章效果,使用 badge 类来实现。

给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。

<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
 Messages <span class="badge">4</span>
</button>

Bootstrap入门书籍之(五)导航条、分页导航 

通过查看源码,我们可以发现Bootstrap同样使用 :empty 伪元素,来设置当没有内容的时候隐藏:

.badge:empty {
 display: none;
}

需要注意的是IE8 不支持 :empty 选择符,所以不会默认隐藏;

Bootstrap 中的徽章会适配导航元素的激活状态。

<ul class="nav nav-pills" role="tablist">
 <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
 <li role="presentation"><a href="#">Profile</a></li>
 <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Bootstrap入门书籍之(五)导航条、分页导航 

关于Bootstrap入门书籍之(五)导航条、分页导航就给大家介绍到这里,希望对大家有所帮助!

Javascript 相关文章推荐
jQuery Ajax 实例全解析
Apr 20 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JS给超链接加确认对话框的方法
Feb 24 Javascript
微信中一些常用的js方法汇总
Mar 12 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
微信小程序通过api接口将json数据展现到小程序示例
Jan 20 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
layui实现checkbox的目录树tree的例子
Sep 12 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
vue穿梭框实现上下移动
Jan 29 Vue.js
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 #Javascript
Bootstrap入门书籍之(三)栅格系统
Feb 17 #Javascript
Bootstrap入门书籍之(一)排版
Feb 17 #Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 #Javascript
分享自己用JS做的扫雷小游戏
Feb 17 #Javascript
javascript瀑布流布局实现方法详解
Feb 17 #Javascript
给angular加上动画效遇到的问题总结
Feb 17 #Javascript
You might like
PHP实现采集程序原理和简单示例代码
2007/03/18 PHP
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
详细解读php的命名空间(二)
2018/02/21 PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
2018/04/08 PHP
微信JSSDK分享功能图文实例详解
2019/04/08 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
基于Jquery实现焦点图淡出淡入效果
2015/11/30 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
关于Vue.js一些问题和思考学习笔记(1)
2016/12/02 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
2017/08/24 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
2018/10/19 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Python Mysql自动备份脚本
2008/07/14 Python
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
详解Python中的Numpy、SciPy、MatPlotLib安装与配置
2017/11/17 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
解决python 执行shell命令无法获取返回值的问题
2020/12/05 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
2016大学先进团支部事迹材料
2016/03/01 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android
python自动获取微信公众号最新文章的实现代码
2022/07/15 Python