Bootstrap 导航栏

定义和使用

使用 Bootstrap，导航栏可以扩展或折叠，具体取决于屏幕尺寸。

使用 .navbar 类创建一个标准导航栏，然后创建一个响应式折叠类：.navbar-expand-xl | lg | md | sm（将导航栏垂直堆叠在超大，大，中或小屏幕上）。

要在导航栏中添加链接，请使用 <ul> 元素和 class="navbar-nav"；然后添加具有 .nav-item 类的 <li>元素，然后添加具有 .nav-link 类的 <a> 元素：

<div class ="container">
   <nav class="navbar navbar-expand-sm bg-light">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">链接1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">链接3</a>
      </li>
    </ul>
  </nav>
</div>

尝试一下

删除 .navbar-expand-xl | lg | md | sm 类以创建垂直导航栏：

<div class ="container">
   <nav class="navbar bg-light">
       ......
    </nav>
</div>

尝试一下

添加 .justify-content-center 类以使导航栏居中。

以下示例将导航栏放在中，大和超大屏幕上；在小屏幕上，它将垂直显示并左对齐（由于.navbar-expand-sm类）：

<div class ="container">
   <nav class="navbar navbar-expand-sm bg-light justify-content-center">
       ......
    </nav>
</div>

尝试一下

彩色导航栏

使用 .bg-color 类来更改导航栏的背景颜色（.bg-primary，.bg-success，.bg-info，.bg-warning，.bg-danger，.bg-secondary，.bg -dark和.bg-light）

提示：使用 .navbar-dark 类向导航栏中的所有链接添加白色文本颜色，或使用 .navbar-light 类添加黑色文本颜色。

<div class ="container">
   //灰色，黑色文字
   <nav class="navbar navbar-expand-sm bg-light navbar-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">链接1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">禁用不可点击</a>
        </li>
      </ul>
    </nav>
    //黑底白字
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
    //蓝色与白色文字
    <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>
</div>

尝试一下

激活/禁用状态：将 .active 类添加到 <a> 元素中以突出显示当前链接，或将 .disabled 类添加到指示链接不可单击。

使用 .navbar-text 类垂直对齐导航栏中的所有非链接元素（确保适当的填充和文本颜色）。

<div class ="container">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#">链接1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">链接2</a>
            </li>
        </ul>
        <span class="navbar-text">
            非链接元素
        <span>
    </nav>
</div>

尝试一下

品牌/标志

.navbar-brand 类用于突出显示页面的品牌/徽标/项目名称：

<div class ="container">
   <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="#">Logo</a>
        ...
    </nav>
</div>

尝试一下

在图像上使用 .navbar-brand 类时，Bootstrap 将自动设置图像的样式以使其垂直适合导航栏。

<div class ="container">
   <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
        <a class="navbar-brand" href="#">
          <img src="bird.jpg" alt="Logo" style="width:40px;">
        </a>
        ...
    </nav>
</div>

尝试一下

折叠导航栏

很多时候，尤其是在小屏幕上，您想隐藏导航链接，并用一个按钮替换，当单击该按钮时应显示它们。

要创建可折叠的导航栏，请使用带有 class="navbar-toggler"，data-toggle ="collapse" 和 data-target ="#thetarget" 的按钮。然后将导航栏内容（链接等）包装在 div 元素中，并带有 class="collapse navbar-collapse"，后跟与按钮的数据目标匹配的 ID："thetarget"。

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  // Brand部分
  <a class="navbar-brand" href="#">导航brand</a>  
  //折叠按钮
  <button class="navbar-toggler" type="button" data-toggle="collapse"
   data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"> </span>
  </button>  
  //导航栏链接
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
      </li>
    </ul>
  </div>
</nav>

尝试一下

提示：您还可以删除 .navbar-expand-md 类，以始终隐藏导航栏链接并显示切换按钮。

带有下拉菜单的导航栏

导航栏还可以包含下拉菜单：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  // Brand部分
  <a class="navbar-brand" href="#">导航brand</a>  
  //导航链接
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">链接1</a>
    </li>

    //下拉菜单
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        下拉链接
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <a class="dropdown-item" href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>

尝试一下

导航栏形式和按钮

添加一个带有 class="form-inline" 的 <form> 元素来并排分组输入和按钮：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <form class="form-inline" action="/action_page.php">
    <input class="form-control mr-sm-2" type="text" placeholder="搜索">
    <button class="btn btn-success" type="submit">搜索</button>
  </form>
</nav>

尝试一下

输出结果如下：

您还可以使用其他输入类，例如 .input-group-prepend 或 .input-group-append 在输入字段旁边附加图标或帮助文本。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <form class="form-inline" action="/action_page.php">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text">@</span>
        </div>
        <input type="text" class="form-control" placeholder="用户名">
      </div>
    </form>
</nav>

尝试一下

输出结果如下：

固定导航栏

导航栏也可以固定在页面的顶部或底部。

固定的导航栏在与页面滚动无关的固定位置（顶部或底部）保持可见。

.fixed-top 类使导航栏固定在顶部：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    ...
</nav>

尝试一下

使用 .fixed-bottom 类使导航栏停留在页面底部：

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
    ...
</nav>

尝试一下

使用 .sticky-top 类将导航栏固定/停留在页面顶部，当您滚动它时。

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
    ...
</nav>

尝试一下

注意：此类在IE11及更早版本中不起作用（将其视为position：relative）。

定义和使用

彩色导航栏

品牌/标志

折叠导航栏

带有下拉菜单的导航栏

导航栏形式和按钮

固定导航栏

相关页面