Bootstrap 4是一个流行的前端框架，它提供了丰富的组件和工具来帮助开发者快速构建响应式网站。在Bootstrap 4中，构建多级菜单是一个常见的需求，以下是一篇详细的实战攻略，帮助您轻松实现这一功能。
一、多级菜单概述
多级菜单通常指的是包含多个层级，每个层级都可以展开或收起的菜单。在Bootstrap 4中，我们可以使用<nav>元素、<ul>和<li>元素来构建多级菜单。
二、HTML结构
首先，我们需要构建多级菜单的HTML结构。以下是一个简单的例子：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
第一级菜单
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">第二级菜单1</a>
<a class="dropdown-item" href="#">第二级菜单2</a>
<div class="dropdown-submenu">
<a class="dropdown-item" href="#">第三级菜单1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">第四级菜单1</a>
<a class="dropdown-item" href="#">第四级菜单2</a>
</div>
</div>
</div>
</li>
<!-- 其他菜单项 -->
</ul>
</div>
</nav>
三、CSS样式
Bootstrap 4提供了丰富的CSS类来帮助我们美化菜单。以下是一些常用的CSS类：
.nav-item: 用于菜单项。.dropdown: 用于下拉菜单。.dropdown-menu: 用于下拉菜单的内容。.dropdown-submenu: 用于嵌套的下拉菜单。
四、JavaScript脚本
为了实现菜单的交互效果，我们需要使用JavaScript。以下是一个简单的例子：
document.addEventListener('DOMContentLoaded', function () {
var dropdowns = document.querySelectorAll('.dropdown-submenu > a');
dropdowns.forEach(function (dropdown) {
dropdown.addEventListener('click', function (e) {
var dropdownMenu = dropdown.nextElementSibling;
dropdownMenu.classList.toggle('show');
e.stopPropagation();
});
});
});
五、实战案例
以下是一个使用Bootstrap 4构建的多级菜单的实战案例：
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
第一级菜单
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">第二级菜单1</a>
<a class="dropdown-item" href="#">第二级菜单2</a>
<div class="dropdown-submenu">
<a class="dropdown-item" href="#">第三级菜单1</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">第四级菜单1</a>
<a class="dropdown-item" href="#">第四级菜单2</a>
</div>
</div>
</div>
</li>
<!-- 其他菜单项 -->
</ul>
</div>
</nav>
通过以上步骤，您就可以轻松地在Bootstrap 4中构建多级菜单了。希望这篇实战攻略对您有所帮助！