Bootstrap 导航栏

导航栏

导航栏一般放在页面的顶部:

使用 Bootstrap,导航栏可以扩展或折叠,具体取决于屏幕大小。

使用 <nav class="navbar navbar-default"> 创建标准导航栏。

以下示例显示了如何在页面顶部添加导航栏:

实例

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
...
亲自试一试 »

注释: 本页上的所有示例都会显示一个导航栏,它在小屏幕上占用了太多空间(然而,在大屏幕上,导航栏将位于一行上,因为 Bootstrap 是响应式的)。这个问题(小屏幕)将在本页最后一个示例中解决。


反向导航栏

如果您不喜欢默认导航栏的样式,Bootstrap 会提供一个可选的黑色导航栏:

J只需将 .navbar-default 类更改为 .navbar-inverse:

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
亲自试一试 »


导航栏使用下拉菜单

导航栏上可以设置下拉菜单。

以下示例为 "Page 1" 按钮添加了下拉菜单:

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
亲自试一试 »

右对齐导航栏

.navbar-right 类用于右对齐导航栏按钮

在下面的示例中,我们在导航栏的右侧插入一个 "Sign Up" 按钮和一个 "Login" 按钮。我们还在两个按钮中的添加一个字形图标:

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>
亲自试一试 »

导航栏按钮

要在导航栏中添加按钮,请在 Bootstrap 按钮上添加 .navbar-btn 类:

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
    <button class="btn btn-danger navbar-btn">Button</button>
  </div>
</nav>
亲自试一试 »

导航栏表单

要在导航栏中添加表单元素,请将 .navbar-form 类添加到表单元素并添加输入。 注意,我们已经向保存输入的 div 容器添加了一个 .form-group 类。如果您有多个输入,这会添加适当的填充(您将在表单一章了解更多信息)。

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <form class="navbar-form navbar-left" action="/action_page.php">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="Search">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</nav>
亲自试一试 »

您还可以使用 .input-group.input-group-addon 类在输入字段旁边附加图标或帮助文本。在 Bootstrap Inputs 一章中,您将了解有关这些类的更多信息。

实例

<form class="navbar-form navbar-left" action="/action_page.php">
  <div class="input-group">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">
        <i class="glyphicon glyphicon-search"></i>
      </button>
    </div>
  </div>
</form>
亲自试一试 »

导航栏文本

使用 .navbar-text 类来设置导航栏上非链接文本,可以保证水平对齐,颜色与内边距一样。

实例

<nav class="navbar navbar-inverse">
  <ul class="nav navbar-nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
  <p class="navbar-text">Some text</p>
</nav>
亲自试一试 »

固定导航栏

导航栏可以固定在头部或者底部。

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

使用 .navbar-fixed-top 类来实现导航栏的固定在顶部:

实例

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
亲自试一试 »

使用 .navbar-fixed-bottom 类用于设置导航栏固定在底部:

实例

<nav class="navbar navbar-inverse navbar-fixed-bottom">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
亲自试一试 »

折叠导航栏

导航栏通常会在小屏幕上占据太多空间。

我们应该隐藏导航栏;只在需要的时候才展示。

在下面的示例中,导航栏被右上角的一个按钮替换。只有单击按钮时,才会显示导航栏:

实例

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
亲自试一试 »

学习训练

练习题:

添加所需的类名以创建默认导航栏。

<nav class="">
  <div class="container-fluid">
    <ul class="nav navbar-nav">
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

开始练习