Bootstrap5 导航栏

Bootstrap 5导航栏完全指南

什么是导航栏？

导航栏（Navbar）是网站顶部的导航区域，通常包含网站logo、主导航链接和其他重要元素（如搜索框、登录按钮等）。

网站核心导航区域

用户通过导航栏访问网站主要功能

响应式设计

自动适应手机、平板和桌面设备

丰富的内置组件

支持下拉菜单、表单、按钮等元素

小白提示： 可以把导航栏想象成商场里的指示牌，帮助用户快速找到不同的区域（页面）。

基本导航栏结构

基础HTML结构

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <!-- 品牌Logo -->
    <a class="navbar-brand" href="#">我的网站</a>
    
    <!-- 移动端折叠按钮 -->
    <button class="navbar-toggler" 
            type="button" 
            data-bs-toggle="collapse" 
            data-bs-target="#navbarContent">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <!-- 导航链接 -->
    <div class="collapse navbar-collapse" id="navbarContent">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link active" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

关键组成部分

`.navbar`

导航栏的基础类，必须包含

`.navbar-expand-{size}`

设置导航栏的响应式断点（sm, md, lg, xl, xxl）

`.navbar-brand`

网站Logo或名称的容器

`.navbar-toggler`

移动设备上的折叠按钮

`.navbar-nav`

包裹导航链接的无序列表

`.nav-item` 和 `.nav-link`

导航项和导航链接的样式类

记忆技巧： 就像汉堡包 – navbar是面包，navbar-brand是标签，nav-item是馅料，navbar-toggler是包装纸！

响应式设计

响应式折叠原理

Bootstrap的导航栏在移动设备上会自动折叠成”汉堡包”菜单，这通过两个关键属性实现：

代码解析：

<button class="navbar-toggler" 
        type="button" 
        data-bs-toggle="collapse" 
        data-bs-target="#navbarContent">

data-bs-toggle="collapse"：启用折叠功能
data-bs-target="#navbarContent"：指定要折叠/展开的元素

移动设备

显示折叠按钮，点击展开菜单

桌面设备

完整显示导航链接

断点选择

使用.navbar-expand-*类设置导航栏何时展开：

类名	设备宽度	何时展开
`.navbar-expand-sm`	≥576px	小型设备（手机横向）
`.navbar-expand-md`	≥768px	中型设备（平板）
`.navbar-expand-lg`	≥992px	大型设备（笔记本）
`.navbar-expand-xl`	≥1200px	超大设备（桌面）
`.navbar-expand-xxl`	≥1400px	特大设备（大屏显示器）

建议： 大多数网站使用.navbar-expand-md或.navbar-expand-lg即可

组件集成

完整导航栏示例

包含的组件：

下拉菜单

使用.dropdown类创建多级导航

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
    服务
  </a>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item">子菜单项</a></li>
  </ul>
</li>

表单控件

在导航栏中添加搜索框等表单元素

<form class="d-flex">
  <input class="form-control me-2" 
         type="search" 
         placeholder="搜索">
  <button class="btn btn-outline-success" 
          type="submit">
    搜索
  </button>
</form>

按钮组

添加登录、购物车等操作按钮

<div class="d-flex">
  <button class="btn btn-primary me-2">
    登录
  </button>
  <button class="btn btn-outline-secondary">
    购物车
  </button>
</div>

自定义样式

颜色主题

通过组合背景色(.bg-*)和文字颜色(.navbar-dark或.navbar-light)改变导航栏外观

深色背景方案

<nav class="navbar navbar-dark bg-primary">

适合深色背景：primary, dark, success等

浅色背景方案

<nav class="navbar navbar-light bg-light">

适合浅色背景：light, warning, info等

常用颜色组合：

navbar-dark + bg-primary navbar-dark + bg-dark navbar-dark + bg-success navbar-dark + bg-danger navbar-light + bg-light navbar-light + bg-info navbar-light + bg-warning

定位选项

使用定位工具类控制导航栏位置：

固定在顶部

.fixed-top

导航栏始终显示在页面顶部

固定在底部

.fixed-bottom

导航栏始终显示在页面底部

粘性定位

.sticky-top

滚动时固定在页面顶部

注意： 使用固定定位时，可能需要为body添加顶部或底部内边距，防止内容被导航栏遮挡