揭秘Bootstrap4：打造时尚菜单样式的实用指南

Bootstrap 4 是一个流行的前端框架，它提供了丰富的工具和组件来帮助开发者快速构建响应式、移动优先的网站。在这个指南中，我们将深入了解如何使用 Bootstrap 4 来创建时尚的菜单样式。

引言

随着互联网的发展，网站的用户界面设计越来越重要。一个美观且易于使用的菜单可以提升用户体验，使网站更加专业。Bootstrap 4 提供了一系列的导航组件，可以帮助我们轻松实现这一目标。

准备工作

在开始之前，请确保您的项目中已经包含了 Bootstrap 4 的 CSS 和 JS 文件。可以从 Bootstrap 官网下载并引入。

<!-- 引入 Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- 引入 Bootstrap JS 和依赖的 Popper.js --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.5/dist/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

创建基本菜单

Bootstrap 4 提供了 nav 和 nav-item 类来创建基本的水平菜单。以下是一个简单的例子：

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav>

这个例子创建了一个包含三个链接的水平菜单。

时尚菜单样式

为了让菜单看起来更时尚，我们可以使用一些 Bootstrap 4 的实用类和自定义 CSS。

1. 使用颜色

Bootstrap 4 提供了丰富的颜色主题，我们可以使用这些颜色来美化菜单。

<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Pricing</a> </li> </ul> </div> </nav>

2. 使用图标

图标可以增加菜单的视觉吸引力。Bootstrap 4 提供了 fa 和 far 类来使用 Font Awesome 图标。

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#"><i class="fas fa-home"></i> Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-cog"></i> Features</a> </li> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-dollar-sign"></i> Pricing</a> </li> </ul> </div> </nav>

3. 使用下拉菜单

Bootstrap 4 的 dropdown 组件可以帮助我们创建下拉菜单。

<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Brand</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="#">Home <span class="sr-only">(current)</span></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"> Features </a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </li> </ul> </div> </nav>