整理关于Bootstrap导航的慕课笔记


Posted in Javascript onMarch 29, 2017

整理自慕课笔记

基础样式

导航对于一位前端人员来说并不陌生。可以说导航是一个网站重要的元素组件之一,可以便于用户查找网站所提供的各项功能服务。导航的制作方法也是千奇百怪,五花八门。在这一节中将向大家介绍如何使用Bootstrap框架制作各式各样的导航。
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式,必须附加另外一个样式才会有效,比如“nav-tabs”、“nav-pills”之类

<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>

标签形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框架也相应提供了。假设我们想让“Home”项为当前选中项,只需要在其标签上添加类名“class=”active””即可:

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

除了当前项之外,有的选项卡还带有禁用状态,实现这样的效果,只需要在标签项上添加“class=”disabled””即可:

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

注意:我们看到的选项卡效果,点击菜单项就可以切换内容,如果要实现这样的效果需要配合js插件,这部分将在后面的教程中会介绍。

胶囊形(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>

垂直堆叠的导航

在实际运用当中,除了水平导航之外,还有垂直导航,就类似前面介绍的垂直排列按钮一样。制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-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>

垂直堆叠导航与胶囊形导航相比,主要是让导航项不浮动,让其垂直排列,然后给相邻导航项留有一定的间距。大家是否还记得,在下拉菜单一节中,下拉菜单组与组之间有一个分隔线。其实在垂直堆叠导航也具有这样的效果,只需要添加在导航项之间添加<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>

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

自适应导航

使用

自适应导航指的是导航占据容器全部宽度,而且菜单项可以像表格的单元格一样自适应宽度。自适应导航和前面使用“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>

实现原理

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

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

前面介绍的都是使用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>

面包屑式导航

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

使用方法

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

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

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

Javascript 相关文章推荐
jquery 操作表格实现代码(多种操作打包)
Mar 20 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
Aug 04 Javascript
Jquery api 速查表分享
Jan 12 Javascript
在WordPress中加入Google搜索功能的简单步骤讲解
Jan 04 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作
Feb 27 jQuery
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
layui中的switch开关实现方法
Sep 03 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 #Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 #Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 #Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 #Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 #Javascript
Mongoose经常返回e11000 error的原因分析
Mar 29 #Javascript
js实现一个简单的数字时钟效果
Mar 29 #Javascript
You might like
php FPDF类库应用实现代码
2009/03/20 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
json 定义
2008/06/10 Javascript
JavaScript Chart 插件整理
2010/06/18 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS中的hasOwnProperty()和isPrototypeOf()属性实例详解
2016/08/11 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:08:43]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第一场 1月9日
2021/03/11 DOTA
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
python循环定时中断执行某一段程序的实例
2019/06/29 Python
Python re 模块findall() 函数返回值展现方式解析
2019/08/09 Python
python实现while循环打印星星的四种形状
2019/11/23 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
CSS3 渐变(Gradients)之CSS3 径向渐变
2016/07/08 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
phpquery中文手册
2021/03/18 PHP
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
后勤人员岗位职责
2013/12/17 职场文书
工作保证书怎么写
2015/02/28 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
使用JS实现简易计算器
2021/06/14 Javascript
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL