JS组件Bootstrap导航条使用方法详解


Posted in Javascript onApril 29, 2016

导航条是在您的应用或网站中作为导航标头的响应式元组件。

1、默认的导航条

导航条在移动设备上可以折叠(并且可开可关),且在可用的视口宽度增加时变为水平展开模式
定制折叠模式与水平模式的阈值
根据你所放在导航条上的内容的长度,也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。
第一步:
最外面的容器nav标签,并添加nav-bar样式类,表示这里面属于导航条

<nav class="navbar navbar-default" role="navigation"> 
</nav>

 效果:

JS组件Bootstrap导航条使用方法详解

第二步:增加header

<nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <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="#" class="navbar-brand">品牌</a> 
  </div> 
 </nav>

按钮标签里嵌套了三个span的icon。然后给与navbar-toggle样式类和属性collapse(收起),点击的时候目标为data-target。
当窗口缩小到一定程度,右侧的效果显现。

JS组件Bootstrap导航条使用方法详解

第三步:嵌套下拉菜单,form表单,下拉菜单。
代码:

<h1 class="page-header">导航条</h1> 
 <nav class="navbar navbar-default" role="navigation"> 
  <div class="navbar-header"> 
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
  <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="#" class="navbar-brand">品牌</a> 
  </div> 
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
  <!--嵌套下拉菜单--> 
  <ul class="nav navbar-nav"> 
   <li class="active"><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li><a href="#">Link</a></li> 
   <li class="dropdown"> 
   <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
   下拉<b class="caret"></b> 
   </a> 
   <ul class="dropdown-menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Action</a></li> 
   </ul> 
   </li> 
  </ul> 
   
  <!--嵌套表单--> 
  <form action="" class="navbar-form navbar-left" role="search"> 
   <div class="form-group"> 
   <input type="text" class="form-control" /> 
   </div> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form> 
  <!----> 
  </div> 
 </nav>

预览:

JS组件Bootstrap导航条使用方法详解

增强导航条的可访问性
要增强可访问性,一定要给每个导航条加上role="navigation"。

2、表单
将表单放置于.navbar-form之内可以呈现很好的垂直对齐,并在较窄的viewport中呈现折叠状态。使用对齐选项可以确定其在导航条上出现的位置。

通过使用mixin,.navbar-form和 .form-inline共享了很多代码。

代码

<form action="" class="navbar-form navbar-left" role="search"> 
   <div class="form-group"> 
   <input type="text" class="form-control" /> 
   </div> 
   <button type="button" class="btn btn-default">Submit</button> 
   
  </form>

JS组件Bootstrap导航条使用方法详解

为输入框添加label标签
如果你没有为输入框添加label标签,屏幕阅读器将会遇到问题。对于导航条内的表单,可以通过.sr-only class隐藏label标签。

3、按钮
代码:
<button type="button" class="btn btn-default navbar-btn">登陆</button>
预览:

JS组件Bootstrap导航条使用方法详解

4、文本
把文本包裹在.navbar-text中时,为了有正确的行距和颜色,通常使用<p>标签。
代码段:
<p class="navbar-text">文本</p>
5、非导航的链接
或许你希望在标准的导航组件之外添加标准链接,那么,使用.navbar-link class可以让链接有正确的默认颜色和反色。
代码段:

<p class="navbar-text navbar-right">这个是<a href="#" class="navbar-link">链接</a></p>
 
6、组件对齐
用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的<ul>里。

这些class是.pull-left和.pull-right的mixin版本,但是他们被限定在了媒体查询中,这样可以更容易的在各种尺寸的屏幕上处理导航条组件。

7、固定在顶部
添加.navbar-fixed-top可以让导航条固定在顶部。效果就不上了。
需要为body标签设置内补(padding)
这个固定的导航条会遮住页面上的其它内容,除非你给<body>的上方设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是50px。

body { padding-top: 70px; }
一定要放在Bootstrap CSS的核心文件之后。(覆盖问题)
8、固定在底部
用.navbar-fixed-bottom代替。
需要为body标签设置内部(padding)
这个固定的导航条会遮住页面上的其它内容,除非你给<body>底部设置了padding。用你自己的值,或用下面给出的代码都可以。提示:导航条的默认高度是50px。

body { padding-bottom: 70px; }
一定要在加载Bootstrap CSS的核心后使用它。
9、静止在顶部
通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是,你不用给body添加padding。
10、反色的导航条
通过添加.navbar-inverse类可以改变导航条的外观。

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

以上就是关于Bootstrap 导航条使用方法的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
Node.js实战 建立简单的Web服务器
Mar 08 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
Jquery submit()无法提交问题
Apr 21 Javascript
Javascript中获取对象的原型对象的方法小结
Feb 25 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
微信网页授权并获取用户信息的方法
Jul 30 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue完美实现el-table列宽自适应
May 08 Vue.js
Treegrid的动态加载实例代码
Apr 29 #Javascript
Easyui 之 Treegrid 笔记
Apr 29 #Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 #Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
Apr 29 #Javascript
JavaScript函数柯里化详解
Apr 29 #Javascript
easyui validatebox验证
Apr 29 #Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 #Javascript
You might like
jquery.combobox中文api和例子,修复了上面的小bug
2011/03/28 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
Vue项目安装插件并保存
2019/01/28 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
解密Python中的描述符(descriptor)
2015/06/03 Python
六个窍门助你提高Python运行效率
2015/06/09 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
python实现聚类算法原理
2018/02/12 Python
对python3.4 字符串转16进制的实例详解
2019/06/12 Python
Django模板导入母版继承和自定义返回Html片段过程解析
2019/09/18 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
使用Html5多媒体实现微信语音功能
2019/07/26 HTML / CSS
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
大学生党课思想汇报
2013/12/29 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
党员教师一句话承诺
2014/05/30 职场文书
学校创先争优活动总结
2014/08/28 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
2015财务年终工作总结范文
2015/05/22 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
springboot+VUE实现登录注册
2021/05/27 Vue.js
Java线程的6种状态与生命周期
2022/05/11 Java/Android