支持表单的导航条

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 支持表单的导航条

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

导航栏中的表单

导航栏中的表单不是使用 Bootstrap 表单 章节中所讲到的默认的 class,它是使用 .navbar-form 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.    </div> 
  23. </nav> 
  24.  
  25.  
  26. </body> 
  27. </html> 

注意,.navbar-form.form-inline 的大部分代码都一样,内部实现使用了 mixin。 某些表单组件,例如输入框组,可能需要设置一个固定宽度,从而在导航条内有合适的展现。

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

移动设备上的注意事项

在移动设备上,对于在 fixed 定位的元素内使用表单控件的情况有一些注意事项。请参考我们提供的浏览器支持情况相关的文档 。

为输入框添加 label 标签

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


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

学习导航


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