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异常处理的一个想法(sofish)
Mar 14 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js读取配置文件自写
Feb 11 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS代码实现table数据分页效果
May 26 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
javascript json字符串到json对象转义问题
Jan 22 Javascript
layui点击弹框页面 表单请求的方法
Sep 21 Javascript
JS实现九宫格拼图游戏
Jun 28 Javascript
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
图片存储与浏览一例(Linux+Apache+PHP+MySQL)
2006/10/09 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2017/02/15 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
在Laravel中使用DataTables插件的方法
2018/05/29 PHP
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
图片img的src不变让浏览器重新加载实现方法
2013/03/29 Javascript
JS延迟加载加快页面打开速度示例代码
2013/12/30 Javascript
使用js dom和jquery分别实现简单增删改
2014/09/11 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
vue+vuex+axios+echarts画一个动态更新的中国地图的方法
2017/12/19 Javascript
webpack写jquery插件的环境配置
2017/12/21 jQuery
JavaScript计算正方形面积
2019/11/26 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python中的集合类型知识讲解
2015/08/19 Python
Python中字符串的修改及传参详解
2016/11/30 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
Python3实现的简单验证码识别功能示例
2018/05/02 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
一款纯css3实现的圆形旋转分享按钮旋转角度可自己调整
2014/09/02 HTML / CSS
韩国三大免税店之一:THE GRAND 中文免税店
2016/07/21 全球购物
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
运动会闭幕式解说词
2014/02/21 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
志愿者服务感言
2014/02/27 职场文书
会计专业自荐信范文
2015/03/05 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
Redis批量生成数据的实现
2022/06/05 Redis