Bootstrap 是一个流行的前端框架，它提供了许多工具和组件来帮助开发者快速构建响应式和美观的网站。Bootstrap4 引入了许多新的特性和改进，其中包括对导航栏的增强。本文将详细介绍如何使用 Bootstrap4 来创建一个时尚的网站导航栏。
1. 导航栏的基本结构
Bootstrap4 的导航栏组件使用 HTML 和 CSS 构建，其基本结构如下：
在这个例子中，我们创建了一个基本的导航栏，其中包含一个品牌链接和一个可折叠的菜单。
2. 响应式设计
Bootstrap4 的导航栏组件是响应式的，这意味着它会根据屏幕尺寸自动调整其布局。为了实现这一点，我们使用了
navbar-expand-lg
类。这个类意味着在中等屏幕（≥992px）上，导航栏会展开为水平布局，而在小屏幕（<992px）上，它会折叠为一个汉堡菜单。
3. 汉堡菜单
汉堡菜单是一个流行的界面元素，用于在小屏幕上隐藏导航菜单。在 Bootstrap4 中，我们可以通过添加
navbar-toggler
和
navbar-toggler-icon
类来创建一个汉堡菜单。
4. 导航链接样式
Bootstrap4 提供了一系列的类来帮助您自定义导航链接的样式。例如，您可以使用
nav-link
类来添加链接，并使用
active
类来指示当前页面。
Home (current)
5. 响应式下拉菜单
如果您想要在导航栏中添加下拉菜单，可以使用
dropdown
和
dropdown-item
类。以下是一个示例：
6. 实践示例
以下是一个完整的导航栏示例，它结合了上述所有特性：
通过使用 Bootstrap4 的导航栏组件，您可以轻松创建一个时尚且功能齐全的网站导航栏。这些组件易于使用，并且可以根据您的需求进行自定义。