Bootstrap 导航栏

导航栏（Navbar）是页面顶部的整条导航条，可放品牌、菜单链接、搜索框与登录按钮。它比普通导航元素更"重"，自带背景、圆角与响应式能力，几乎每个网站首页都会用到。

基础结构

导航栏 = navbar 容器（navbar navbar-default）+ 品牌 + 链接列表。容器里通常再放一层 container 或 container-fluid 控制宽度：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">我的网站</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">首页</a></li>
      <li><a href="#">产品</a></li>
      <li><a href="#">关于</a></li>
    </ul>
  </div>
</nav>
<!-- 效果：顶部出现浅灰导航条，左侧深色品牌文字，右侧一排菜单项 -->

右侧文字与按钮

navbar-text 用于在条内放纯文字，navbar-btn 用于放按钮；两者再加 navbar-right 即可整体靠右。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <p class="navbar-text navbar-right">欢迎回来，访客</p>
    <button class="btn btn-default navbar-btn navbar-right" type="button">退出登录</button>
  </div>
</nav>
<!-- 效果：导航条右侧并排出现提示文字与退出按钮 -->

条内表单

导航栏中常嵌搜索框：用 navbar-form 包住输入框与按钮，输入框会自动垂直居中于导航条。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <form class="navbar-form navbar-right" role="search">
      <div class="form-group">
        <input type="text" class="form-control" placeholder="搜索…">
      </div>
      <button type="submit" class="btn btn-default">查找</button>
    </form>
  </div>
</nav>
<!-- 效果：导航条右侧出现输入框加查找按钮的搜索区 -->

固定定位

navbar-fixed-top 固定在视口顶部、navbar-fixed-bottom 固定在底部、navbar-static-top 不固定但保持导航条样式。固定定位会盖住页面内容，需给 body 加 padding-top 抵消。

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">固定顶栏</a>
  </div>
</nav>
<!-- 效果：导航条钉在浏览器顶端，页面滚动时它始终不动 -->

反色导航栏

navbar-inverse 换成黑底白字的高对比风格，适合与深色网站主题搭配。

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">黑金风格</a>
    <p class="navbar-text">黑色导航条，白色文字</p>
  </div>
</nav>
<!-- 效果：整条导航栏变为深黑底、浅色文字 -->

小结

导航栏负责整站导航：navbar-default/inverse 定外观、navbar-brand 放品牌、navbar-nav 放链接、navbar-right 靠右排版。若需小屏折叠成汉堡菜单，还要配合折叠插件，留待后续章节讲解。