Bootstrap每天必学之导航


Posted in Javascript onNovember 26, 2015

1、导航(基础样式)

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。

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

☑ LESS版本:对应的源文件是navs.less

☑ Sass版本:对应的源文件是_navs.scss

☑ 编译后版本:对应源码是bootstrap.css文件第3450行~第3641行

导航基础样式

Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类。比如一个tab导航条的例子,他的实现方法就是为ul标签加入.nav和nav-tabs两个类样式。

<ul class="nav nav-tabs">
 <li><a href="##">Home</a></li>
 <li><a href="##">CSS3</a></li>
 <li><a href="##">Sass</a></li>
 <li><a href="##">jQuery</a></li>
 <li><a href="##">Responsive</a></li>
</ul>

Bootstrap每天必学之导航

/源码请查阅bootstrap.css文件第3450行~第3493行/

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

2、导航(标签形tab导航)

标签形导航,也称为选项卡导航。特别是在很多内容分块显示的时,使用这种选项卡来分组十分适合。

标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名,如:

<ul class="nav nav-tabs">
  <li><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li><a href="##">Responsive</a></li>
</ul>

运行的效果如下所示:

Bootstrap每天必学之导航

实现原理非常的简单,将菜单项(li)按块显示,并且让他们在同一水平上排列,然后定义非高亮菜单的样式和鼠标悬浮效果。代码如下:

/源码请查阅bootstrap.css文件第3494行~第3509行/

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

其实上例的效果和我们平时看到的选项卡效果并不一致。一般情况之下,选项卡教会有一个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class="active"”即可:

<ul class="nav nav-tabs">
 <li class="active"><a href="##">Home</a></li>
 …
</ul>

运行效果如下:

Bootstrap每天必学之导航

对应样式代码如下:

/源码请查阅bootstrap.css文件第3510行~第3518行/

.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””即可:

<ul class="nav nav-tabs">
  <li class="active"><a href="##">Home</a></li>
  …
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下:

Bootstrap每天必学之导航

实现这个效果的样式,在默认样式“.nav”中就带有:

/源码请查看bootstrap.css文件第3469行~第3478行/

.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插件,这部分将在后面的博客中会介绍。

3、导航(胶囊形(pills)导航)

胶囊形(pills)导航听起来有点别扭,因为其外形看起来有点像胶囊形状。但其更像我们平时看到的大众形导航。当前项高亮显示,并带有圆角效果。其实现方法和“nav-tabs”类似,同样的结构,只需要把类名“nav-tabs”换成“nav-pills”即可:

<ul class="nav nav-pills">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

实现效果样式代码:

/源码请查阅bootstrap.css文件第3563行~第3577行/

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

4、导航(垂直堆叠的导航)

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可(stacked就是堆的意思):

<ul class="nav nav-pills nav-stacked">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下:

Bootstrap每天必学之导航

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

/源码请查阅bootstrap.css文件第3578行~第3584行/

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

大家是否还记得,在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可:

<ul class="nav nav-pills nav-stacked">
 <li class="active"><a href="##">Home</a></li>
 <li><a href="##">CSS3</a></li>
 <li><a href="##">Sass</a></li>
 <li><a href="##">jQuery</a></li>
 <li class="nav-divider"></li>
 <li class="disabled"><a href="##">Responsive</a></li>
</ul>

运行效果如下:

Bootstrap每天必学之导航

实现样式:

/源码请查阅bootstrap.css文件第3485行~3490行/

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

或许你会问,如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢?答案是:在bootstrap V2.x版本可以,但在Bootstrap V3.x版本将这个效果取消了,可能作者觉得垂直选择项并不太常见,也不美观吧。

4、自适应导航(使用)

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使用。如:

<ul class="nav nav-tabs nav-justified">
  <li class="active"><a href="##">Home</a></li>
  <li><a href="##">CSS3</a></li>
  <li><a href="##">Sass</a></li>
  <li><a href="##">jQuery</a></li>
  <li><a href="##">Responsive</a></li>
</ul>

运行效果如下:

Bootstrap每天必学之导航

自适应导航(实现原理)

实现原理并不难,列表(<ul>)上设置宽度为“100%”,然后每个菜单项(<li>)设置了“display:table-cell”,让列表项以模拟表格单元格的形式显示:

/源码请查阅bootstrap.css文件第3585行~第3607行/

.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时,在样式上做了另外的处理。

/源码请查阅bootstrap.css文件第3519行~第3562行/

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

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

前面介绍的都是使用Bootstrap框架制作一级导航,但很多时候,在Web页面中是离不开二级导航的效果。那么在Bootstrap框架中制作二级导航就更容易了。只需要将li当作父容器,使用类名“dropdown”,同时在li中嵌套另一个列表ul,使用前面介绍下拉菜单的方法就可以:

<ul class="nav nav-pills">
  <li class="active"><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="##">CSS3</a></li>
   …
  </ul>
  </li>
  <li><a href="##">关于我们</a></li>
</ul>

运行效果如下:

Bootstrap每天必学之导航

通过浏览器调试工具,不难发现,点击有二级导航的菜单项,会自动添加“open”类名,再次点击就会删除添加的“open”类名:

Bootstrap每天必学之导航

简单点来说,就是依靠这个类名来控制二级导航显示与否,并且设置了背景色和边框:

/源码查看bootstrap.css文件第3479行~3484行/

.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
background-color: #eee;
border-color: #428bca;
}

大家回忆一下,在制作下拉菜单时,可以用分隔线,那么在二级导航中是否可以呢?我们一起来看看:

不用再说太多,只需要添加“<li class=”nav-divider”></li>”这样的一个空标签就可以了。

运行效果如下:

Bootstrap每天必学之导航

/源码请查看bootstrap.css文件第3485行~第3490行/

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

6、面包屑式导航

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

  • LESS版本:对应源文件breadcrumbs.less
  • Sass版本:对应源文件_breadcrumbs.scss
  • 编译出来的版本:源码对应bootstrap.css文件第4112行~第4129行

使用方法:

使用方式就很简单,为ol加入breadcrumb类:

<ol class="breadcrumb">
 <li><a href="#">首页</a></li>
 <li><a href="#">我的书</a></li>
 <li class="active">《图解CSS3》</li>
</ol>

想想看,当前菜单项是不需要链接的,所以也就不用a标签了。

Bootstrap每天必学之导航

实现原理:

看来不错吧!作者是使用li+li:before实现li与li之间的分隔符,所以这种方案在IE低版本就惨了(不支持)。

/源码查看bootstrap.css文件第4112行~第4129行/

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

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

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

Javascript 相关文章推荐
用AJAX返回HTML片段中的JavaScript脚本
Jan 04 Javascript
jquery validation插件表单验证的一个例子
Mar 03 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
Sep 06 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
angular 动态组件类型详解(四种组件类型)
Feb 22 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
js过滤HTML标签完整实例
Nov 26 #Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 #Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
Nov 26 #Javascript
Bootstrap每天必学之按钮
Nov 26 #Javascript
学习JavaScript设计模式(多态)
Nov 25 #Javascript
创建自己的jquery表格插件
Nov 25 #Javascript
一不小心就做错的JS闭包面试题
Nov 25 #Javascript
You might like
php 团购折扣计算公式
2011/11/24 PHP
JSON用法之将PHP数组转JS数组,JS如何接收PHP数组
2015/10/08 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
脚本收藏iframe
2006/07/21 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
JavaScript中数组Array.sort()排序方法详解
2017/03/01 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
element ui table 增加筛选的方法示例
2018/11/02 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
python类的继承实例详解
2017/03/30 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
Python datetime模块使用方法小结
2020/06/18 Python
html5 css3网站菜单实现代码
2013/12/23 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
《猴子种树》教学反思
2014/02/14 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
践行三严三实心得体会
2014/10/13 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL