2024年3月11日发(作者：)

Bootstrap4导航菜单及下拉菜单制作

Bootstrap是一个开源的前端框架，为我们提供了丰富的组件和工具，

可以帮助我们快速构建现代化的网页设计。其中，导航菜单和下拉菜

单是网页中常见的元素，本文将介绍如何利用Bootstrap4来制作导航菜

单及下拉菜单。

一、创建基础导航菜单

在使用Bootstrap4制作导航菜单之前，我们需要先引入Bootstrap的

相关资源文件，包括和。接下来，我

们可以利用以下代码创建一个简单的导航菜单：

以上代码中，我们使用了Bootstrap提供的.navbar和.navbar-nav类

来设置导航菜单的基本样式，每个菜单项使用.nav-item类，链接文字

使用.nav-link类。通过设置href属性可以指定链接的目标页面。

二、添加下拉菜单

在导航菜单中添加下拉菜单是非常常见的需求。Bootstrap4提供

了.dropdown和.dropdown-menu类来实现下拉菜单的制作。下面是一个

简单的例子：

在上述代码中，我们给包含下拉菜单的菜单项添加了.dropdown类，

并且在链接上添加了.dropdown-toggle类。这样点击链接时就会显示下

拉菜单。下拉菜单的选项使用.dropdown-menu类来定义，并且在链接

上添加data-toggle="dropdown"属性来启用下拉菜单功能。

三、自定义导航样式

Bootstrap4提供了一些内置的类来自定义导航菜单的样式，包括

navbar-light、navbar-dark、bg-light、bg-dark等。我们可以根据自己的

需求来选择相应的类来调整导航菜单的颜色和背景。例如，我们可以

在导航菜单外层的div上添加.bg-dark类来设置导航菜单的背景颜色为

深色：

除了颜色和背景的调整，我们还可以使用其他的样式类来调整导航

菜单的大小、边距等。具体可参考Bootstrap4的文档和样式指南。

总结：

通过本文的介绍，我们学习了如何利用Bootstrap4来制作导航菜单

及下拉菜单。首先，我们创建了基础的导航菜单，并使用相应的类来

设置样式。然后，我们添加了下拉菜单，并利用.dropdown

和.dropdown-menu类来实现下拉功能。最后，我们了解了如何自定义

导航菜单的样式，包括颜色、背景等。希望这些内容能够帮助你在使

用Bootstrap4时更灵活地制作导航菜单及下拉菜单。