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 相关文章推荐
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
用于deeplink的js方法(判断手机是否安装app)
Apr 02 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
vue实现登陆页面开发实践
May 30 Vue.js
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 404错误页面实现代码
2009/06/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
css配合jquery美化 select
2013/11/29 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
js命名空间写法示例
2015/12/18 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
React快速入门教程
2017/01/17 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
vue实现移动端图片上传功能
2019/12/23 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[40:19]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第二场 12.18
2020/12/19 DOTA
Python yield使用方法示例
2013/12/04 Python
简单使用Python自动生成文章
2014/12/25 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Window版下在Jupyter中编写TensorFlow的环境搭建
2020/04/10 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
艺龙旅行网酒店预订:国内、港澳台酒店
2018/06/26 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
打架检讨书2000字
2014/02/22 职场文书
志愿者活动总结报告
2014/06/27 职场文书
代理人委托书
2014/08/01 职场文书
教师年度个人总结
2015/02/11 职场文书
公司慰问信范文
2015/03/23 职场文书
围城读书笔记
2015/06/26 职场文书
2016年社区党支部公开承诺书
2016/03/25 职场文书
Golang并发操作中常见的读写锁详析
2021/08/30 Golang
Python 实现Mac 屏幕截图详解
2021/10/05 Python
详解Vue的列表渲染
2021/11/20 Vue.js