Bootstrap 导航 定义和使用 如果要创建简单的水平菜单导航,请将 .nav 类添加到 <ul> 元素,然后为每个 <li> 添加 .nav-item 并将 .nav-link 类添加到其链接: <div class="container"> <ul class="nav"> <li class="nav-item"> <a class="nav-link" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> </div> 复制尝试一下 对齐导航 添加 .justify-content-center 类以使导航居中,并添加 .justify-content-end 类以使导航右对齐。 <div class="container"> //justify-content-center居中对应的导航 <ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> //justify-content-end右对齐的导航 <ul class="nav justify-content-end"> <li class="nav-item"> <a class="nav-link" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> </div> 复制尝试一下 垂直导航 添加 .flex-column 类以创建垂直导航: <div class="container"> <ul class="nav flex-column"> <li class="nav-item"> <a class="nav-link" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> </div> 复制尝试一下 导航选项卡 使用 .nav-tabs 类将导航菜单转换为导航选项卡;将 .active 类添加到活动/当前链接。 <div class="container"> <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> </div> 复制尝试一下 使用 .nav-pills 类将导航菜单转换为导航丸 <div class="container"> <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" href="#">导航1</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航2</a> </li> <li class="nav-item"> <a class="nav-link" href="#">导航3</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">禁用导航</a> </li> </ul> </div> 复制尝试一下 用 .nav-justified 类(相等的宽度)对齐导航选项卡/导航丸: <div class="container"> <ul class="nav nav-pills nav-justified">...</ul> <ul class="nav nav-tabs nav-justified">...</ul> </div> 复制尝试一下 带下拉菜单的导航 下面示例演示了带有下拉菜单的导航丸: <div class="container"> <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-toggle="dropdown" href="#">下拉菜单</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </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> </div> 复制尝试一下 下面示例演示了带有下拉菜单的导航选项卡: <div class="container"> <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-toggle="dropdown" href="#">下拉菜单</a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </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> </div> 复制尝试一下 可切换的导航 要使选项卡可切换,请将 data-toggle="tab" 属性添加到每个链接;然后为每个选项卡添加一个具有唯一ID的 .tab-pane 类,并将它们包装在具有 .tab-content 类的 <div> 元素中。 如果要在单击时淡入淡出选项卡,请将 .fade 类添加到 .tab-pane: <ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</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> 复制尝试一下 相同的代码适用于导航药丸;仅将 data-toggle 属性更改为 data-toggle="pill": <ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</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> 复制尝试一下 相关页面 Bootstrap 下拉菜单 Bootstrap 选项卡参考手册