Bootstrap 是一个流行的前端框架，它提供了许多组件来帮助开发者快速构建响应式网站。在 Bootstrap 4 中，菜单组件是一个非常重要的部分，它可以帮助你轻松创建美观且功能齐全的导航菜单。本文将揭秘 Bootstrap4 中菜单的样式设置，帮助你打造个性化的导航，提升网站的视觉效果。

1. 菜单基础结构

在 Bootstrap4 中，菜单的基本结构由以下 HTML 元素组成：

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">品牌logo</a> <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 active"> <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <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="#">产品一</a> <a class="dropdown-item" href="#">产品二</a> <a class="dropdown-item" href="#">产品三</a> </div> </li> </ul> </div> </nav> 

2. 菜单样式

Bootstrap4 提供了多种样式类来定制菜单的外观：

2.1 背景颜色

使用 bg- 前缀的样式类来设置背景颜色，例如 bg-primary：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> ... </nav> 

2.2 字体颜色

使用 text- 前缀的样式类来设置字体颜色，例如 text-white：

<nav class="navbar navbar-expand-lg navbar-dark bg-primary text-white"> ... </nav> 

2.3 边框

使用 border- 前缀的样式类来设置边框，例如 border-bottom：

<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> ... </nav> 

2.4 边距

使用 m- 和 mt-、mr-、mb-、ml- 前缀的样式类来设置边距，例如 mt-2：

<nav class="navbar navbar-expand-lg navbar-light bg-light mt-2"> ... </nav> 

3. 响应式菜单

Bootstrap4 的菜单是响应式的，可以在不同的屏幕尺寸下自动调整布局。使用 navbar-expand-lg 类可以实现水平菜单，当屏幕宽度小于 992px 时，菜单将折叠成一个汉堡按钮。

4. 个性定制

要打造个性化的导航菜单，可以通过以下方式：

4.1 自定义图标

使用 Font Awesome 或其他图标库来添加图标：

<i class="fa fa-home"></i> 首页 

4.2 使用自定义样式

使用 CSS 来自定义菜单样式，例如：

.navbar-nav { justify-content: center; } .nav-item { margin-right: 15px; } 

5. 总结

通过以上内容，你现在已经掌握了 Bootstrap4 中菜单的基本用法和样式设置。利用这些技巧，你可以轻松打造出个性化和美观的导航菜单，提升网站的视觉效果。