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中获取选中对象的类型
Apr 02 Javascript
List the UTC Time on a Computer
Jun 11 Javascript
js和jquery对dom节点的操作(创建/追加)
Apr 21 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
Apr 10 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
chorme 浏览器记住密码后input黄色背景处理方法(两种)
Nov 22 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
使用angular-cli webpack创建多个包的方法
Oct 16 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php截取中文字符串函数实例
2015/02/23 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
php递归函数怎么用才有效
2018/02/24 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
微信小程序之小豆瓣图书实例
2016/11/30 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
jQuery获取复选框选中的当前行的某个字段的值
2017/09/15 jQuery
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
angular 服务随记小结
2019/05/06 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
微信jssdk踩坑之签名错误invalid signature
2020/05/19 Javascript
[05:08]2014DOTA2国际邀请赛 Hao专访复仇的胜利很爽
2014/07/15 DOTA
详解Python中的多线程编程
2015/04/09 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
图文详解WinPE下安装Python
2016/05/17 Python
Windows安装Python、pip、easy_install的方法
2017/03/05 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
Python3处理HTTP请求的实例
2018/05/10 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
C#实现启动一个进程
2016/10/01 面试题
给交警的表扬信
2014/01/12 职场文书
护理毕业生自我鉴定
2014/02/11 职场文书
检讨书范文大全
2015/05/07 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书