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 相关文章推荐
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
Jquery根据浏览器窗口改变调整大小的方法
Feb 07 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
js判断文件类型大小并给出提示的实现方法
Jan 03 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
May 06 Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 Javascript
JS精髓原型链继承及构造函数继承问题纠正
Jun 16 Javascript
详解小程序云开发数据库
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
简单的过滤字符串中的HTML标记
2006/12/25 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
PHP等比例压缩图片的实例代码
2018/07/26 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
prettify 代码高亮着色器google出品
2010/12/28 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
如何防止JavaScript自动插入分号
2015/11/05 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
vue组件库的在线主题编辑器的实现思路
2020/04/03 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
python基础学习之如何对元组各个元素进行命名详解
2018/07/12 Python
通过python爬虫赚钱的方法
2019/01/29 Python
使用python itchat包爬取微信好友头像形成矩形头像集的方法
2019/02/21 Python
pytorch 在sequential中使用view来reshape的例子
2019/08/20 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
python和JavaScript哪个容易上手
2020/06/23 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
兼职学生的自我评价
2013/11/24 职场文书
上课打牌的检讨书
2014/02/15 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL