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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
JavaScript 拖拉缩放效果
Dec 10 Javascript
jquery插件开发方法(初学者)
Feb 03 Javascript
jquery win 7透明弹出层效果的简单代码
Aug 06 Javascript
为指定的元素添加遮罩层的示例代码
Jan 15 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
Apr 17 jQuery
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
vue获取当前激活路由的方法
Mar 17 Javascript
Vue 中 a标签上href无法跳转的解决方式
Nov 12 Javascript
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
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
PHP 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
PHP中调用C/C++制作的动态链接库的教程
2016/03/10 PHP
php 常用的系统函数
2017/02/07 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
Thinkphp实现站点静态化的方法详解
2017/03/21 PHP
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
CSS中一些@规则的用法小结
2021/03/09 HTML / CSS
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
JavaScript中的console.trace()函数介绍
2014/12/29 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
基于javascript实现简单的抽奖系统
2020/04/15 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
2018/10/22 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
简单使用Python自动生成文章
2014/12/25 Python
解决Python requests库编码 socks5代理的问题
2018/05/07 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
德国最大的网上鞋店之一:Schuhe24.de
2017/06/10 全球购物
青年教师培训方案
2014/02/06 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
开会通知
2015/04/20 职场文书
2015年人力资源部工作总结
2015/04/30 职场文书
工会经费申请报告
2015/05/15 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python