Bootstrap4 中的导航栏 - Html

在 Bootstrap4 中，可以使用导航栏（Navbar）来实现页面导航和菜单的功能。导航栏可以包含品牌（Brand）、菜单按钮（Toggle Button）和链接（Links），可以根据需要自定义样式和布局。

添加导航栏

在 HTML 文件中，可以使用以下代码添加一个基本的导航栏：

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

这段代码包含了导航栏的基本结构，包括品牌、菜单按钮和链接。其中，navbar-expand-lg 表示导航栏在大屏幕上是展开的，可以在响应式设计中自动折叠，navbar-light bg-light 表示导航栏的背景颜色为浅色。

自定义导航栏

Bootstrap4 提供了大量的 CSS 类和 JavaScript 插件来自定义导航栏的样式和行为。可以根据需要添加或修改 CSS 类和 JavaScript 代码来实现自定义功能。

添加 Logo

可以使用 navbar-brand 类添加一个品牌 Logo，代表网站或品牌。

<a class="navbar-brand" href="#">
  <img src="logo.png" width="30" height="30" alt="">
  Brand
</a>

自定义菜单按钮

可以使用 navbar-toggler 类自定义菜单按钮的样式。

<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>

添加链接

可以使用 nav-item 和 nav-link 类添加导航链接。

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

响应式设计

Bootstrap4 中的导航栏支持响应式设计，可以在不同设备上自动折叠或展开。可以使用 navbar-expand-* 类来控制导航栏在不同屏幕大小下的展示效果。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

<nav class="navbar navbar-expand-sm navbar-light bg-light">
  <!-- 导航栏内容 -->
</nav>

总结

Bootstrap4 中的导航栏是实现页面导航和菜单的一种非常方便的方式，可以自定义样式和布局，同时支持响应式设计。在实际开发中，可以根据需要添加或修改 CSS 类和 JavaScript 代码来实现自定义功能。