如何在Bootstrap 5中通过CSS定制移动端底部固定导航标签栏-css教程-PHP中文网

在bootstrap 5中定制移动端底部固定导航标签栏，核心做法是移除默认的浅色背景与阴影，改用深色或自定义配色，并调整图标与文字间距。通过添加自定义css类覆盖`.navbar-dark`的默认样式，设置`position: fixed; bottom: 0; width: 100%`实现底部固定，同时利用`z-index`确保其位于页面内容之上。这样处理后，导航栏将紧贴屏幕底部，且视觉风格符合现代移动端设计规范。

如何在Bootstrap 5中通过CSS定制移动端底部固定导航标签栏

如何定义底部固定导航栏的HTML结构

要构建底部固定导航栏，需使用标准的Bootstrap Navbar组件结构，但将其放置在页面底部而非顶部。关键在于正确应用Bootstrap的语义化类名，如`.navbar`、`.navbar-dark`（用于深色背景）以及自定义的固定定位类。结构上包含一个容器、品牌占位符（可选）、导航链接列表和必要的折叠按钮（若需要响应式折叠）。由于是底部固定，通常不需要折叠功能，直接展示所有标签即可。

如何在Bootstrap 5中通过CSS定制移动端底部固定导航标签栏

<nav class="navbar navbar-expand-lg navbar-dark bg-custom-bottom fixed-bottom"><div class="container-fluid">
    <a class="navbar-brand d-none d-md-block" href="#">Logo</a>
    <div class="collapse navbar-collapse justify-content-center" id="bottomNavbar">
      <ul class="navbar-nav flex-row w-100 justify-content-around">
<li class="nav-item">
          <a class="nav-link active" href="#home">
            <i class="bi bi-house-fill"></i>
            <span class="d-block small">Home</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#search">
            <i class="bi bi-search"></i>
            <span class="d-block small">Search</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#profile">
            <i class="bi bi-person-fill"></i>
            <span class="d-block small">Profile</span>
          </a>
        </li>
      </ul>
</div>
  </div>
</nav>

上述代码创建了一个包含三个标签的底部导航栏：Home、Search和Profile。使用了Bootstrap Icons作为图标源，并通过d-block和small类将图标置于文字上方，形成典型的标签栏布局。

CSS

CSS 官方网站入口。访问 W3C 的 CSS 页面，查看 CSS 标准、学习资料与工作组动态；CSS 是 Web 标准，无需下载安装。

下载

.bg-custom-bottom {
  background-color: #1a1a1a !important;
  border-top: 1px solid #333;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.7);
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.navbar-dark .navbar-nav .nav-link i {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.fixed-bottom {
  /* 适配iPhone X及以上机型的底部安全区域 */
  padding-bottom: env(safe-area-inset-bottom);
}

这段CSS首先定义了的颜色，使其在未激活时为半透明白色，激活时变为纯白，并提供平滑过渡效果。图标大小被调整为1.5rem，并在下方留出少量间距。最后，填充，确保内容不会隐藏在设备底部的物理手势条下方。这种组合实现了视觉上统一且用户体验良好的底部导航栏。