bootstrap3响应式菜单

Bootstrap 3提供了一个响应式菜单，这个菜单可以根据不同的设备大小自动调整样式和布局。

以下是一个基本的响应式导航菜单的示例代码：

<nav class="navbar navbar-default">
  <div class="container-fluid">

    <!-- 品牌和切换按钮 -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">切换导航栏</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">品牌</a>
    </div>

    <!-- 导航链接 -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">链接1<span class="sr-only">(当前)</span></a></li>
        <li><a href="#">链接2</a></li>
        <li><a href="#">链接3</a></li>
      </ul>
    </div>

  </div>
</nav>

解释一下代码：

- `nav` 标签表示导航栏，`navbar` 类表示这是一个 Bootstrap 导航栏。
- `navbar-header` 类表示导航栏的头部，包含品牌和切换按钮。
- `navbar-toggle` 类表示切换按钮，当屏幕宽度小于一定值时，导航链接会被隐藏，切换按钮会显示，点击切换按钮可以展开导航链接。
- `navbar-brand` 类表示品牌，一般是网站的名称或者 logo。
- `navbar-collapse` 类表示导航链接，当屏幕宽度小于一定值时，导航链接会被隐藏，切换按钮会显示，点击切换按钮可以展开导航链接。
- `nav` 和 `nav-item` 类表示导航链接的每一个链接项。

通过上述代码，可以实现一个响应式导航菜单。当屏幕宽度小于一定值时，导航链接会被隐藏，切换按钮会显示，点击切换按钮可以展开导航链接。同时，导航栏的样式也会自动调整，以适应不同的设备大小。