Bootstrap2用户指南
4.5.4 响应式导航条
阅读(

Bootstrap基础

Bootstrap框架

Bootstrap基本样式

Bootstrap组件

下拉菜单

按钮组

按钮菜单

导航

导航条

固定导航条

导航条组件

基本导航条

响应式导航条

响应式导航条能够根据浏览器窗口宽度,自动调整导航条的显示状态。一般会为响应式导航提供一个导航条和一个按钮。

当浏览器窗口足够宽时,正常显示导航条而不显示按钮。当浏览器窗口宽度缩小到一定程度时,自动隐藏导航条并显示按钮。此时,用户点击按钮,隐藏的导航条就会显示出来。

要使用Bootstrap中的响应式导航条,需要把导航条放在 .nav-collapse.collapse 的容器中,并添加一个 .btn-navbar 的按钮。定义按钮时,需要两个 data-* 属性:data-toggle 会告诉 JavaScript 这个按钮要做什么,data-target 表示点击按钮时要显示的元素。

可以使用任何元素(比如,一张图片)来创建按钮,而Bootstrap中的标准按钮,是三个 class="icon-bar" 的 <span> 元素。如:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target="#mynavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Be sure to leave the brand out there if you want it shown -->
      <a class="brand" href="#">Title</a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse" id="mynavbar" >
        <!-- .nav, .navbar-search, .navbar-form, .dropdown, etc -->
        <ul class="nav">
          <li class="active"><a href="#">Home</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">Dropdown <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form class="navbar-search pull-right" action="">
          <input type="text" class="search-query span2" placeholder="Search">
        </form>
      </div><!-- /.nav-collapse -->
    </div>
  </div><!-- /navbar-inner -->
</div><!-- /navbar -->

此外,要实现响应式导航条,还必须包含 bootstrap-responsive.css 和 collapse.js(或完整的 bootstrap.js)文件。

现在,在浏览器中预览,当窗口足够宽时,显示效果如图 4‑37所示:

Bootstrap响应式导航条宽屏下效果
图4-37 Bootstrap响应式导航条宽屏下效果

然后,不断调整窗口大小,当窗口中不足以容纳整个导航条时,就会自动隐藏导航条并显示按钮。效果如图 4‑38所示:

Bootstrap响应式导航条窄屏下效果
图4-38 Bootstrap响应式导航条窄屏下效果

此时,用户点击按钮,隐藏的导航条就会显示出来。效果如图 4‑39所示:

Bootstrap响应式导航条显示隐藏的导航条
图4-39 Bootstrap响应式导航条显示隐藏的导航条

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验