Bootstrap源码解读导航条(7)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap导航条

基础导航条

要制作一个基础导航条,要在制作导航的列表<ul class="nav">基础上添加类名“navbar-nav”,然后在列表外部添加一个容器(div),并且使用类名“navbar”和“navbar-default”。例如:

<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>
 </ul>
</div>

“.navbar”样式的主要功能就是设置左右padding和圆角等效果,实现源码如下:

.navbar {
 position: relative;
 min-height: 50px;
 margin-bottom: 20px;
 border: 1px solid transparent;
}

导航条的颜色都是通过“.navbar-default”来进行控制,实现源码如下:

.navbar-default {
 background-color: #f8f8f8;
 border-color: #e7e7e7;
}

“.navbar-nav”样式是在导航“.nav”的基础上重新调整了菜单项的浮动与内外边距。而颜色和其他样式是通过配合父容器“navbar-default”来一起实现。实现源码如下:

.navbar-default .navbar-nav> li > a {
 color: #777;
}
.navbar-default .navbar-nav> li >a:hover,
.navbar-default .navbar-nav> li >a:focus {
 color: #333;
 background-color: transparent;
}
.navbar-default .navbar-nav> .active > a,
.navbar-default .navbar-nav> .active >a:hover,
.navbar-default .navbar-nav> .active >a:focus {
 color: #555;
 background-color: #e7e7e7;
}
.navbar-default .navbar-nav> .disabled > a,
.navbar-default .navbar-nav> .disabled >a:hover,
.navbar-default .navbar-nav> .disabled >a:focus {
 color: #ccc;
 background-color: transparent;
}

导航条标题

通过“navbar-header”和“navbar-brand”来实现,例如:

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="##" class="navbar-brand">标题</a>
  </div>
 <ul class="nav navbar-nav">
  ...
 </ul>
</div>

主要是加大了字体设置,并且设置了最大宽度,实现源码如下:

.navbar-brand {
 float: left;
 height: 50px;
 padding: 15px 15px;
 font-size: 18px;
 line-height: 20px;
}
.navbar-brand:hover,
.navbar-brand:focus {
 text-decoration: none;
}
.navbar-brand > img {
 display: block;
}
@media (min-width: 768px) {
 .navbar > .container .navbar-brand,
 .navbar > .container-fluid .navbar-brand {
 margin-left: -15px;
 }
}

在默认导航条(navbar-default)下,对navbar-brand也做了颜色处理,实现源码如下:

.navbar-default .navbar-brand {
color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #5e5e5e;
background-color: transparent;
}

带表单的导航条

在navbar容器中放置一个带有“navbar-form”类名的表单,例如:

<div class="navbar navbar-default" role="navigation">
 <ul class="nav navbar-nav">
  ...
 </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>

实现源码如下:

.navbar-form {
 padding: 10px 15px;
 margin-top: 8px;
 margin-right: -15px;
 margin-bottom: 8px;
 margin-left: -15px;
 border-top: 1px solid transparent;
 border-bottom: 1px solid transparent;
 -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
@media (min-width: 768px) {
 .navbar-form .form-group {
 display: inline-block;
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .form-control {
 display: inline-block;
 width: auto;
 vertical-align: middle;
 }
 .navbar-form .form-control-static {
 display: inline-block;
 }
 .navbar-form .input-group {
 display: inline-table;
 vertical-align: middle;
 }
 .navbar-form .input-group .input-group-addon,
 .navbar-form .input-group .input-group-btn,
 .navbar-form .input-group .form-control {
 width: auto;
 }
 .navbar-form .input-group > .form-control {
 width: 100%;
 }
 .navbar-form .control-label {
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .radio,
 .navbar-form .checkbox {
 display: inline-block;
 margin-top: 0;
 margin-bottom: 0;
 vertical-align: middle;
 }
 .navbar-form .radio label,
 .navbar-form .checkbox label {
 padding-left: 0;
 }
 .navbar-form .radio input[type="radio"],
 .navbar-form .checkbox input[type="checkbox"] {
 position: relative;
 margin-left: 0;
 }
 .navbar-form .has-feedback .form-control-feedback {
 top: 0;
 }
}
@media (max-width: 767px) {
 .navbar-form .form-group {
 margin-bottom: 5px;
 }
 .navbar-form .form-group:last-child {
 margin-bottom: 0;
 }
}
@media (min-width: 768px) {
 .navbar-form {
 width: auto;
 padding-top: 0;
 padding-bottom: 0;
 margin-right: 0;
 margin-left: 0;
 border: 0;
 -webkit-box-shadow: none;
   box-shadow: none;
 }
}

“navbar-left”可以让导航条里的表单左浮动,“navbar-right”为右浮动。实现源码如下:

@media (min-width: 768px) {
 .navbar-left {
 float: left !important;
}
.navbar-right {
 float: right !important;
 }
}

固定导航条

要将导航条固定在浏览器顶部或底部,只需要在制作导航条最外部容器navbar上追加对应的类名即可:
.navbar-fixed-top:导航条固定在浏览器窗口顶部
.navbar-fixed-bottom:导航条固定在浏览器窗口底部
例如:<div class="navbar navbar-default navbar-fixed-top" role="navigation">...</div>
实现原理就是在navbar-fixed-top和navbar-fixed-bottom使用了position:fixed属性,并且设置navbar-fixed-top的top值为0,而navbar-fixed-bottom的bottom值为0。实现源码如下:

.navbar-fixed-top,
.navbar-fixed-bottom {
 position: fixed;
 right: 0;
 left: 0;
 z-index: 1030;
}
@media (min-width: 768px) {
.navbar-fixed-top,
.navbar-fixed-bottom {
 border-radius: 0;
 }
}
.navbar-fixed-top {
 top: 0;
 border-width: 0 0 1px;
}
.navbar-fixed-bottom {
 bottom: 0;
 margin-bottom: 0;
 border-width: 1px 0 0;
}

不过我们可以发现,页面主内容顶部和底部都被固定导航条给遮住了。我们可以在body上加上样式:padding-top: 70px;或padding-bottom: 70px;来避免这种情况。

响应式导航条

响应式导航条比较复杂,宽屏是水平平铺显示,窄屏时收缩垂直显示,使用方法如下:
1. 把在窄屏时需要折叠的内容包裹在带一个div内,并且为这个div追加“collapse”、“navbar-collapse”两个类名。最后为这个div添加一个class类名或者id名。
2. 定制在窄屏时要显示的图标样式。
3. 为button添加data-target=”.类名”或data-target=”#id名”,是类名还是id名由需要折叠的div来决定。
完整示例如下:

<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">Bootstrap中文网</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="##">Bootstrap2</a></li>
   <li><a href="##">Bootstrap3</a></li>
   <li><a href="##">Bootstrap4</a></li>
   <li><a href="##">网站实例</a></li>
  </ul>
 </div>
</div>

反色导航条

将navbar-deafult类名换成navbar-inverse即可。只是导航条的背景色和文本做了修改。

带页码的分页导航

在ul标签上加入pagination方法即可。例如:

<ul class="pagination">
 <li><a href="#">«第一页</a></li>
 <li><a href="#">2</a></li>
 <li><a href="#">3</a></li>
 <li class="active"><a href="#">4</a></li>
 <li><a href="#">5</a></li>
 <li class="disabled"><a href="#">最后一页»</a></li>
</ul>

实现源码如下:

.pagination> .active > a,
.pagination> .active > span,
.pagination> .active >a:hover,
.pagination> .active >span:hover,
.pagination> .active >a:focus,
.pagination> .active >span:focus {
z-index: 2;
color: #fff;
cursor: default;
background-color: #428bca;
border-color: #428bca;
}
.pagination> .disabled > span,
.pagination> .disabled >span:hover,
.pagination> .disabled >span:focus,
.pagination> .disabled > a,
.pagination> .disabled >a:hover,
.pagination> .disabled >a:focus {
color: #999;
cursor: not-allowed;
background-color: #fff;
border-color: #ddd;
}

在ul上追加“pagination-lg”可以让分页导航变大,“pagination-sm”可以让分页导航变小。实现源码如下:

.pagination-lg> li > a,
.pagination-lg> li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg>li:first-child> a,
.pagination-lg>li:first-child> span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg>li:last-child> a,
.pagination-lg>li:last-child> span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm> li > a,
.pagination-sm> li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm>li:first-child> a,
.pagination-sm>li:first-child> span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm>li:last-child> a,
.pagination-sm>li:last-child> span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}

翻页分页导航

为ul标签加入pager类即可。例如:

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

实现源码如下:

.pager {
 padding-left: 0;
 margin: 20px 0;
 text-align: center;
 list-style: none;
}
.pager li {
 display: inline;
}
.pager li > a,
.pager li > span {
 display: inline-block;
 padding: 5px 14px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 15px;
}
.pager li > a:hover,
.pager li > a:focus {
 text-decoration: none;
 background-color: #eee;
}

导航默认居中,如果要一个居左一个居右,可以在li分别上追加previous和next类名。实现源码如下:

.pager .next > a,
.pager .next > span {
 float: right;
}
.pager .previous > a,
.pager .previous > span {
 float: left;
}

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
Three.js学习之正交投影照相机
Aug 01 Javascript
easy ui datagrid 从编辑框中获取值的方法
Feb 22 Javascript
js实现上下左右弹框划出效果
Mar 08 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 #Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 #Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 #Javascript
详解jQuery中的DOM操作
Dec 23 #Javascript
Bootstrap table两种分页示例
Dec 23 #Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 #Javascript
Bootstrap和Java分页实例第二篇
Dec 23 #Javascript
You might like
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
如何判断php mysqli扩展类是否开启
2016/12/24 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
JQuery 操作/获取table具体代码
2013/06/13 Javascript
JS实现适合于后台使用的动画折叠菜单效果
2015/09/21 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
深入理解node.js http模块
2018/01/24 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
使用BeautifulSoup爬虫程序获取百度搜索结果的标题和url示例
2014/01/19 Python
Python创建日历实例
2014/08/21 Python
解决PyCharm同目录下导入模块会报错的问题
2018/10/13 Python
一看就懂得Python的math模块
2018/10/21 Python
pandas重新生成索引的方法
2018/11/06 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
日本最佳原创设计品牌:Felissimo(芬理希梦)
2019/03/19 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
俄罗斯天然和有机产品、健康生活网上商店:Fitomarket.ru
2020/10/09 全球购物
建筑人员岗位职责
2013/12/25 职场文书
集体婚礼策划方案
2014/02/22 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
拾金不昧感谢信范文
2015/01/21 职场文书
2015年学校管理工作总结
2015/07/20 职场文书
运动会致辞稿
2015/07/29 职场文书
生日祝酒词大全
2015/08/10 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
浅谈JS和Nodejs中的事件驱动
2021/05/05 NodeJs
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL