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 29 Javascript
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
初学JavaScript第二章
Sep 30 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
JS实现双击编辑可修改状态的方法
Aug 14 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 Javascript
vue.js中$watch的用法示例
Oct 04 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
JavaScript中如何调用Java方法
Sep 16 Javascript
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
深入分析使用mysql_fetch_object()以对象的形式返回查询结果
2013/06/05 PHP
PHP自动生成后台导航网址的最佳方法
2013/08/27 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
js表格分页实现代码
2009/09/18 Javascript
js实现单一html页面两套css切换代码
2013/04/11 Javascript
jQuery下的动画处理总结
2013/10/10 Javascript
JS Date函数整理方便使用
2013/10/23 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
2016/05/05 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
javascript获取以及设置光标位置
2017/02/16 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
JS作用域链详解
2017/06/26 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
关于vue编译版本引入的问题的解决
2018/09/17 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
2019/04/17 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
Python实现代码统计工具
2019/09/19 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
羽毛球社团活动总结
2014/06/27 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
大学生团日活动总结
2015/05/06 职场文书
上甘岭观后感
2015/06/10 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
Node.js实现断点续传
2021/06/23 Javascript