垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 导航 ​

🎯 概述 ​

Bootstrap 导航（Navs）组件提供了灵活的导航样式，包括标签页、胶囊式导航、垂直导航等。导航组件是构建网站导航系统的基础。

📦 基本导航 ​

基础导航 ​

使用 .nav 类创建基本导航：

html
<ul class="nav">
    <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">
        <a class="nav-link disabled">禁用</a>
    </li>
</ul>

使用 nav 元素 ​

html
<nav class="nav">
    <a class="nav-link active" aria-current="page" href="#">首页</a>
    <a class="nav-link" href="#">关于</a>
    <a class="nav-link" href="#">联系</a>
    <a class="nav-link disabled">禁用</a>
</nav>

🎨 导航样式 ​

水平对齐 ​

html
<!-- 居中对齐 -->
<ul class="nav justify-content-center">
    <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>

<!-- 右对齐 -->
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link" href="#">首页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#">产品</a>
    </li>
</ul>

垂直导航 ​

html
<ul class="nav flex-column">
    <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">
        <a class="nav-link disabled">禁用</a>
    </li>
</ul>

🏷️ 标签页导航 ​

使用 .nav-tabs 类创建标签页样式：

html
<ul class="nav nav-tabs">
    <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">
        <a class="nav-link disabled">禁用</a>
    </li>
</ul>

💊 胶囊式导航 ​

使用 .nav-pills 类创建胶囊式导航：

html
<ul class="nav nav-pills">
    <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">
        <a class="nav-link disabled">禁用</a>
    </li>
</ul>

📐 填充和对齐 ​

填充导航 ​

使用 .nav-fill 让导航项填充可用空间：

html
<ul class="nav nav-pills nav-fill">
    <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>

等宽导航 ​

使用 .nav-justified 让导航项等宽：

html
<ul class="nav nav-pills nav-justified">
    <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>

🎪 带下拉菜单的导航 ​

html
<ul class="nav nav-tabs">
    <li class="nav-item">
        <a class="nav-link active" href="#">首页</a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
            产品
        </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>
    <li class="nav-item">
        <a class="nav-link" href="#">服务</a>
    </li>
</ul>

🔄 标签页内容切换 ​

结合 JavaScript 实现标签页内容切换：

html
<!-- 标签页导航 -->
<ul class="nav nav-tabs" id="myTab" 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">
            首页
        </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">
            个人资料
        </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">
            联系方式
        </button>
    </li>
</ul>

<!-- 标签页内容 -->
<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel">
        首页内容
    </div>
    <div class="tab-pane fade" id="profile" role="tabpanel">
        个人资料内容
    </div>
    <div class="tab-pane fade" id="contact" role="tabpanel">
        联系方式内容
    </div>
</div>

💻 JavaScript API ​

初始化 ​

javascript
// 通过 JavaScript 激活标签页
const triggerTabList = document.querySelectorAll('#myTab button');
triggerTabList.forEach(triggerEl => {
    const tabTrigger = new bootstrap.Tab(triggerEl);
    
    triggerEl.addEventListener('click', event => {
        event.preventDefault();
        tabTrigger.show();
    });
});

方法 ​

javascript
const someTabTriggerEl = document.querySelector('#someTabId');
const tab = new bootstrap.Tab(someTabTriggerEl);

// 显示标签页
tab.show();

// 销毁标签页实例
tab.dispose();

// 获取或创建实例
const tab = bootstrap.Tab.getOrCreateInstance(someTabTriggerEl);

🎭 事件监听 ​

javascript
const tabEl = document.querySelector('button[data-bs-toggle="tab"]');

// 标签页即将显示时触发
tabEl.addEventListener('show.bs.tab', event => {
    console.log('即将显示:', event.target); // 新激活的标签页
    console.log('之前的:', event.relatedTarget); // 之前激活的标签页
});

// 标签页显示完成后触发
tabEl.addEventListener('shown.bs.tab', event => {
    console.log('已显示:', event.target);
});

// 标签页即将隐藏时触发
tabEl.addEventListener('hide.bs.tab', event => {
    console.log('即将隐藏:', event.target);
});

// 标签页隐藏完成后触发
tabEl.addEventListener('hidden.bs.tab', event => {
    console.log('已隐藏:', event.target);
});

🌟 实际示例 ​

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">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 导航示例</h1>
        
        <!-- 基本导航 -->
        <h2>基本导航</h2>
        <ul class="nav mb-4">
            <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">
                <a class="nav-link disabled">禁用</a>
            </li>
        </ul>
        
        <!-- 标签页导航 -->
        <h2>标签页导航</h2>
        <ul class="nav nav-tabs mb-4">
            <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>
            <li class="nav-item">
                <a class="nav-link disabled">禁用</a>
            </li>
        </ul>
        
        <!-- 胶囊式导航 -->
        <h2>胶囊式导航</h2>
        <ul class="nav nav-pills mb-4">
            <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>
            <li class="nav-item">
                <a class="nav-link disabled">禁用</a>
            </li>
        </ul>
        
        <!-- 垂直导航 -->
        <h2>垂直导航</h2>
        <div class="row mb-4">
            <div class="col-3">
                <ul class="nav flex-column nav-pills">
                    <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>
                    <li class="nav-item">
                        <a class="nav-link disabled">禁用</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 填充导航 -->
        <h2>填充导航</h2>
        <ul class="nav nav-pills nav-fill mb-4">
            <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>
        
        <!-- 等宽导航 -->
        <h2>等宽导航</h2>
        <ul class="nav nav-pills nav-justified mb-4">
            <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>
        
        <!-- 带下拉菜单的导航 -->
        <h2>带下拉菜单的导航</h2>
        <ul class="nav nav-tabs mb-4">
            <li class="nav-item">
                <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button">
                    产品分类
                </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><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>
            <li class="nav-item">
                <a class="nav-link" href="#">关于我们</a>
            </li>
        </ul>
        
        <!-- 标签页内容切换 -->
        <h2>标签页内容切换</h2>
        <ul class="nav nav-tabs" id="productTabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab">
                    产品描述
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="specs-tab" data-bs-toggle="tab" data-bs-target="#specs" type="button" role="tab">
                    规格参数
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab">
                    用户评价
                </button>
            </li>
        </ul>
        <div class="tab-content border border-top-0 p-3 mb-4" id="productTabsContent">
            <div class="tab-pane fade show active" id="description" role="tabpanel">
                <h4>产品描述</h4>
                <p>这是一款高品质的产品，采用先进的技术和优质的材料制造。适合各种使用场景，性能稳定可靠。</p>
                <ul>
                    <li>高性能处理器</li>
                    <li>大容量存储</li>
                    <li>长续航时间</li>
                </ul>
            </div>
            <div class="tab-pane fade" id="specs" role="tabpanel">
                <h4>规格参数</h4>
                <table class="table">
                    <tbody>
                        <tr>
                            <th>尺寸</th>
                            <td>150 x 75 x 8 mm</td>
                        </tr>
                        <tr>
                            <th>重量</th>
                            <td>180g</td>
                        </tr>
                        <tr>
                            <th>颜色</th>
                            <td>黑色、白色、蓝色</td>
                        </tr>
                        <tr>
                            <th>保修</th>
                            <td>1年</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="tab-pane fade" id="reviews" role="tabpanel">
                <h4>用户评价</h4>
                <div class="mb-3">
                    <strong>张三</strong>
                    <span class="text-warning">★★★★★</span>
                    <p class="mb-1">非常好用，性能出色，值得购买！</p>
                    <small class="text-muted">2024-01-15</small>
                </div>
                <div class="mb-3">
                    <strong>李四</strong>
                    <span class="text-warning">★★★★☆</span>
                    <p class="mb-1">整体不错，性价比高。</p>
                    <small class="text-muted">2024-01-10</small>
                </div>
            </div>
        </div>
        
        <!-- 垂直标签页 -->
        <h2>垂直标签页</h2>
        <div class="row">
            <div class="col-3">
                <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
                    <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab">
                        首页
                    </button>
                    <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab">
                        个人资料
                    </button>
                    <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab">
                        消息
                    </button>
                    <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab">
                        设置
                    </button>
                </div>
            </div>
            <div class="col-9">
                <div class="tab-content" id="v-pills-tabContent">
                    <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
                        <h4>首页</h4>
                        <p>欢迎来到首页！这里显示最新的动态和信息。</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-profile" role="tabpanel">
                        <h4>个人资料</h4>
                        <p>查看和编辑你的个人信息。</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-messages" role="tabpanel">
                        <h4>消息</h4>
                        <p>你有 3 条未读消息。</p>
                    </div>
                    <div class="tab-pane fade" id="v-pills-settings" role="tabpanel">
                        <h4>设置</h4>
                        <p>配置你的账户设置和偏好。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 监听标签页切换事件
        const tabElements = document.querySelectorAll('button[data-bs-toggle="tab"]');
        tabElements.forEach(tabEl => {
            tabEl.addEventListener('shown.bs.tab', event => {
                console.log('切换到:', event.target.textContent);
            });
        });
    </script>
</body>
</html>

✅ 最佳实践 ​

1. 可访问性 ​

html
<!-- 使用正确的 ARIA 属性 -->
<ul class="nav nav-tabs" 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>
</ul>

<div class="tab-content">
    <div class="tab-pane fade show active" 
         id="home" 
         role="tabpanel" 
         aria-labelledby="home-tab">
        内容
    </div>
</div>

2. 响应式设计 ​

html
<!-- 在小屏幕上使用下拉菜单 -->
<div class="d-md-none">
    <select class="form-select" onchange="location = this.value;">
        <option value="#home">首页</option>
        <option value="#products">产品</option>
        <option value="#services">服务</option>
    </select>
</div>

<ul class="nav nav-tabs d-none d-md-flex">
    <li class="nav-item">
        <a class="nav-link" href="#home">首页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#products">产品</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#services">服务</a>
    </li>
</ul>

3. 语义化 HTML ​

html
<!-- 使用 nav 元素包裹导航 -->
<nav aria-label="主导航">
    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a class="nav-link" href="#">首页</a>
        </li>
    </ul>
</nav>

🎯 常见应用场景 ​

  1. 网站主导航 - 顶部导航栏
  2. 标签页切换 - 内容分组展示
  3. 侧边栏导航 - 垂直导航菜单
  4. 产品详情页 - 多标签内容展示
  5. 用户中心 - 功能模块导航

下一步 ​

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

下一章：Bootstrap 导航栏 →