Bootstrap 5 导航
导航菜单如果要创建简单的水平菜单，请将 .nav 类添加到 <ul> 元素，然后为每个 <li> 元素添加 .nav-item 并将 .nav-link 类添加到它们的链接：
实例
<ul class="nav">
<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>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
亲自试一试
对齐导航栏
添加 .justify-content-center 类使导航居中，添加 .justify-content-end 类使导航右对齐。
实例
<!-- 居中的导航 -->
<ul class="nav justify-content-center">
<!-- 右对齐的导航 -->
<ul class="nav justify-content-end">
亲自试一试
垂直导航栏
添加 .flex-column 类可创建垂直导航：
实例
<ul class="nav flex-column">
亲自试一试
选项卡
请使用 .nav-tabs 类将导航菜单转换为导航选项卡。并将 .active 类添加到活动/当前链接。如果您希望选项卡可切换，请参阅本页的最后一个例子。
实例
<ul class="nav nav-tabs">
<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" href="#">禁用</a>
</li>
</ul>
亲自试一试
胶囊
使用 .nav-pills 类可将导航菜单设置为导航胶囊。如果您希望胶囊可切换，请参阅本页的最后一个例子。
实例
<ul class="nav 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" href="#">禁用</a>
</li>
</ul>
亲自试一试
等宽的选项卡/胶囊导航
请使用 .nav-justified 类（等宽）对齐标签/胶囊：
实例
<ul class="nav nav-pills nav-justified">..</ul>
<ul class="nav nav-tabs nav-justified">..</ul>
亲自试一试
胶囊下拉菜单
实例
<ul class="nav nav-pills">
<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="#">Dropdown</a>
<ul class="dropdown-menu">
<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>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
亲自试一试
选项卡下拉菜单
实例
<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="#">Dropdown</a>
<ul class="dropdown-menu">
<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>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
亲自试一试
可切换的 / 动态选项卡
如需使选项卡可切换，请将 data-toggle="tab" 属性添加到每个链接。然后为每个选项卡添加有唯一 ID 的 .tab-pane 类，并将它们包装在带有 .tab-content 类的 <div> 元素中。
如果您希望选项卡在单击时能够淡入淡出，请将 .fade 类添加到 .tab-pane：
实例
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">Menu 2</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
亲自试一试
可切换的 / 动态胶囊导航
相同的代码适用于导航；仅将 data-toggle 属性更改为 data-toggle="pill" 即可：
实例
<!--导航胶囊 -->
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="pill" href="#home">春日</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu1">初夏</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="pill" href="#menu2">山行</a>
</li>
</ul>
<!-- 选项卡窗格 -->
<div class="tab-content">
<div class="tab-pane container active" id="home">...</div>
<div class="tab-pane container fade" id="menu1">...</div>
<div class="tab-pane container fade" id="menu2">...</div>
</div>
亲自试一试
BS5 折叠
BS5 导航栏
JavaScript 测验
W3School 简体中文版提供的内容仅用于培
页:
[1]