响应式自动折叠的导航条

W3CSchool > bootstrap3中文手册 > Bootstrap 导航条 > 响应式自动折叠的导航条

响应式的导航栏

小屏幕自动折叠。为了给导航栏添加响应式特性,您要折叠的内容必须包裹在带有 classes .collapse、.navbar-collapse 的 <div> 中。

响应式导航条依赖 collapse 插件,定制 Bootstrap 的话时候必将其包含。

折叠起来的导航栏实际上是一个带有 class .navbar-toggle 及两个 data- 元素的按钮。

第一个是 data-toggle,用于告诉 JavaScript 需要对按钮做什么,第二个是 data-target,指示要切换到哪一个元素。

三个带有 class .icon-bar 的 <span> 创建所谓的汉堡按钮。这些会切换为 .nav-collapse <div> 中的元素。

下面的实例演示了这点:

 
  1.  
  2. <!DOCTYPE html> 
  3. <html> 
  4. <head> 
  5.    <title>Bootstrap 实例 - 响应式的导航栏</title> 
  6.    <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet"
  7.    <script src="/scripts/jquery.min.js"></script> 
  8.    <script src="/bootstrap/js/bootstrap.min.js"></script> 
  9. </head> 
  10. <body> 
  11.  
  12. <nav class="navbar navbar-default" role="navigation"
  13.    <div class="navbar-header"
  14.       <button type="button" class="navbar-toggle" data-toggle="collapse"  
  15.          data-target="#example-navbar-collapse"
  16.          <span class="sr-only">切换导航</span> 
  17.          <span class="icon-bar"></span> 
  18.          <span class="icon-bar"></span> 
  19.          <span class="icon-bar"></span> 
  20.       </button> 
  21.       <a class="navbar-brand" href="#">W3Cschool</a> 
  22.    </div> 
  23.    <div class="collapse navbar-collapse" id="example-navbar-collapse"
  24.       <ul class="nav navbar-nav"
  25.          <li class="active"><a href="#">iOS</a></li> 
  26.          <li><a href="#">SVN</a></li> 
  27.          <li class="dropdown"
  28.             <a href="#" class="dropdown-toggle" data-toggle="dropdown"
  29.                Java <b class="caret"></b> 
  30.             </a> 
  31.             <ul class="dropdown-menu"
  32.                <li><a href="#">jmeter</a></li> 
  33.                <li><a href="#">EJB</a></li> 
  34.                <li><a href="#">Jasper Report</a></li> 
  35.                <li class="divider"></li> 
  36.                <li><a href="#">分离的链接</a></li> 
  37.                <li class="divider"></li> 
  38.                <li><a href="#">另一个分离的链接</a></li> 
  39.             </ul> 
  40.          </li> 
  41.       </ul> 
  42.    </div> 
  43. </nav> 
  44.  
  45.  
  46. </body> 
  47. </html> 

浏览器折叠后或小屏幕浏览时的效果如下:

响应式的导航栏

为了实现以上这些功能,您必须包含 Bootstrap 折叠(Collapse)插件。

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

学习导航


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