本章概述
Bootstrap 提供了丰富的导航和菜单组件，包括导航栏、面包屑导航、分页、标签页、下拉菜单等。这些组件是构建网站导航结构的核心元素。本章将详细介绍这些导航组件的使用方法和自定义技巧。
导航栏组件
1. 基础导航栏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 导航栏组件</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 基础导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/30x30" alt="Logo" width="30" height="30" class="d-inline-block align-text-top">
我的网站
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" 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>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
更多
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">关于我们</a></li>
<li><a class="dropdown-item" href="#">联系我们</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">帮助中心</a></li>
</ul>
</li>
</ul>
<div class="d-flex">
<input class="form-control me-2" type="search" placeholder="搜索" aria-label="Search">
<button class="btn btn-outline-success" type="submit">搜索</button>
</div>
</div>
</div>
</nav>
<!-- 深色导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mt-3">
<div class="container">
<a class="navbar-brand" href="#">深色导航栏</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#darkNavbar" aria-controls="darkNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="darkNavbar">
<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">
<a class="nav-link" href="#">定价</a>
</li>
</ul>
<div class="navbar-nav">
<a class="nav-link" href="#">登录</a>
<a class="nav-link" href="#">
<button class="btn btn-primary btn-sm">注册</button>
</a>
</div>
</div>
</div>
</nav>
<!-- 固定顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-primary fixed-top">
<div class="container">
<a class="navbar-brand text-white" href="#">固定导航栏</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#fixedNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="fixedNavbar">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-white" href="#">首页</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">关于</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#">联系</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 为固定导航栏添加顶部间距 -->
<div style="margin-top: 80px;">
<div class="container">
<h1>页面内容</h1>
<p>这里是页面的主要内容...</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. 响应式导航栏
<!-- 响应式导航栏示例 -->
<nav class="navbar navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="bi bi-house-door"></i> 响应式网站
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#responsiveNavbar" aria-controls="responsiveNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="responsiveNavbar">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="productsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
产品
</a>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">软件产品</h6></li>
<li><a class="dropdown-item" href="#">Web 应用</a></li>
<li><a class="dropdown-item" href="#">移动应用</a></li>
<li><a class="dropdown-item" href="#">桌面应用</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">硬件产品</h6></li>
<li><a class="dropdown-item" href="#">服务器</a></li>
<li><a class="dropdown-item" href="#">网络设备</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="servicesDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
服务
</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>
</ul>
</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 class="d-flex align-items-center">
<div class="dropdown me-3">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" aria-expanded="false">
中文
</button>
<ul class="dropdown-menu" aria-labelledby="languageDropdown">
<li><a class="dropdown-item" href="#">中文</a></li>
<li><a class="dropdown-item" href="#">English</a></li>
<li><a class="dropdown-item" href="#">日本語</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<a href="#" class="btn btn-outline-primary btn-sm">登录</a>
<a href="#" class="btn btn-primary btn-sm">注册</a>
</div>
</div>
</div>
</div>
</nav>
面包屑导航
1. 基础面包屑
<!-- 面包屑导航示例 -->
<div class="container my-4">
<h2 class="text-primary mb-4">面包屑导航</h2>
<!-- 基础面包屑 -->
<div class="mb-4">
<h5>基础面包屑</h5>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">产品</a></li>
<li class="breadcrumb-item active" aria-current="page">笔记本电脑</li>
</ol>
</nav>
</div>
<!-- 带图标的面包屑 -->
<div class="mb-4">
<h5>带图标的面包屑</h5>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
<i class="bi bi-house-door"></i> 首页
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
<i class="bi bi-folder"></i> 文档
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
<i class="bi bi-file-text"></i> 教程
</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
<i class="bi bi-file-earmark-text"></i> Bootstrap 导航
</li>
</ol>
</nav>
</div>
<!-- 自定义分隔符的面包屑 -->
<div class="mb-4">
<h5>自定义分隔符</h5>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom">
<li class="breadcrumb-item"><a href="#">用户中心</a></li>
<li class="breadcrumb-item"><a href="#">个人设置</a></li>
<li class="breadcrumb-item active" aria-current="page">安全设置</li>
</ol>
</nav>
</div>
</div>
<style>
.breadcrumb-custom {
--bs-breadcrumb-divider: '>';
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
content: var(--bs-breadcrumb-divider);
color: #6c757d;
margin: 0 0.5rem;
}
</style>
分页组件
1. 基础分页
<!-- 分页组件示例 -->
<div class="container my-4">
<h2 class="text-primary mb-4">分页组件</h2>
<!-- 基础分页 -->
<div class="mb-4">
<h5>基础分页</h5>
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一页</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
<!-- 大尺寸分页 -->
<div class="mb-4">
<h5>大尺寸分页</h5>
<nav aria-label="Large pagination">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- 小尺寸分页 -->
<div class="mb-4">
<h5>小尺寸分页</h5>
<nav aria-label="Small pagination">
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- 居中对齐的分页 -->
<div class="mb-4">
<h5>居中对齐的分页</h5>
<nav aria-label="Centered pagination">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" href="#">上一页</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">4</a></li>
<li class="page-item"><a class="page-link" href="#">5</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
<!-- 右对齐的分页 -->
<div class="mb-4">
<h5>右对齐的分页</h5>
<nav aria-label="Right aligned pagination">
<ul class="pagination justify-content-end">
<li class="page-item">
<a class="page-link" href="#">上一页</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
2. 高级分页功能
<!-- 高级分页功能 -->
<div class="container my-4">
<h2 class="text-primary mb-4">高级分页功能</h2>
<!-- 带跳转的分页 -->
<div class="mb-4">
<h5>带跳转功能的分页</h5>
<div class="row align-items-center">
<div class="col-md-6">
<nav aria-label="Advanced pagination">
<ul class="pagination mb-0">
<li class="page-item">
<a class="page-link" href="#" onclick="goToPage('prev')">
<i class="bi bi-chevron-left"></i>
</a>
</li>
<li class="page-item"><a class="page-link" href="#" onclick="goToPage(1)">1</a></li>
<li class="page-item"><a class="page-link" href="#" onclick="goToPage(2)">2</a></li>
<li class="page-item active"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#" onclick="goToPage(4)">4</a></li>
<li class="page-item"><a class="page-link" href="#" onclick="goToPage(5)">5</a></li>
<li class="page-item">
<a class="page-link" href="#" onclick="goToPage('next')">
<i class="bi bi-chevron-right"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="col-md-6">
<div class="d-flex align-items-center justify-content-end">
<span class="me-2">跳转到第</span>
<input type="number" class="form-control" style="width: 80px;" min="1" max="100" value="3" id="pageInput">
<span class="mx-2">页</span>
<button class="btn btn-outline-primary btn-sm" onclick="jumpToPage()">跳转</button>
</div>
</div>
</div>
<div class="mt-2 text-muted small">
显示第 21-30 条记录，共 500 条记录，第 3 页，共 50 页
</div>
</div>
<!-- 每页显示数量选择 -->
<div class="mb-4">
<h5>每页显示数量选择</h5>
<div class="row align-items-center">
<div class="col-md-6">
<div class="d-flex align-items-center">
<span class="me-2">每页显示</span>
<select class="form-select" style="width: auto;" onchange="changePageSize(this.value)">
<option value="10">10</option>
<option value="20" selected>20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
<span class="ms-2">条记录</span>
</div>
</div>
<div class="col-md-6">
<nav aria-label="Page size pagination">
<ul class="pagination justify-content-end mb-0">
<li class="page-item">
<a class="page-link" href="#">上一页</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<script>
function goToPage(page) {
console.log('跳转到页面:', page);
// 这里实现页面跳转逻辑
}
function jumpToPage() {
const pageInput = document.getElementById('pageInput');
const page = parseInt(pageInput.value);
if (page >= 1 && page <= 100) {
console.log('跳转到第', page, '页');
// 这里实现页面跳转逻辑
} else {
alert('请输入有效的页码（1-100）');
}
}
function changePageSize(size) {
console.log('每页显示', size, '条记录');
// 这里实现每页显示数量变更逻辑
}
</script>
标签页组件
1. 基础标签页
<!-- 标签页组件示例 -->
<div class="container my-4">
<h2 class="text-primary mb-4">标签页组件</h2>
<!-- 基础标签页 -->
<div class="mb-5">
<h5>基础标签页</h5>
<ul class="nav nav-tabs" id="basicTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">首页</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">个人资料</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">联系方式</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link disabled" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled" type="button" role="tab" aria-controls="disabled" aria-selected="false" disabled>禁用</button>
</li>
</ul>
<div class="tab-content" id="basicTabsContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="p-4">
<h4>欢迎来到首页</h4>
<p>这里是首页的内容。您可以在这里查看最新的信息和更新。</p>
<ul>
<li>最新产品发布</li>
<li>公司新闻</li>
<li>行业动态</li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="p-4">
<h4>个人资料</h4>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">姓名</label>
<input type="text" class="form-control" value="张三">
</div>
<div class="mb-3">
<label class="form-label">邮箱</label>
<input type="email" class="form-control" value="zhangsan@example.com">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">电话</label>
<input type="tel" class="form-control" value="138-0000-0000">
</div>
<div class="mb-3">
<label class="form-label">部门</label>
<select class="form-select">
<option>技术部</option>
<option>市场部</option>
<option>销售部</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="p-4">
<h4>联系方式</h4>
<div class="row">
<div class="col-md-6">
<h6>公司地址</h6>
<p>北京市朝阳区某某大厦 1001 室</p>
<h6>联系电话</h6>
<p>010-12345678</p>
</div>
<div class="col-md-6">
<h6>邮箱地址</h6>
<p>contact@example.com</p>
<h6>工作时间</h6>
<p>周一至周五 9:00-18:00</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 药丸式标签页 -->
<div class="mb-5">
<h5>药丸式标签页</h5>
<ul class="nav nav-pills" id="pillTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="overview-pill" data-bs-toggle="pill" data-bs-target="#overview" type="button" role="tab" aria-controls="overview" aria-selected="true">概览</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="analytics-pill" data-bs-toggle="pill" data-bs-target="#analytics" type="button" role="tab" aria-controls="analytics" aria-selected="false">分析</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reports-pill" data-bs-toggle="pill" data-bs-target="#reports" type="button" role="tab" aria-controls="reports" aria-selected="false">报告</button>
</li>
</ul>
<div class="tab-content mt-3" id="pillTabsContent">
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-pill">
<div class="card">
<div class="card-body">
<h5 class="card-title">数据概览</h5>
<div class="row text-center">
<div class="col-md-3">
<div class="border rounded p-3">
<h3 class="text-primary">1,234</h3>
<p class="mb-0">总用户数</p>
</div>
</div>
<div class="col-md-3">
<div class="border rounded p-3">
<h3 class="text-success">567</h3>
<p class="mb-0">活跃用户</p>
</div>
</div>
<div class="col-md-3">
<div class="border rounded p-3">
<h3 class="text-warning">89</h3>
<p class="mb-0">新增用户</p>
</div>
</div>
<div class="col-md-3">
<div class="border rounded p-3">
<h3 class="text-info">12</h3>
<p class="mb-0">在线用户</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="analytics" role="tabpanel" aria-labelledby="analytics-pill">
<div class="card">
<div class="card-body">
<h5 class="card-title">数据分析</h5>
<p>这里显示详细的数据分析图表和报表。</p>
<div class="bg-light p-4 rounded">
<p class="mb-0">图表占位符 - 这里可以放置各种数据可视化图表</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="reports" role="tabpanel" aria-labelledby="reports-pill">
<div class="card">
<div class="card-body">
<h5 class="card-title">报告中心</h5>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">月度销售报告</h6>
<small>2024-01-01</small>
</div>
<p class="mb-1">本月销售数据统计和分析报告。</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">用户行为分析</h6>
<small>2024-01-02</small>
</div>
<p class="mb-1">用户访问行为和使用习惯分析。</p>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h6 class="mb-1">系统性能报告</h6>
<small>2024-01-03</small>
</div>
<p class="mb-1">系统运行状态和性能指标报告。</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
下拉菜单组件
1. 基础下拉菜单
<!-- 下拉菜单组件示例 -->
<div class="container my-4">
<h2 class="text-primary mb-4">下拉菜单组件</h2>
<!-- 基础下拉菜单 -->
<div class="mb-4">
<h5>基础下拉菜单</h5>
<div class="d-flex flex-wrap gap-3">
<!-- 基础下拉菜单 -->
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
下拉菜单
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<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>
</div>
<!-- 分割按钮下拉菜单 -->
<div class="btn-group">
<button type="button" class="btn btn-primary">分割按钮</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">切换下拉菜单</span>
</button>
<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><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">分离的链接</a></li>
</ul>
</div>
<!-- 向上弹出的下拉菜单 -->
<div class="dropup">
<button class="btn btn-success dropdown-toggle" type="button" id="dropupMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向上弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropupMenuButton">
<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>
</div>
<!-- 向右弹出的下拉菜单 -->
<div class="dropend">
<button class="btn btn-info dropdown-toggle" type="button" id="dropendMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
向右弹出
</button>
<ul class="dropdown-menu" aria-labelledby="dropendMenuButton">
<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>
</div>
</div>
</div>
<!-- 复杂下拉菜单 -->
<div class="mb-4">
<h5>复杂下拉菜单</h5>
<div class="d-flex flex-wrap gap-3">
<!-- 带标题和分隔符的下拉菜单 -->
<div class="dropdown">
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="complexDropdown1" data-bs-toggle="dropdown" aria-expanded="false">
用户菜单
</button>
<ul class="dropdown-menu" aria-labelledby="complexDropdown1">
<li><h6 class="dropdown-header">账户设置</h6></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-person"></i> 个人资料</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-gear"></i> 设置</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-bell"></i> 通知</a></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">其他</h6></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-question-circle"></i> 帮助</a></li>
<li><a class="dropdown-item" href="#"><i class="bi bi-box-arrow-right"></i> 退出登录</a></li>
</ul>
</div>
<!-- 带表单的下拉菜单 -->
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="formDropdown" data-bs-toggle="dropdown" aria-expanded="false">
登录
</button>
<div class="dropdown-menu p-4" aria-labelledby="formDropdown" style="min-width: 300px;">
<form>
<div class="mb-3">
<label for="email" class="form-label">邮箱地址</label>
<input type="email" class="form-control" id="email" placeholder="输入邮箱">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control" id="password" placeholder="输入密码">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="remember">
<label class="form-check-label" for="remember">记住我</label>
</div>
<button type="submit" class="btn btn-primary w-100">登录</button>
<hr>
<div class="text-center">
<a href="#" class="text-decoration-none">忘记密码？</a>
</div>
</form>
</div>
</div>
<!-- 多级下拉菜单 -->
<div class="dropdown">
<button class="btn btn-outline-success dropdown-toggle" type="button" id="multilevelDropdown" data-bs-toggle="dropdown" aria-expanded="false">
多级菜单
</button>
<ul class="dropdown-menu" aria-labelledby="multilevelDropdown">
<li><a class="dropdown-item" href="#">首页</a></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">产品</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web 应用</a></li>
<li><a class="dropdown-item" href="#">移动应用</a></li>
<li><a class="dropdown-item" href="#">桌面应用</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">服务</a></li>
<li><a class="dropdown-item" href="#">联系我们</a></li>
</ul>
</div>
</div>
</div>
</div>
<style>
/* 多级下拉菜单样式 */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
</style>
实际应用案例
1. 企业网站导航
<!-- 企业网站导航示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业网站导航</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css" rel="stylesheet">
</head>
<body>
<!-- 顶部信息栏 -->
<div class="bg-dark text-white py-2">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<small>
<i class="bi bi-telephone"></i> 400-123-4567
<span class="mx-3">|</span>
<i class="bi bi-envelope"></i> info@company.com
</small>
</div>
<div class="col-md-6 text-end">
<small>
<a href="#" class="text-white text-decoration-none me-3">客户登录</a>
<a href="#" class="text-white text-decoration-none">合作伙伴</a>
</small>
</div>
</div>
</div>
</div>
<!-- 主导航栏 -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm">
<div class="container">
<a class="navbar-brand" href="#">
<img src="https://via.placeholder.com/120x40" alt="公司Logo" height="40">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNavbar">
<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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="aboutDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
关于我们
</a>
<ul class="dropdown-menu" aria-labelledby="aboutDropdown">
<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>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">资质荣誉</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="productsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
产品与服务
</a>
<ul class="dropdown-menu" aria-labelledby="productsDropdown">
<li><h6 class="dropdown-header">软件产品</h6></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>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">技术服务</h6></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 dropdown">
<a class="nav-link dropdown-toggle" href="#" id="solutionsDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
解决方案
</a>
<ul class="dropdown-menu" aria-labelledby="solutionsDropdown">
<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>
<li class="nav-item">
<a class="nav-link" href="#">客户案例</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">联系我们</a>
</li>
</ul>
<div class="d-flex align-items-center">
<div class="input-group me-3" style="width: 250px;">
<input type="search" class="form-control" placeholder="搜索产品或服务">
<button class="btn btn-outline-secondary" type="button">
<i class="bi bi-search"></i>
</button>
</div>
<div class="btn-group">
<a href="#" class="btn btn-outline-primary btn-sm">免费试用</a>
<a href="#" class="btn btn-primary btn-sm">联系销售</a>
</div>
</div>
</div>
</div>
</nav>
<!-- 面包屑导航 -->
<div class="bg-light py-3">
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">产品与服务</a></li>
<li class="breadcrumb-item active" aria-current="page">企业管理系统</li>
</ol>
</nav>
</div>
</div>
<!-- 页面内容 -->
<div class="container my-5">
<h1>企业管理系统</h1>
<p>这里是产品详情页面的内容...</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
2. 后台管理系统导航
<!-- 后台管理系统导航示例 -->
<div class="container-fluid">
<div class="row">
<!-- 侧边栏导航 -->
<nav class="col-md-3 col-lg-2 d-md-block bg-light sidebar">
<div class="position-sticky pt-3">
<div class="text-center mb-4">
<img src="https://via.placeholder.com/80x80" alt="用户头像" class="rounded-circle" width="80" height="80">
<h6 class="mt-2">管理员</h6>
<small class="text-muted">admin@example.com</small>
</div>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="bi bi-house-door"></i> 仪表板
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#userManagement" aria-expanded="false">
<i class="bi bi-people"></i> 用户管理 <i class="bi bi-chevron-down ms-auto"></i>
</a>
<div class="collapse" id="userManagement">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" 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>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target="#contentManagement" aria-expanded="false">
<i class="bi bi-file-text"></i> 内容管理 <i class="bi bi-chevron-down ms-auto"></i>
</a>
<div class="collapse" id="contentManagement">
<ul class="nav flex-column ms-3">
<li class="nav-item">
<a class="nav-link" 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>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-bar-chart"></i> 数据统计
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-gear"></i> 系统设置
</a>
</li>
</ul>
<hr>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-question-circle"></i> 帮助
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="bi bi-box-arrow-right"></i> 退出登录
</a>
</li>
</ul>
</div>
</nav>
<!-- 主内容区域 -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
<!-- 顶部导航栏 -->
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">仪表板</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary">导出</button>
<button type="button" class="btn btn-sm btn-outline-secondary">打印</button>
</div>
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dateRangeDropdown" data-bs-toggle="dropdown" aria-expanded="false">
<i class="bi bi-calendar"></i> 本周
</button>
<ul class="dropdown-menu" aria-labelledby="dateRangeDropdown">
<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>
</div>
</div>
</div>
<!-- 标签页导航 -->
<ul class="nav nav-tabs" id="dashboardTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" aria-controls="sales" aria-selected="false">
<i class="bi bi-cart"></i> 销售
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="reports-tab" data-bs-toggle="tab" data-bs-target="#reports" type="button" role="tab" aria-controls="reports" aria-selected="false">
<i class="bi bi-file-earmark-text"></i> 报告
</button>
</li>
</ul>
<div class="tab-content" id="dashboardTabsContent">
<div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
<div class="row mt-3">
<div class="col-md-3">
<div class="card text-white bg-primary">
<div class="card-body">
<h5 class="card-title">总用户数</h5>
<h2>1,234</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success">
<div class="card-body">
<h5 class="card-title">活跃用户</h5>
<h2>567</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-warning">
<div class="card-body">
<h5 class="card-title">新增用户</h5>
<h2>89</h2>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-info">
<div class="card-body">
<h5 class="card-title">在线用户</h5>
<h2>12</h2>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="users" role="tabpanel" aria-labelledby="users-tab">
<p class="mt-3">用户管理内容...</p>
</div>
<div class="tab-pane fade" id="sales" role="tabpanel" aria-labelledby="sales-tab">
<p class="mt-3">销售数据内容...</p>
</div>
<div class="tab-pane fade" id="reports" role="tabpanel" aria-labelledby="reports-tab">
<p class="mt-3">报告内容...</p>
</div>
</div>
</main>
</div>
</div>
<style>
.sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 100;
padding: 48px 0 0;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
font-weight: 500;
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
.sidebar .nav-link:hover {
color: #007bff;
}
</style>
自定义导航样式
1. 自定义导航栏样式
/* 自定义导航栏样式 */
.custom-navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.custom-navbar .navbar-brand {
font-weight: bold;
color: white !important;
}
.custom-navbar .nav-link {
color: rgba(255,255,255,0.9) !important;
transition: all 0.3s ease;
position: relative;
}
.custom-navbar .nav-link:hover {
color: white !important;
transform: translateY(-2px);
}
.custom-navbar .nav-link.active {
color: white !important;
}
.custom-navbar .nav-link.active::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 3px;
background: #ffd700;
border-radius: 2px;
}
/* 自定义下拉菜单样式 */
.custom-dropdown .dropdown-menu {
border: none;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-radius: 10px;
padding: 10px 0;
}
.custom-dropdown .dropdown-item {
padding: 10px 20px;
transition: all 0.3s ease;
}
.custom-dropdown .dropdown-item:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateX(5px);
}
/* 自定义面包屑样式 */
.custom-breadcrumb {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 25px;
padding: 15px 25px;
}
.custom-breadcrumb .breadcrumb-item a {
color: #667eea;
text-decoration: none;
font-weight: 500;
}
.custom-breadcrumb .breadcrumb-item a:hover {
color: #764ba2;
}
.custom-breadcrumb .breadcrumb-item.active {
color: #333;
font-weight: 600;
}
/* 自定义分页样式 */
.custom-pagination .page-link {
border: none;
color: #667eea;
font-weight: 500;
margin: 0 2px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.custom-pagination .page-link:hover {
background: #667eea;
color: white;
transform: scale(1.1);
}
.custom-pagination .page-item.active .page-link {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
}
2. 响应式导航优化
/* 响应式导航优化 */
@media (max-width: 991.98px) {
.navbar-collapse {
background: white;
margin-top: 10px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
padding: 20px;
}
.navbar-nav .nav-link {
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.navbar-nav .nav-link:last-child {
border-bottom: none;
}
.dropdown-menu {
position: static;
float: none;
width: 100%;
margin-top: 0;
background-color: #f8f9fa;
border: none;
box-shadow: none;
}
}
@media (max-width: 575.98px) {
.pagination {
justify-content: center;
}
.pagination .page-item {
margin: 0 1px;
}
.pagination .page-link {
padding: 8px 12px;
font-size: 14px;
}
.breadcrumb {
font-size: 14px;
padding: 10px 15px;
}
}
导航组件可访问性
1. 键盘导航支持
// 键盘导航支持
document.addEventListener('DOMContentLoaded', function() {
// 为导航链接添加键盘支持
const navLinks = document.querySelectorAll('.nav-link');
navLinks.forEach(link => {
link.addEventListener('keydown', function(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
this.click();
}
});
});
// 为下拉菜单添加键盘支持
const dropdownToggles = document.querySelectorAll('.dropdown-toggle');
dropdownToggles.forEach(toggle => {
toggle.addEventListener('keydown', function(e) {
if (e.key === 'ArrowDown') {
e.preventDefault();
const dropdown = this.nextElementSibling;
if (dropdown) {
const firstItem = dropdown.querySelector('.dropdown-item');
if (firstItem) firstItem.focus();
}
}
});
});
// 下拉菜单项键盘导航
const dropdownItems = document.querySelectorAll('.dropdown-item');
dropdownItems.forEach((item, index, items) => {
item.addEventListener('keydown', function(e) {
switch(e.key) {
case 'ArrowDown':
e.preventDefault();
const nextItem = items[index + 1];
if (nextItem) nextItem.focus();
break;
case 'ArrowUp':
e.preventDefault();
const prevItem = items[index - 1];
if (prevItem) prevItem.focus();
break;
case 'Escape':
e.preventDefault();
const toggle = this.closest('.dropdown').querySelector('.dropdown-toggle');
if (toggle) toggle.focus();
break;
}
});
});
});
2. ARIA 标签优化
<!-- 优化的可访问性导航 -->
<nav class="navbar navbar-expand-lg" role="navigation" aria-label="主导航">
<div class="container">
<a class="navbar-brand" href="#" aria-label="返回首页">
<img src="logo.png" alt="公司Logo" width="120" height="40">
</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 class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav" role="menubar">
<li class="nav-item" role="none">
<a class="nav-link" href="#" role="menuitem" aria-current="page">首页</a>
</li>
<li class="nav-item dropdown" role="none">
<a class="nav-link dropdown-toggle"
href="#"
id="productsDropdown"
role="menuitem"
data-bs-toggle="dropdown"
aria-expanded="false"
aria-haspopup="true">
产品
</a>
<ul class="dropdown-menu"
aria-labelledby="productsDropdown"
role="menu">
<li role="none">
<a class="dropdown-item" href="#" role="menuitem">产品A</a>
</li>
<li role="none">
<a class="dropdown-item" href="#" role="menuitem">产品B</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- 优化的面包屑导航 -->
<nav aria-label="面包屑导航" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#" aria-label="返回首页">首页</a>
</li>
<li class="breadcrumb-item">
<a href="#" aria-label="查看产品列表">产品</a>
</li>
<li class="breadcrumb-item active" aria-current="page">
产品详情
</li>
</ol>
</nav>
<!-- 优化的分页导航 -->
<nav aria-label="分页导航" role="navigation">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true" aria-label="上一页">上一页</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="第1页">1</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#" aria-label="当前页，第2页">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="第3页">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="下一页">下一页</a>
</li>
</ul>
</nav>
性能优化建议
1. 导航组件懒加载
// 导航组件懒加载
class NavigationLazyLoader {
constructor() {
this.observerOptions = {
root: null,
rootMargin: '50px',
threshold: 0.1
};
this.observer = new IntersectionObserver(
this.handleIntersection.bind(this),
this.observerOptions
);
this.init();
}
init() {
// 观察需要懒加载的导航元素
const lazyNavElements = document.querySelectorAll('[data-lazy-nav]');
lazyNavElements.forEach(element => {
this.observer.observe(element);
});
}
handleIntersection(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.loadNavigation(entry.target);
this.observer.unobserve(entry.target);
}
});
}
loadNavigation(element) {
const navType = element.dataset.lazyNav;
switch(navType) {
case 'dropdown':
this.loadDropdownContent(element);
break;
case 'mega-menu':
this.loadMegaMenuContent(element);
break;
case 'sidebar':
this.loadSidebarContent(element);
break;
}
}
loadDropdownContent(element) {
// 模拟异步加载下拉菜单内容
setTimeout(() => {
const dropdownMenu = element.querySelector('.dropdown-menu');
if (dropdownMenu) {
dropdownMenu.innerHTML = `
<li><a class="dropdown-item" href="#">动态加载项1</a></li>
<li><a class="dropdown-item" href="#">动态加载项2</a></li>
<li><a class="dropdown-item" href="#">动态加载项3</a></li>
`;
}
}, 100);
}
loadMegaMenuContent(element) {
// 加载大型菜单内容
console.log('加载大型菜单内容');
}
loadSidebarContent(element) {
// 加载侧边栏内容
console.log('加载侧边栏内容');
}
}
// 初始化懒加载
document.addEventListener('DOMContentLoaded', () => {
new NavigationLazyLoader();
});
2. 导航缓存优化
// 导航缓存优化
class NavigationCache {
constructor() {
this.cache = new Map();
this.cacheExpiry = 5 * 60 * 1000; // 5分钟过期
}
set(key, data) {
const item = {
data: data,
timestamp: Date.now()
};
this.cache.set(key, item);
}
get(key) {
const item = this.cache.get(key);
if (!item) {
return null;
}
// 检查是否过期
if (Date.now() - item.timestamp > this.cacheExpiry) {
this.cache.delete(key);
return null;
}
return item.data;
}
clear() {
this.cache.clear();
}
}
// 导航数据管理器
class NavigationManager {
constructor() {
this.cache = new NavigationCache();
}
async getMenuData(menuId) {
// 先从缓存获取
const cachedData = this.cache.get(menuId);
if (cachedData) {
return cachedData;
}
// 从服务器获取
try {
const response = await fetch(`/api/menu/${menuId}`);
const data = await response.json();
// 存入缓存
this.cache.set(menuId, data);
return data;
} catch (error) {
console.error('获取菜单数据失败:', error);
return null;
}
}
async renderMenu(menuId, container) {
const menuData = await this.getMenuData(menuId);
if (menuData && container) {
container.innerHTML = this.generateMenuHTML(menuData);
}
}
generateMenuHTML(menuData) {
return menuData.items.map(item => `
<li class="nav-item">
<a class="nav-link" href="${item.url}">${item.title}</a>
</li>
`).join('');
}
}
// 使用示例
const navManager = new NavigationManager();
// 动态加载菜单
document.addEventListener('DOMContentLoaded', async () => {
const mainNav = document.getElementById('main-navigation');
await navManager.renderMenu('main', mainNav);
});
本章总结
本章详细介绍了 Bootstrap 的导航与菜单组件，包括：
- 导航栏组件：基础导航栏、响应式导航栏、固定导航栏等
- 面包屑导航：基础面包屑、带图标面包屑、自定义分隔符
- 分页组件：基础分页、不同尺寸分页、高级分页功能
- 标签页组件：基础标签页、药丸式标签页
- 下拉菜单组件：基础下拉菜单、复杂下拉菜单、多级菜单
- 实际应用案例：企业网站导航、后台管理系统导航
- 自定义样式：导航栏样式、响应式优化
- 可访问性优化：键盘导航、ARIA 标签
- 性能优化：懒加载、缓存优化
这些导航组件是构建现代网站导航结构的核心元素，掌握它们的使用方法和自定义技巧，能够帮助你构建出功能完善、用户体验良好的网站导航系统。
练习题
基础练习
- 创建一个包含 Logo、主导航菜单、搜索框和用户菜单的响应式导航栏
- 实现一个带有面包屑导航的产品详情页面
- 创建一个支持跳转功能的分页组件
- 实现一个包含多个标签页的用户设置界面
进阶练习
- 创建一个多级下拉菜单的企业网站导航
- 实现一个带有侧边栏导航的后台管理系统
- 创建一个支持键盘导航的可访问性导航组件
- 实现一个带有懒加载功能的大型菜单系统 class=“nav-link active” id=“overview-tab” data-bs-toggle=“tab” data-bs-target=“#overview” type=“button” role=“tab” aria-controls=“overview” aria-selected=“true”> 概览
