navbar-expand 含义介绍

navbar-expand 是 Bootstrap 框架中的一个 CSS 类，用于控制导航栏（navbar）的扩展行为。在 Bootstrap 中，导航栏为一个响应式组件，可以在不同的设备上自动调整布局。

通过添加 navbar-expand 类名，可以控制导航栏在不同的屏幕尺寸下的展示方式。具体来说，navbar-expand 提供了以下 optional class：

• navbar-expand-sm - 在 small devices（sm）上展开导航栏
• navbar-expand-md - 在 medium devices （md）上展开导航栏
• navbar-expand-lg - 在 large devices （lg）上展开导航栏
• navbar-expand-xl - 在 extra-large devices （xl）上展开导航栏

可以根据需要，添加不同的 optional class，以控制导航栏在不同的设备上的展开方式。例如，在大屏幕上，可以让导航栏展开，而在小屏幕上则不展开，这可以提高用户体验，使得用户在不同的设备上能够轻松地使用网站。

<nav class="navbar navbar-expand-lg">
  <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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

上面的代码中，我们使用 navbar-expand-lg 类名来控制导航栏在 large devices 上展开。在小屏幕上，导航栏会自动折叠，使用一个按钮 (navbar-toggler) 来展开和关闭导航栏。 navbar-toggler 组件必须和导航栏的 collapse 组件一起使用。

总之，navbar-expand 在 Bootstrap 中是一个非常实用的 CSS 类，可以帮助我们轻松地控制导航栏在不同设备上的展开和折叠。