Bootstrap 导航栏学习笔记

Bootstrap 是一个流行的前端开发框架，提供了许多实用的组件，其中导航栏是应用最为广泛的组件之一。Bootstrap 的导航栏组件可以轻松地创建响应式的、具有各种样式的导航栏。

创建基本的导航栏

使用 Bootstrap 创建一个基本的导航栏非常简单。只需按照以下步骤操作即可：

创建一个 nav 元素，并添加 navbar 类：
```
Copy Code
<nav class="navbar"></nav>
```
在 navbar 中添加 navbar-brand 元素，以显示网站名称或标志：
```
Copy Code
<a class="navbar-brand" href="#">Your Website Name</a>
```

在 navbar 中添加一个 ul 元素，以包含导航链接：

Copy Code
<ul class="nav navbar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

完整代码如下：

Copy Code
<nav class="navbar">
  <a class="navbar-brand" href="#">Your Website Name</a>

  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

创建响应式导航栏

Bootstrap 的导航栏组件提供了许多选项，可以轻松地创建响应式的导航栏。

使用以下代码可以创建一个响应式的导航栏：

Copy Code
<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="#navbar-collapse-1"
              aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Your Website Name</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

在这个例子中，我们使用了 navbar-default 类来指定默认样式，使用 navbar-header 类来定义导航栏标题和折叠按钮，使用 navbar-collapse 类来定义当屏幕宽度较小时如何显示导航链接。

示例

下面是一个使用 Bootstrap 导航栏组件的示例。在这个示例中，我们在导航栏中添加了多个链接和下拉菜单：

Copy Code
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed"
              data-toggle="collapse" data-target="#navbar-collapse-2"
              aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Your Website Name</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-2">
      <ul class="nav navbar-nav">
        <li><a href="#">Home</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"
             role="button" aria-haspopup="true" aria-expanded="false">
            Products <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li><a href="#">Product 1</a></li>
            <li><a href="#">Product 2</a></li>
            <li><a href="#">Product 3</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">View all products</a></li>
          </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <form class="navbar-form navbar-right">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

在这个示例中，我们添加了一个下拉菜单，用于显示产品列表。我们还添加了一个搜索框和提交按钮，并将其放置在导航栏的右侧。

至此，Bootstrap 导航栏学习笔记就结束了，希望这篇文档对学习 Bootstrap 导航栏有所帮助。