什么是导航？

导航就像网站的地图，帮助用户在网站的不同页面或同一页面的不同部分之间跳转。

创建基本导航

创建一个导航栏需要两个主要元素：

• <ul class="nav"> – 导航容器
• <li class="nav-item"> – 导航项容器
• <a class="nav-link"> – 实际的导航链接

填充导航 (Justified)

让所有导航项平均分配导航栏的宽度，看起来更均衡。

活动状态

使用 .active 类表示当前所在的页面。

禁用状态

使用 .disabled 类表示不可点击的导航项。

水平对齐

可以使用flex布局工具类来对齐导航项：

居中导航：

右对齐导航：

垂直导航

使用 .flex-column 类可以让导航项垂直排列：

基本标签页

标签页导航看起来像浏览器标签，常用于切换内容面板：

带下拉菜单的标签页

可以在标签页中加入下拉菜单：

基本胶囊导航

胶囊导航有圆角外观，常用于强调导航项：

垂直胶囊导航

胶囊导航也可以垂直排列：

什么是导航栏？

导航栏是网站顶部的完整导航系统，通常包含网站Logo、主导航、搜索框等元素。

基本导航栏

导航栏颜色方案

Bootstrap提供多种颜色主题：

• .navbar-light + .bg-light – 浅色主题
• .navbar-dark + .bg-dark – 深色主题
• .navbar-dark + .bg-primary – 彩色主题

折叠导航

在小屏幕上，导航项会自动折叠成汉堡菜单：

断点设置

.navbar-expand-{breakpoint} 类决定导航栏何时折叠：

• .navbar-expand-sm – 在小屏幕及以上展开
• .navbar-expand-md – 在中等屏幕及以上展开
• .navbar-expand-lg – 在大屏幕及以上展开(默认推荐)
• .navbar-expand-xl – 在超大屏幕及以上展开

导航中的下拉菜单

可以在导航项中添加下拉菜单：

导航栏中的下拉菜单