Bootstrap 4 导航栏：构建响应式和现代的网页导航

Bootstrap 4 导航栏：构建响应式和现代的网页导航

Bootstrap 4 是目前最受欢迎的前端框架之一，它提供了一套丰富的工具和组件，帮助开发者快速构建响应式、移动设备优先的网页。在网页设计中，导航栏是一个核心组件，它负责引导用户浏览网站的不同部分。Bootstrap 4 的导航栏组件不仅美观，而且功能强大，支持多种定制选项，可以轻松适应各种设计需求。

Bootstrap 4 导航栏的基础

Bootstrap 4 导航栏是基于 flexbox 构建的，这意味着它天生就具有很好的灵活性和对齐能力。要创建一个基本的导航栏，你需要使用以下几个主要的类：

• .navbar：这是导航栏的容器，它包含了所有导航栏内容。
• .navbar-expand{-sm|-md|-lg|-xl}：这个类用于控制导航栏何时展开成为水平导航。例如，.navbar-expand-lg 表示在超大屏幕（lg）及以上尺寸时展开。
• .navbar-brand：这个类用于导航栏中的品牌或项目名称。
• .navbar-nav：这个类用于创建导航链接的列表。

基本示例

下面是一个简单的 Bootstrap 4 导航栏示例：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">品牌名称</a>
  <