bootstrap中的导航条实例代码详解


Posted in Javascript onMay 20, 2019

一、和导航的区别

1.导航条比导航多了一个条字

2.直接上图

导航:

bootstrap中的导航条实例代码详解

 导航条:

bootstrap中的导航条实例代码详解

简单文字描述: 由两张图看出,导航内容比较简单,而导航条可以包含导航及其他元素,如表单,搜索框等,并且通常导航条会有一个区别于页面的背景色。

二、在页面中定义导航条

方法:

为父容器添加类名navbar navbar-default。navbar-default类用来规定导航条的颜色,可以更改为navbar-inverse来让导航条反色显示。bootstrap官网建议使用nav元素。但也常用div元素,建议用div元素时增加role="navigation"属性,该属性对一些特殊的辅助设备友好。

结构:

标题或者logo放在类名为.navbar-header>.navbar-brand的容器中,其他条目可以放在类名为.nav navbar-nav的容器中

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">MY WEBSITE</a>
  </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目一</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目二</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目三</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目四</a></li>
 </ul>
</div>

包含元素:

1.表单:form 添加类名navbar-form
2.按钮:添加类名navbar-btn(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
3.文本:添加类名navbar-text(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
4.链接:添加类名navbar-link(需和类名为“navbar-nav”或"navbar-brand"的元素配合使用,且数量不能多)
5.二级菜单:(见下面代码)

<div class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">MY WEBSITE</a>
  </div>
 <ul class="nav navbar-nav">
  <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
  <li class="dropdown">
   <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" data-toggle="dropdown" class="dropdown-toggle">水果<span class="caret"></span></a>
   <ul class="dropdown-menu">
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >苹果</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >橘子</a></li>
   <li ><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >香蕉</a></li>
   </ul>
  </li>
  <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" >蔬菜</a></li>
  <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" >哈哈</a></li>
  <li><a href="##" rel="external nofollow" rel="external nofollow" rel="external nofollow" >呵呵</a></li>
 </ul>
</div>

位置样式:

•导航条内元素左浮动:左浮动的元素添加类名navbar-left
•导航条内元素右浮动:右浮动的元素添加类名navbar-right
•导航条固定在浏览器窗口顶部:导航条父容器添加类名navbar-fixed-top
•导航条固定在浏览器窗口底部:导航条父容器添加类名navbar-fixed-bottom

注意:让导航条固定在浏览器窗口顶部或底部会遮盖到页面顶部或底部的内容,解决办法为:给body设置合适的内边距(温馨提示:导航条默认高度为50px)。

三、响应式

目的: 让导航条内容比较多的时候,在窄屏幕设备上显示更加友好

表现: 宽屏正常显示,窄屏时隐藏一部分条目,并调整其排列方式为垂直排列,然后通过一个按钮单击显示

宽屏显示:

bootstrap中的导航条实例代码详解

 窄屏显示:

bootstrap中的导航条实例代码详解

 窄屏展开:

bootstrap中的导航条实例代码详解

方法:

1.将想要被折叠的元素包裹在一个类名为"collapse navbar-collapse"的div中

2.定义想要显示的图标,可以将其放在类名为“navbar-header”的元素中

<button class="navbar-toggle" type="button" data-toggle="collapse">
 <span class="sr-only">Toggle Navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
</button>

完整代码:

<div class="navbar navbar-default" role="navigation">
 <div class="navbar-header">
  <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".test">
   <span class="sr-only">Toggle Navigation</span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
   <span class="icon-bar"></span>
  </button>
  <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="navbar-brand">LOGO</a>
 </div>
 <div class="collapse navbar-collapse test">
  <ul class="nav navbar-nav">
   <li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目一</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目二</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目三</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目四</a></li>
   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >条目五</a></li>
  </ul>
 </div>
</div>

1.为隐藏元素的父标签添加一个class类名或id名,然后让button的data-target链接到该元素:data-target=".class/#id"

响应式的临界点为768px,即当屏幕大于768px时原样显示,小于768px时改变样式

路径导航(面包屑导航)

<ol class="breadcrumb">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Library</a></li>
 <li class="active">Data</li>
</ol>

样式:

bootstrap中的导航条实例代码详解

总结

以上所述是小编给大家介绍的bootstrap中的导航条实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
bootstrap日期插件daterangepicker使用详解
Oct 19 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
如何vue使用el-table遍历循环表头和表体数据
Apr 26 Vue.js
详解小程序云开发数据库
May 20 #Javascript
VUE脚手架具体使用方法
May 20 #Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 #Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 #Javascript
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
You might like
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
php实现登陆模块功能示例
2016/10/20 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
JavaScript鼠标特效大全
2016/09/13 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
使用canvas进行图像编辑的实例
2017/08/29 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
easy_install python包安装管理工具介绍
2013/02/10 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
Python基于递归实现电话号码映射功能示例
2018/04/13 Python
对python 各种删除文件失败的处理方式分享
2018/04/24 Python
python实现简单登陆系统
2018/10/18 Python
python中os包的用法
2020/06/01 Python
查看keras各种网络结构各层的名字方式
2020/06/11 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
在C语言中实现抽象数据类型什么方法最好
2014/06/26 面试题
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
优秀员工个人的自我评价
2013/11/29 职场文书
路政管理专业个人自荐信范文
2013/11/30 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
暑假学习心得体会
2014/09/02 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
2015年青年教师工作总结
2015/05/25 职场文书
cf战队宣传语
2015/07/13 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Springboot-cli 开发脚手架,权限认证,附demo演示
2022/04/28 Java/Android