如何使用CSS框架实现导航栏布局？Bootstrap与Tailwind案例详解

导航栏是网页中引导用户跳转不同页面的核心模块，使用CSS框架可以快速完成响应式、样式统一的导航栏开发，无需手动处理大量样式兼容问题。本文分别通过Bootstrap和Tailwind两个主流框架，演示导航栏布局的实现过程。

Bootstrap实现导航栏布局

Bootstrap内置了完整的导航栏组件，通过预定义的类可以快速搭建基础结构，同时自带响应式折叠功能，适配移动端和桌面端。

基础代码实现

首先引入Bootstrap的CSS文件，这里使用官方CDN链接：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

导航栏的基础结构代码如下：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">站点名称</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="切换导航">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">首页</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">产品介绍</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">关于我们</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

代码说明

• navbar-expand-lg表示在屏幕宽度大于等于992px时展开导航栏，小于该宽度时显示折叠按钮
• navbar-toggler是移动端显示的折叠按钮，点击后通过data-bs-target关联对应的折叠内容区域
• navbar-nav定义导航项列表，内部的nav-item和nav-link分别对应单个导航项和链接

Tailwind实现导航栏布局

Tailwind是实用优先的CSS框架，没有预定义的组件，需要通过组合工具类来实现导航栏样式，灵活性更高。

基础代码实现

首先引入Tailwind的CSS文件：

<script src="https://cdn.tailwindcss.com"></script>

导航栏的实现代码如下：

<nav class="bg-white border-gray-200 dark:bg-gray-900">
  <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
    <a href="https://ipipp.com" class="flex items-center space-x-3 rtl:space-x-reverse">
      <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">站点名称</span>
    </a>
    <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
      <span class="sr-only">打开主菜单</span>
      <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
      </svg>
    </button>
    <div class="hidden w-full md:block md:w-auto" id="navbar-default">
      <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
        <li>
          <a href="#" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white md:dark:text-blue-500" aria-current="page">首页</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">产品介绍</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">关于我们</a>
        </li>
        <li>
          <a href="#" class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">联系我们</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

代码说明

• flex flex-wrap items-center justify-between实现导航栏内部元素的弹性布局，两端对齐且支持换行
• md:hidden和md:block是响应式工具类，表示在中等屏幕及以上隐藏折叠按钮、显示导航列表
• 通过组合py-2 px-3、hover:bg-gray-100等类实现导航项的内边距和 hover 效果

两种框架的实现对比

开发者可以根据项目需求选择对应的框架，如果追求快速开发、样式统一，优先选择Bootstrap；如果需要高度定制样式、控制最终CSS体积，优先选择Tailwind。

CSS框架导航栏布局BootstrapTailwind修改时间：2026-06-09 00:00:24