Bootstrap每天必学之导航组件


Posted in Javascript onApril 25, 2016

在bootstrap框架中将导航独立出来成为一个导航组件,根据不同的版本,可以找到相应的源码:

LESS:  navs.less

SASS:  _navs.scss 

标签形导航,也称选项卡导航

标签形导航是通过.nav-tabs样式来实现的,在制作标签形导航时需要在原导航类名为.nav的容器上追加类名.nav-tabs

<ul class="nav nav-tabs">
  <li><a href="#">导航标题1</a></li>
  <li><a href="#">导航标题2</a></li>
  <li><a href="#">导航标题3</a></li>
  <li><a href="#">导航标题4</a></li>
  <li><a href="#">导航标题5</a></li>
 </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;
}

一般情况下,选项卡都会有个当前选中项,只需要在其(li)标签上添加类名.active即可

<ul class="nav nav-tabs">
  <li class="active"><a href="#">导航标题1</a></li>
  <li><a href="#">导航标题2</a></li>
  <li><a href="#">导航标题3</a></li>
  <li><a href="#">导航标题4</a></li>
  <li><a href="#">导航标题5</a></li>
</ul>
.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;
}

除了当前选项外,有的选项卡还带有禁用状态,实现这样的效果,只需在标签项上添加类名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;
}

如果要实现点击菜单项就可以切换内容的效果,就需要配合js插件

胶囊形(pills)导航

当前高亮显示,并带圆角效果,其实现方法和选项卡导航类似,同样的结构,只需将类名.nav-tabs换成类名.nav-pills

.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

与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列,然后给相邻导航项留有一定的间距

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

<ul class="nav nav-pills nav-stacked">
  <li><a href="#">导航标题0</a></li>
  <li class="active"><a href="#">导航标题1</a></li>
  <li><a href="#">导航标题2</a></li>
  <li><a href="#">导航标题3</a></li>
  <li><a href="#">导航标题4</a></li>
  <li class="disabled"><a href="#">导航标题5</a></li>
</ul>

垂直堆叠导航像下拉菜单组与组间有一分割线一样,导航项之间也有分割线这样的效果,只需在导航项之间添加<li class=”divider”></li>

<ul class="nav nav-pills nav-stacked">
  <li ><a href="#">导航标题0</a></li>
  <li class="active"><a href="#">导航标题1</a></li>
  <li><a href="#">导航标题2</a></li>
  <li class="nav-divider"></li>
  <li><a href="#">导航标题3</a></li>
  <li><a href="#">导航标题4</a></li>
  <li class="disabled"><a href="#">导航标题5</a></li>
 </ul>
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}

自适应导航

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度,自适应导航和之前提到的.btn-group-justified制作的自适应按钮组件一样,不过在制作自适应导航时类名.nav-justified需和.nav-tabs或.nav-pills配合一起使用

原理:

列表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;
 }
}

上面有一个媒体查询条件:@media(min-width:768px){……}表示自适应导航仅在浏览器视窗宽度大于768px才能按上面的风格显示,但浏览器视窗宽度小于768px时,会按下图的风格显示

Bootstrap每天必学之导航组件

.nav-tabs和.nav-justified配合在一起使用,也就是自适应选项卡导航,浏览器视窗宽度小于768px时,在样式上做了另外的处理

.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;
 }
}

导航加下拉菜单(二级导航)

制做二级导航只需将li当做父容器,使用类名.dropdown,同时在li中嵌套另一个ul列表

<ul class="nav nav-tabs">
  <li><a href="#">导航菜单1</a></li>
  <li><a href="#">导航菜单2</a></li>
  <li><a href="#">导航菜单3</a></li>
  <li><a href="#">导航菜单4</a></li>
  <li class="dropdown">
   <a class="dropdown-toggle"data-toggle="dropdown">
    导航菜单5
    <span class="caret"></span>
   </a>
   <ul class="dropdown-menu">
    <li><a href="#">下拉菜单1</a></li>
    <li><a href="#">下拉菜单2</a></li>
    <li><a href="#">下拉菜单3</a></li>
    <li><a href="#">下拉菜单4</a></li>
   </ul>
  </li>
  <li><a href="#">导航菜单6</a></li>
 </ul>

面包屑式导航

面包屑一般用于导航,主要的作用是告诉用户现在所处页面的位置,在bootstrap框架中面包屑也是一个独立的模块组件。

LESS: breadcrumbs.less

SASS:_breadcrumbs.scss

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">图解css</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: #999;
}

上面使用li+li:before实现li与li之间的分隔符,这种方案在低版本ie不支持

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 Javascript
javascript 回调函数详解
Nov 11 Javascript
Webpack 实现 AngularJS 的延迟加载
Mar 02 Javascript
js仿3366小游戏选字游戏
Apr 14 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
基于JavaScript实现前端数据多条件筛选功能
Aug 19 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 #Javascript
javascript断点调试心得分享
Apr 23 #Javascript
基于 Node.js 实现前后端分离
Apr 23 #Javascript
javascript学习指南之回调问题
Apr 23 #Javascript
探寻JavaScript中this指针指向
Apr 23 #Javascript
javascript中this指向详解
Apr 23 #Javascript
JavaScript实现Base64编码转换
Apr 23 #Javascript
You might like
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
php中使用GD库做验证码
2016/03/31 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
php数组遍历类与用法示例
2019/05/24 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
jquery中输入验证中一个不错的效果
2010/08/21 Javascript
jquery ajax post提交数据乱码
2013/11/05 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
Web前端框架bootstrap实战【第一次接触使用】
2016/12/28 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python的垃圾回收机制深入分析
2014/07/16 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
PyQt5基本控件使用之消息弹出、用户输入、文件对话框的使用方法
2019/08/06 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
python 从list中随机取值的方法
2020/11/16 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
EJB面试题
2015/07/28 面试题
大专学生推荐信范文
2013/11/19 职场文书
酒鬼酒广告词
2014/03/21 职场文书
大学军训自我鉴定大全
2014/09/18 职场文书
2014年卫生工作总结
2014/11/27 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python