整理关于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使用hide方法隐藏元素自身用法实例
Mar 30 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
requireJS使用指南
Apr 27 Javascript
解决bootstrap导航栏navbar在IE8上存在缺陷的方法
Jul 01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
详解给Vue2路由导航钩子和axios拦截器做个封装
Apr 10 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
validform表单验证的实现方法
Mar 08 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php+redis消息队列实现抢购功能
2018/02/08 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
JavaScript Event学习第五章 高级事件注册模型
2010/02/07 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
特殊日期提示功能的实现方法
2016/06/16 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
详解如何使用Python编写vim插件
2017/11/28 Python
对python数据切割归并算法的实例讲解
2018/12/12 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python celery原理及运行流程解析
2020/06/13 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
CSS3系列之3D制作方法案例
2017/08/14 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
让ie浏览器成为支持html5的浏览器的解决方法(使用html5shiv)
2014/04/08 HTML / CSS
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
物业管理个人自我评价
2013/11/08 职场文书
个人公开承诺书
2014/03/28 职场文书
机关党员三严三实心得体会
2014/10/13 职场文书
党的群众路线教育实践活动整改方案
2014/10/28 职场文书
任命书标准格式
2015/03/02 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
电力企业职工培训心得体会
2016/01/11 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL