响应式导航栏

默认的导航栏

创建一个默认的导航栏的步骤如下：
向

标签添加navbar、navbar-default类。
向

标签添加 role=”navigation”，有助于增加可访问性。
向

元素添加一个标题 class=”navbar-header”，内部包含了带有navbar-brand类 的元素。这会让文本看起来更大一号。
为了向导航栏添加链接，只需要简单地添加带有nav、navbar-nav类的无序列表即可。

代码如下：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">Branda>
    div>
    <div>
        <ul class="nav navbar-nav">
            <li><a href="#">首页a>li>
            <li><a href="#">内容a>li>
            <li><a href="#">关于a>li>
        ul>
    div>
nav>

在浏览器宽度超过768px时，效果如下所示。

把窗口缩小后到768px以下后，效果如下。

响应式导航栏

为了给导航栏添加响应式特性，我们要折叠的内容必须放在一个带有navbar-collapse、collapse类的

中。
折叠起来的导航栏实际上是一个带有navbar-toggle类和两个data-元素的按钮。第一个是data-toggle，用于告诉JavaScript需要对按钮做什么，第二个是data-target，指示要切换到哪一个元素。
三个带有icon-bar类的创建所谓的汉堡按钮。这些会切换为.nav-collapse

中的元素。

代码如下：

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <span class="sr-only">Toggle navigationspan>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
            <span class="icon-bar">span>
        button>
        <a class="navbar-brand" href="#">Branda>
    div>
    <div class="navbar-collapse collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">首页a>li>
            <li><a href="#">内容a>li>
            <li><a href="#">关于a>li>
        ul>
    div>
nav>

在浏览器窗口大于768px时，可以发现，与默认的没什么区别。

但是，当窗口缩小到768px以下后，可以看到，在页面的右上角出现了一个小图标，并且将内容折叠起来了。

点击图标就可以看到折叠的内容，如下所示。

在导航栏中加入下拉菜单

在上述代码的基础上，向需要下拉的内容的

中添加dropdown类，向其中加入一个无序列表，并在

中添加class="dropdown-menu" role="menu"。
向
• 下的中添加一个带有caret类的，用来表示一个倒三角。
  在中添加dropdown-toggle类，data-toggle和role。

  下面只显示上述代码中修改的部分。

  <div class="navbar-collapse collapse" id="example-navbar-collapse">
      <ul class="nav navbar-nav">
          <li><a href="#">首页a>li>
          <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">内容<span class="caret">span>a>
              <ul class="dropdown-menu" role="menu">
                  <li><a href="#">内容1a>li>
                  <li><a href="#">内容2a>li>
                  <li><a href="#">内容3a>li>
              ul>
          li>
          <li><a href="#">关于a>li>
      ul>
  div>

  浏览器窗口大于768px时的效果如下。

  

  

  把窗口缩小到768px以下后，效果如下所示。