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 相关文章推荐
小型js框架veryide.librar源代码
Mar 05 Javascript
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
jquery中prop()方法和attr()方法的区别浅析
Sep 06 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
Feb 16 Javascript
基于JS实现的随机数字抽签实例
Dec 08 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
Angular2开发环境搭建教程之VS Code
Dec 15 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
实例讲解v-if和v-show的区别
Jan 31 Javascript
Vue实现图书管理案例
Jan 20 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
在命令行下运行PHP脚本[带参数]的方法
2010/01/22 PHP
fleaphp crud操作之findByField函数的使用方法
2011/04/23 PHP
第六章 php目录与文件操作
2011/12/30 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
详解PHP序列化和反序列化原理
2018/01/15 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
2006/10/19 Javascript
javascript 面向对象编程基础:继承
2009/08/21 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
jQuery中outerHeight()方法用法实例
2015/01/19 Javascript
JavaScript实现输入框(密码框)出现提示语
2016/01/12 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
Python开发如何在ubuntu 15.10 上配置vim
2016/01/25 Python
win与linux系统中python requests 安装
2016/12/04 Python
Python实现螺旋矩阵的填充算法示例
2017/12/28 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
Python定义函数实现累计求和操作
2020/05/03 Python
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
迎七一演讲稿
2014/09/12 职场文书
先进个人事迹材料
2014/12/29 职场文书
刑事法律意见书
2015/06/04 职场文书
MySQL安装后默认自带数据库的作用详解
2021/04/27 MySQL
Java输出Hello World完美过程解析
2021/06/13 Java/Android
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android