当前位置：首页 > 资讯 > 技术文档

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

时间：2020-08-01 03:54 编辑：来源：阅读：
扫一扫，手机访问

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

导航条是在您的应用或网站中作为导航标头的响应式元组件。 [b]1、默认的导航条 [/b] 导航条在移动设备上可以折叠（并且可开可关），且在可用的视口宽度增加时变为水平展开模式 [b]定制折叠模式与水平模式的阈值 [/b]根据你所放在导航条上的内容的长度，也许你需要调整导航条进入折叠模式和水平模式的阈值。通过改变@grid-float-breakpoint变量的值或加入您自己的媒体查询CSS代码均可实现你的需求。 [b]第一步： [/b]最外面的容器nav标签，并添加nav-bar样式类，表示这里面属于导航条

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

效果： [img]http://files.jb51.net/file_images/article/201604/2016429105636950.png?2016329105818[/img] [b]第二步[/b]：增加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。当窗口缩小到一定程度，右侧的效果显现。 [img]http://files.jb51.net/file_images/article/201604/2016429105940091.png?2016329105953[/img] [b]第三步：[/b]嵌套下拉菜单，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>

预览： [img]http://files.jb51.net/file_images/article/201604/2016429110035734.png?201632911042[/img] 增强导航条的可访问性要增强可访问性，一定要给每个导航条加上role="navigation"。 [b]2、表单 [/b]将表单放置于.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>

[img]http://files.jb51.net/file_images/article/201604/2016429110105139.png?201632911114[/img] 为输入框添加label标签如果你没有为输入框添加label标签，屏幕阅读器将会遇到问题。对于导航条内的表单，可以通过.sr-only class隐藏label标签。 [b]3、按钮 [/b]代码： <button type="button" class="btn btn-default navbar-btn">登陆</button> 预览： [img]http://files.jb51.net/file_images/article/201604/2016429110139489.png?201632911146[/img] [b]4、文本 [/b]把文本包裹在.navbar-text中时，为了有正确的行距和颜色，通常使用<p>标签。代码段： <p class="navbar-text">文本</p> [b]5、非导航的链接 [/b]或许你希望在标准的导航组件之外添加标准链接，那么，使用.navbar-link class可以让链接有正确的默认颜色和反色。代码段：

[url=#] [b]6、组件对齐 [/b]用.navbar-left或者.navbar-right工具类给导航链接、表单、按钮或文本对齐。两种类都用到在特定方向的CSS浮动样式。例如，要对齐导航链接，就要把它们放在个分开的、应用了工具类的<ul>里。这些class是.pull-left和.pull-right的mixin版本，但是他们被限定在了媒体查询中，这样可以更容易的在各种尺寸的屏幕上处理导航条组件。 [b]7、固定在顶部 [/b]添加.navbar-fixed-top可以让导航条固定在顶部。效果就不上了。需要为body标签设置内补（padding）这个固定的导航条会遮住页面上的其它内容，除非你给<body>的上方设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。 body { padding-top: 70px; } 一定要放在Bootstrap CSS的核心文件之后。（覆盖问题） [b]8、固定在底部[/b] 用.navbar-fixed-bottom代替。需要为body标签设置内部（padding）这个固定的导航条会遮住页面上的其它内容，除非你给<body>底部设置了padding。用你自己的值，或用下面给出的代码都可以。提示：导航条的默认高度是50px。 body { padding-bottom: 70px; } 一定要在加载Bootstrap CSS的核心后使用它。 [b]9、静止在顶部 [/b]通过添加.navbar-static-top即可创建一个与页面的导航条。它会随着页面向下滚动而消失。和.navbar-fixed-*类不同的是，你不用给body添加padding。 [b]10、反色的导航条[/b] 通过添加.navbar-inverse类可以改变导航条的外观。如果大家还想深入学习，可以点击这里[/url]进行学习，再为大家附3个精彩的专题： [url=http://www.1sucai.cn/Special/334.htm]Bootstrap学习教程[/url] [url=http://www.1sucai.cn/Special/769.htm]Bootstrap实战教程[/url] [url=http://www.1sucai.cn/Special/854.htm]Bootstrap插件使用教程[/url] 以上就是关于Bootstrap 导航条使用方法的详细介绍，希望对大家的学习有所帮助。

全部评论(0)

上一篇：常常会用到的截取字符串substr()、substring()、slice()方法详解
下一篇：详解WordPress中分类函数wp_list_categories的使用

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部