导航条中的按钮


导航条中的按钮

对于不包含在 <form> 中的 <button> 元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。

您可以使用 class .navbar-btn 向不在 <form> 中的 <button> 元素添加按钮,按钮在导航栏上垂直居中。.navbar-btn 可被使用在 <a> 和 <input> 元素上。

不要在 .navbar-nav 内的 <a> 元素上使用 .navbar-btn,因为它不是标准的 button class。

下面的实例演示了这点:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4.    <title>Bootstrap 实例 - 导航栏中的按钮</title> 
  5.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 
  6.    <script src="/scripts/jquery.min.js"></script> 
  7.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  8. </head> 
  9. <body> 
  10.  
  11. <nav class="navbar navbar-default" role="navigation"> 
  12.    <div class="navbar-header"> 
  13.       <a class="navbar-brand" href="#">W3Cschool</a> 
  14.    </div> 
  15.    <div> 
  16.       <form class="navbar-form navbar-left" role="search"> 
  17.          <div class="form-group"> 
  18.             <input type="text" class="form-control" placeholder="Search"> 
  19.          </div> 
  20.          <button type="submit" class="btn btn-default">提交按钮</button> 
  21.       </form>     
  22.       <button type="button" class="btn btn-default navbar-btn"> 
  23.          导航栏按钮 
  24.       </button> 
  25.    </div> 
  26. </nav> 
  27.  
  28. </body> 
  29. </html> 

有一些对于为辅助设备提供可识别标签的方法,例如, aria-labelaria-labelledby 或者 title 属性。如果这些方法都没有,屏幕阅读器将使用 placeholder 属性(如果这个属性存在的话),但是请注意,使用 placeholder 代替其他识别标签的方式是不推荐的。

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

基于情境的用法

就像标准的 按钮类 一样,.navbar-btn 可以被用在 <a><input> 元素上。然而,在 .navbar-nav 内,.navbar-btn 和标准的按钮类都不应该被用在 <a> 元素上。


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)