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 相关文章推荐
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
Javascript中Array.prototype.map()详解
Oct 22 Javascript
jQuery聚合函数实例
May 21 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
jQuery中图片展示插件highslide.js的简单dom
Apr 22 jQuery
JavaScript中发出HTTP请求最常用的方法
Jul 12 Javascript
详解angular2.x创建项目入门指令
Oct 11 Javascript
详解vue 路由跳转四种方式 (带参数)
Apr 28 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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 小技巧 -- LAST_INSERT_ID
2009/11/24 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
javascript学习笔记(十七) 检测浏览器插件代码
2012/06/20 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Bootstrap的class样式小结
2016/12/01 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
ES6知识点整理之模块化的应用详解
2019/04/15 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
如何利用python生成MD5并去重
2020/12/07 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
《石榴》教学反思
2014/03/02 职场文书
买卖协议书范本
2014/04/21 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2014年党支部工作总结
2014/11/13 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server
ant design vue的form表单取值方法
2022/06/01 Vue.js