垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 导航栏 ​

🎯 概述 ​

Bootstrap 导航栏（Navbar）是一个响应式的导航头部组件，支持品牌标识、导航链接、表单、按钮等内容。导航栏可以根据屏幕大小自动折叠和展开。

📦 基本导航栏 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">品牌</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">服务</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

🎨 导航栏颜色 ​

浅色导航栏 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 内容 -->
</nav>

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
    <!-- 内容 -->
</nav>

深色导航栏 ​

html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <!-- 内容 -->
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <!-- 内容 -->
</nav>

📱 响应式导航栏 ​

不同断点 ​

html
<!-- 在 lg 断点折叠 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <!-- 内容 -->
</nav>

<!-- 在 md 断点折叠 -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
    <!-- 内容 -->
</nav>

<!-- 在 sm 断点折叠 -->
<nav class="navbar navbar-expand-sm navbar-light bg-light">
    <!-- 内容 -->
</nav>

<!-- 始终折叠 -->
<nav class="navbar navbar-light bg-light">
    <!-- 内容 -->
</nav>

🏷️ 品牌标识 ​

文本品牌 ​

html
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">我的品牌</a>
    </div>
</nav>

图片品牌 ​

html
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">
            <img src="/logo.svg" alt="Logo" width="30" height="24" class="d-inline-block align-text-top">
            品牌名称
        </a>
    </div>
</nav>

🔍 导航栏表单 ​

html
<nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
        <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
            <button class="btn btn-outline-success" type="submit">搜索</button>
        </form>
    </div>
</nav>

📋 完整导航栏 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <!-- 品牌 -->
        <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 mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" href="#">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">产品</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                        服务
                    </a>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#">服务 A</a></li>
                        <li><a class="dropdown-item" href="#">服务 B</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">所有服务</a></li>
                    </ul>
                </li>
            </ul>
            
            <!-- 右侧搜索表单 -->
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="搜索">
                <button class="btn btn-outline-success" type="submit">搜索</button>
            </form>
        </div>
    </div>
</nav>

📍 导航栏位置 ​

固定顶部 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">固定顶部</a>
    </div>
</nav>

<!-- 添加 padding 避免内容被遮挡 -->
<style>
    body { padding-top: 56px; }
</style>

固定底部 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-bottom">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">固定底部</a>
    </div>
</nav>

<style>
    body { padding-bottom: 56px; }
</style>

粘性顶部 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">粘性顶部</a>
    </div>
</nav>

🎪 导航栏容器 ​

使用容器 ​

html
<!-- 固定宽度容器 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <!-- 内容 -->
    </div>
</nav>

<!-- 流式容器 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <!-- 内容 -->
    </div>
</nav>

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 导航栏示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body { padding-top: 70px; }
        .demo-section { margin-bottom: 100px; }
    </style>
</head>
<body>
    <!-- 固定顶部导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <svg width="24" height="24" fill="currentColor" class="d-inline-block align-text-top">
                    <circle cx="12" cy="12" r="10"/>
                </svg>
                我的网站
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                            产品
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">产品 A</a></li>
                            <li><a class="dropdown-item" href="#">产品 B</a></li>
                            <li><a class="dropdown-item" href="#">产品 C</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#">查看全部</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">联系</a>
                    </li>
                </ul>
                <form class="d-flex me-2" role="search">
                    <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索">
                    <button class="btn btn-outline-light" type="submit">搜索</button>
                </form>
                <div class="d-flex">
                    <button class="btn btn-light me-2">登录</button>
                    <button class="btn btn-warning">注册</button>
                </div>
            </div>
        </div>
    </nav>
    
    <div class="container">
        <!-- 浅色导航栏 -->
        <div class="demo-section">
            <h2>浅色导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">品牌</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#lightNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="lightNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">产品</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">服务</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        
        <!-- 深色导航栏 -->
        <div class="demo-section">
            <h2>深色导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">品牌</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="darkNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link active" href="#">首页</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">产品</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">服务</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        
        <!-- 彩色导航栏 -->
        <div class="demo-section">
            <h2>彩色导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-dark bg-success mb-2">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">成功色</a>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">链接</a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-2">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">危险色</a>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">链接</a>
                        </li>
                    </ul>
                </div>
            </nav>
            
            <nav class="navbar navbar-expand-lg navbar-dark bg-info">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">信息色</a>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="#">链接</a>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
        
        <!-- 带表单的导航栏 -->
        <div class="demo-section">
            <h2>带表单的导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">品牌</a>
                    <form class="d-flex ms-auto" role="search">
                        <input class="form-control me-2" type="search" placeholder="搜索产品" aria-label="搜索">
                        <button class="btn btn-outline-success" type="submit">搜索</button>
                    </form>
                </div>
            </nav>
        </div>
        
        <!-- 带按钮的导航栏 -->
        <div class="demo-section">
            <h2>带按钮的导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">品牌</a>
                    <div class="d-flex ms-auto">
                        <button class="btn btn-outline-primary me-2">登录</button>
                        <button class="btn btn-primary">注册</button>
                    </div>
                </div>
            </nav>
        </div>
        
        <!-- 带文本的导航栏 -->
        <div class="demo-section">
            <h2>带文本的导航栏</h2>
            <nav class="navbar navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">品牌</a>
                    <span class="navbar-text">
                        欢迎回来，用户！
                    </span>
                </div>
            </nav>
        </div>
        
        <!-- 电商网站导航栏示例 -->
        <div class="demo-section">
            <h2>电商网站导航栏</h2>
            <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #2c3e50;">
                <div class="container">
                    <a class="navbar-brand fw-bold" href="#">
                        <svg width="24" height="24" fill="currentColor" class="me-2">
                            <rect width="24" height="24" rx="4"/>
                        </svg>
                        商城
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#shopNav">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="shopNav">
                        <ul class="navbar-nav me-auto">
                            <li class="nav-item">
                                <a class="nav-link" href="#">新品</a>
                            </li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">
                                    分类
                                </a>
                                <ul class="dropdown-menu">
                                    <li><a class="dropdown-item" href="#">电子产品</a></li>
                                    <li><a class="dropdown-item" href="#">服装配饰</a></li>
                                    <li><a class="dropdown-item" href="#">家居生活</a></li>
                                    <li><a class="dropdown-item" href="#">运动户外</a></li>
                                </ul>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">促销</a>
                            </li>
                        </ul>
                        <form class="d-flex me-3">
                            <input class="form-control" type="search" placeholder="搜索商品">
                            <button class="btn btn-warning ms-2" type="submit">搜索</button>
                        </form>
                        <div class="d-flex align-items-center">
                            <a href="#" class="text-white me-3">
                                <svg width="20" height="20" fill="currentColor">
                                    <circle cx="10" cy="10" r="8"/>
                                </svg>
                            </a>
                            <a href="#" class="text-white position-relative">
                                <svg width="20" height="20" fill="currentColor">
                                    <rect width="20" height="20" rx="2"/>
                                </svg>
                                <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                    3
                                </span>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </div>
        
        <div style="height: 500px;">
            <p>滚动页面查看固定顶部导航栏的效果。</p>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

✅ 最佳实践 ​

1. 可访问性 ​

html
<nav class="navbar navbar-expand-lg navbar-light bg-light" aria-label="主导航">
    <div class="container-fluid">
        <a class="navbar-brand" href="#" aria-label="返回首页">品牌</a>
        <button class="navbar-toggler" 
                type="button" 
                data-bs-toggle="collapse" 
                data-bs-target="#navbarNav"
                aria-controls="navbarNav"
                aria-expanded="false"
                aria-label="切换导航">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

2. 响应式设计 ​

html
<!-- 在小屏幕上隐藏某些项目 -->
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
    </li>
    <li class="nav-item d-none d-lg-block">
        <a class="nav-link" href="#">仅在大屏显示</a>
    </li>
</ul>

3. 性能优化 ​

html
<!-- 使用 container 限制宽度 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
        <!-- 内容 -->
    </div>
</nav>

🎯 常见应用场景 ​

  1. 网站主导航 - 顶部固定导航
  2. 管理后台 - 带用户信息的导航栏
  3. 电商网站 - 带搜索和购物车的导航
  4. 博客网站 - 简洁的导航栏
  5. 移动应用 - 响应式折叠导航

下一步 ​

现在你已经掌握了 Bootstrap 导航栏的使用方法，接下来我们将学习轮播组件。

下一章：Bootstrap 轮播 →