Bootstrap源码解读导航(6)


Posted in Javascript onDecember 23, 2016

源码解读Bootstrap导航

基础样式

制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。例如:

<ul class="nav">
  <li><a href="##">1</a></li>
  <li><a href="##">2</a></li>
  <li><a href="##">3</a></li>
</ul>

实现源码:

.nav {
 padding-left: 0;
 margin-bottom: 0;
 list-style: none;
}
.nav> li {
 position: relative;
 display: block;
}
.nav> li > a {
 position: relative;
 display: block;
 padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
 text-decoration: none;
 background-color: #eee;
}
.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
 background-color: #eee;
 border-color: #428bca;
}
.nav .nav-divider {
 height: 1px;
 margin: 9px 0;
 overflow: hidden;
 background-color: #e5e5e5;
}
.nav> li > a >img {
 max-width: none;
}

标签形tab导航

原导航“nav”上追加“nav-tabs”类名即可,例如:<ul class="nav nav-tabs">...</ul>。
实现原理是将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。实现源码如下:

.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}

要让哪个项是选中项,只需要在其标签上添加类名“class=”active”即可。
实现源码如下:

.nav-tabs >li.active> a,
.nav-tabs >li.active>a:hover,
.nav-tabs >li.active>a:focus {
 color: #555;
 cursor: default;
 background-color: #fff;
 border: 1px solid #ddd;
 border-bottom-color: transparent;
}

要让哪个项禁用,只需要在标签项上添加“class=”disabled”即可。实现源码如下:

.nav>li.disabled> a {
 color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
 color: #999;
 text-decoration: none;
 cursor: not-allowed;
 background-color: transparent;
}

胶囊形pills导航

原导航“nav”上追加“nav-pills”类名即可,例如:<ul class="nav nav-pills">...</ul>。
实现源码如下:

.nav-pills > li {
 float: left;
}
.nav-pills > li > a {
 border-radius: 4px;
}
.nav-pills > li + li {
 margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
 background-color: #428bca;
}

垂直导航

制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。例如:
<ul class="nav nav-pills nav-stacked">...</ul>
垂直导航与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列,然后给相邻导航项留有一定的间距。
实现源码如下:

.nav-stacked > li {
 float: none;
}
.nav-stacked > li + li {
 margin-top: 2px;
 margin-left: 0;
}

要在导航项之间加分隔线,在导航项之间加<li class=”nav-divider”></li>即可。
实现源码如下:

.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

自适应导航

在“nav”上追加一个“nav-justified”类名即可。例如:<ul class="nav nav-justified">
实现原理是,列表<ul>上设置宽度为“100%”,然后每个菜单项<li>设置了“display:table-cell”,让列表项以模拟表格单元格的形式显示。实现源码如下:

.nav-justified {
 width: 100%;
}
.nav-justified > li {
 float: none;
}
.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-justified > li {
 display: table-cell;
 width: 1%;
 }
 .nav-justified > li > a {
 margin-bottom: 0;
 }
}

“nav-tabs”和“nav-justified”配合在一起使用就是自适应选项卡导航,实现源码如下:

.nav-tabs.nav-justified {
 width: 100%;
 border-bottom: 0;
}
.nav-tabs.nav-justified > li {
 float: none;
}
.nav-tabs.nav-justified > li > a {
 margin-bottom: 5px;
 text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
 top: auto;
 left: auto;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li {
 display: table-cell;
 width: 1%;
 }
.nav-tabs.nav-justified > li > a {
 margin-bottom: 0;
 }
}
.nav-tabs.nav-justified > li > a {
 margin-right: 0;
 border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border: 1px solid #ddd;
}
@media (min-width: 768px) {
 .nav-tabs.nav-justified > li > a {
 border-bottom: 1px solid #ddd;
 border-radius: 4px 4px 0 0;
 }
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
 border-bottom-color: #fff;
 }
}

“nav-pills”和“nav-justified”配合在一起使用就是自适应胶囊型导航,原理同上。

导航加下拉菜单

导航加下拉菜单也就是二级导航,只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul下拉菜单即可。例如:

<ul class="nav nav-pills">
  <li><a href="##">首页</a></li>
  <li class="dropdown">
    <a href="##" class="dropdown-toggle" data-toggle="dropdown">数字<span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="##">1</a></li>
      <li><a href="##">2</a></li>
    </ul>
  </li>
  <li><a href="##">关于我们</a></li>
</ul>

面包屑式Breadcrumb导航

面包屑不需要使用“nav”,一般作用是告诉用户现在所处页面的位置。为ol加入“breadcrumb”类名即可。例如:

<ol class="breadcrumb">
 <li><a href="#">111</a></li>
 <li><a href="#">222</a></li>
 <li class="active">333</li>
</ol>

实现源码如下:

.breadcrumb {
 padding: 8px 15px;
 margin-bottom: 20px;
 list-style: none;
 background-color: #f5f5f5;
 border-radius: 4px;
}
.breadcrumb > li {
 display: inline-block;
}
.breadcrumb > li + li:before {
 padding: 0 5px;
 color: #ccc;
 content: "/\00a0";
}
.breadcrumb > .active {
 color: #777;
}

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

Javascript 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
通过修改referer下载文件的方法
May 11 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
Jan 25 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
javascript实现可拖动变色并关闭层窗口实例
May 15 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
js代码实现轮播图
May 04 Javascript
vue实现移动端拖动排序
Aug 21 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
Dec 23 #Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 #Javascript
AngularJS实践之使用ng-repeat中$index的注意点
Dec 22 #Javascript
JS中微信小程序自定义底部弹出框
Dec 22 #Javascript
Bootstrap源码解读表单(2)
Dec 22 #Javascript
javascript学习之json入门
Dec 22 #Javascript
Bootstrap源码解读网格系统(3)
Dec 22 #Javascript
You might like
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JS特效实现图片自动播放并可控的效果
2015/07/31 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
基于Bootstrap和jQuery构建前端分页工具实例代码
2016/11/23 Javascript
详解jquery validate实现表单验证 (正则表达式)
2017/01/18 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
JavaScript仿微信(电话)联系人列表滑动字母索引实例讲解(推荐)
2017/08/16 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue中使用input[type=&quot;file&quot;]实现文件上传功能
2018/09/10 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
pycharm的console输入实现换行的方法
2019/01/16 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
英国家居用品和床上用品零售商:P&B Home
2020/01/16 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
促销活动策划方案
2014/01/12 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
驾驶员培训方案
2014/05/01 职场文书
宣传工作经验材料
2014/06/02 职场文书
2015年考研复习计划
2015/01/19 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书