Bootstrap 4 导航栏：更轻松、更强大的导航体验

2023-06-10 03:35:20

利用 Bootstrap 4 导航栏打造引人注目的导航体验

导航栏：网站的门户

在当今数字时代，拥有一个精心设计的网站至关重要。而导航栏是网站最重要的元素之一，它不仅可以让用户轻松浏览网站内容，还能提升网站的整体美观度。Bootstrap 4 作为一款流行的前端框架，为开发者提供了强大的导航栏组件，让你可以轻松创建出美观又强大的导航菜单。

Bootstrap 4 导航栏的基本结构

Bootstrap 4 导航栏由以下关键元素组成：

导航栏容器（<nav>）： 包含整个导航栏结构的容器。
导航栏品牌（<a>）： 网站的品牌或徽标，通常位于导航栏的左侧。
导航栏切换按钮（<button>）： 在移动端设备上用于切换导航栏可见性的按钮。
导航栏菜单（<ul>）： 包含导航链接的列表。
导航链接（<a>）： 指向网站特定页面的链接。

构建你的导航栏：一个循序渐进的指南

1. 创建导航栏容器

<nav class="navbar navbar-expand-lg navbar-light bg-light">

navbar-expand-lg：该类可以让导航栏在大型屏幕上自动扩展。
navbar-light：该类设置导航栏为浅色主题。
bg-light：该类将导航栏背景颜色设置为浅灰色。

2. 添加导航栏品牌

<a class="navbar-brand" href="#">
  <img src="logo.png" alt="My Website">
</a>

navbar-brand：该类将元素标记为导航栏品牌。
href：该属性指定导航栏品牌链接到的页面。
img：该标签用于插入图片。
src：该属性指定图片的来源。
alt：该属性指定图片的替代文本。

3. 添加导航栏切换按钮

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

navbar-toggler：该类将元素标记为导航栏切换按钮。
type="button"：该属性指定元素类型为按钮。
data-toggle="collapse"：该属性指定元素用于切换可折叠元素。
data-target="#navbarSupportedContent"：该属性指定要切换的元素的 ID。
aria-controls="navbarSupportedContent"：该属性指定元素控制的可折叠元素的 ID。
aria-expanded="false"：该属性指定元素最初处于折叠状态。
aria-label="Toggle navigation"：该属性指定元素的辅助标签。
span：该标签用于将内容放入按钮中。
navbar-toggler-icon：该类将元素标记为导航栏切换按钮图标。

4. 添加导航栏菜单

<div class="collapse navbar-collapse" id="navbarSupportedContent">
  <ul class="navbar-nav mr-auto">
    <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="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</div>

collapse：该类使导航栏菜单可折叠。
navbar-collapse：该类将元素标记为导航栏菜单。
id="navbarSupportedContent"：该属性指定元素的 ID，与导航栏切换按钮中的 data-target 属性相对应。
navbar-nav：该类将元素标记为导航栏菜单列表。
mr-auto：该类设置导航栏菜单自动对齐到容器的右侧。
nav-item：该类将元素标记为导航栏菜单项。
active：该类标记当前激活的导航栏菜单项。
nav-link：该类将元素标记为导航栏菜单链接。
href：该属性指定导航栏菜单链接指向的页面。
sr-only：该类将元素隐藏在非屏幕阅读器设备上。

5. 添加导航链接

<a class="nav-link" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Contact</a>