使用 Flowbite 与 Tailwind CSS 构建网站页脚（Footer）组件的完整指南-开发者社区

UI组件
前端

【免费下载链接】flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS

项目地址：https://gitcode.com/gh_mirrors/fl/flowbite

页脚（footer）位于每个页面最底部，往往是访问者最后接触的区域，也因此成为挽留用户、补充导航信息的关键位置：品牌 Logo、站点地图链接、版权声明、社交账号入口都可以在这里集中呈现。本篇指南基于开源项目 Flowbite（基于 Tailwind CSS 的 UI 组件库）的官方页脚文档，结合仓库内的主题源码与配置，完整讲解 5 种可复制的页脚实现方案——从最简单的"版权 + 链接"到全宽 Sitemap 与吸底（Sticky）页脚，并逐一拆解其中语义化设计 Token 的作用与暗色模式适配方式。读完本文，你将可以直接把这些页脚代码粘贴进自己的 Tailwind CSS 项目，并根据需求自由增删栏目、链接与社交图标。

页脚：常被低估的"最后一屏"

多数网站把最多的精力花在首屏（Hero）和主体内容上，却忽视了页脚。Flowbite 官方文档指出，页脚是网站最被低估的区域之一——当用户在主体内容区没有找到想要的信息时，一个设计良好的页脚恰恰是说服他们继续停留的手段。它可以承担：

品牌展示：放置 Logo 与品牌名称，加深品牌印象；
站内导航补充：以文本链接、多栏 Sitemap 的形式提供 About、隐私政策、服务条款等页面入口；
法律信息：版权声明、Licensing、Terms & Conditions；
社区与社交：GitHub、Twitter/X、Facebook、Discord、Dribbble 等外部账号入口；
产品矩阵：iOS / Android / Windows / macOS 等下载入口。

Flowbite 官方将这些页脚结构预置为基于 Tailwind CSS 工具类的组件（源码见 content/components/footer.md），配合 Flowbite 的主题变量即可开箱即用。

前置准备：引入 Flowbite 与主题变量

页脚示例中大量使用了bg-neutral-primary-soft、text-body、text-heading、border-default、rounded-base这类语义化类名，它们并非 Tailwind CSS 默认工具类，而是 Flowbite 主题变量生成的类。因此在复制页脚代码前，需要先完成 Flowbite 的引入。

根据仓库内 content/getting-started/quickstart.md 的说明，推荐通过 NPM 集成（当前仓库面向 Tailwind CSS v4）：

npm install flowbite

然后在你的入口 CSS 文件中依次完成三件事：导入主题变量、注册插件、指定源码路径：

/* 1. 导入默认主题（可选其他主题：minimal / enterprise / playful / mono） */ @import "flowbite/src/themes/default"; /* 2. 导入 Flowbite 插件，让 Tailwind 识别语义化工具类 */ @plugin "flowbite/plugin"; /* 3. 让 Tailwind 扫描 Flowbite 的源码文件 */ @source "../node_modules/flowbite";

如果是快速演示，也可以直接用 CDN 引入编译产物（CSS 放入<head>，JS 放在</body>前）：

<link href="https://cdn.jsdelivr.net/npm/flowbite/dist/flowbite.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/flowbite/dist/flowbite.min.js"></script>

本仓库自己的站点正是这样组织的——入口样式 src/main.css 中@import "./themes/themes.css"汇总了全部主题变量，并通过@plugin "./../plugin.js"注册插件；站点源码的扫描范围则在 tailwind.config.js 中配置（./layouts/**/*.html、./content/**/*.md、./src/**/*.ts等），同时开启了darkMode: 'class'，这就是示例支持暗色切换的配置基础。

认识页脚用到的语义化设计 Token

页脚示例中反复出现的类名，全部来源于仓库的默认主题文件 src/themes/default.css 中定义的 CSS 变量。下表整理了页脚布局最常用的几组（亮色值来自主题根作用域，暗色值来自该文件中的.dark作用域）：

类名	亮色值	暗色值（`.dark`）	在页脚中的作用
`bg-neutral-primary-soft`	`--color-white`	`--color-gray-900`	页脚主体背景色
`bg-neutral-primary`	`--color-white`	`--color-gray-950`	更深的页脚背景（Sitemap 场景使用）
`bg-neutral-secondary-soft`	`--color-gray-50`	`--color-gray-900`	页脚内分隔区块（如版权行）的背景
`text-body`	`--color-gray-600`	`--color-gray-400`	版权文案、次要链接文字
`text-heading`	`--color-gray-900`	`--color-white`	品牌名、栏目标题等强调文字
`border-default`	`--color-gray-200`	`--color-gray-800`	分隔线`<hr>`与描边颜色
`rounded-base`	`--radius-base: 12px`	同左	容器圆角
`shadow-xs`/`shadow-sm`	见主题定义	同左	页脚轻微阴影层级

正因为这些类名绑定的是"语义"而非"具体色值"，同一套页脚代码无需任何改动即可在暗色模式（html或body上添加.dark类）下自动切换配色，这也是 Flowbite 页脚组件的一个核心优势。

默认页脚：版权声明 + 站内链接

<footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4"> <div class="w-full mx-auto max-w-screen-xl p-4 md:flex md:items-center md:justify-between"> <span class="text-sm text-body sm:text-center">© 2023 <a href="/" class="hover:underline">Flowbite™</a>. All Rights Reserved. </span> <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0"> <li> <a href="#" class="hover:underline me-4 md:me-6">About</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Licensing</a> </li> <li> <a href="#" class="hover:underline">Contact</a> </li> </ul> </div> </footer>

几个值得注意的布局要点：

容器约束：max-w-screen-xl将内容宽度限制在最大 1280px，mx-auto居中，w-full保证小屏下占满宽度；这是 Flowbite 页脚示例统一采用的内容约束策略。
响应式排布：md:flex md:items-center md:justify-between让版权与链接在中屏以上左右分布并垂直居中；小屏（sm:mt-0之前的mt-3）则让链接换行堆叠。
链接间距：me-4 md:me-6使用逻辑属性（margin-inline-end），配合文档站的rtl切换可自动适配从右到左（RTL）的排版；这也是示例中多处使用me-/ms-前缀的原因。
交互细节：hover:underline提供悬停下划线反馈。

带品牌 Logo 的页脚

<footer class="bg-neutral-primary-soft rounded-base shadow-xs border border-default m-4"> <div class="w-full max-w-screen-xl mx-auto p-4 md:py-8"> <div class="sm:flex sm:items-center sm:justify-between"> <a href="/" class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"> <img src="static/images/logo.svg" class="h-7" alt="Flowbite Logo" /> <span class="text-heading self-center text-2xl font-semibold whitespace-nowrap">Flowbite</span> </a> <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-body sm:mb-0"> <li> <a href="#" class="hover:underline me-4 md:me-6">About</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Licensing</a> </li> <li> <a href="#" class="hover:underline">Contact</a> </li> </ul> </div> <hr class="my-6 border-default sm:mx-auto lg:my-8" /> <span class="block text-sm text-body sm:text-center">© 2023 <a href="/" class="hover:underline">Flowbite™</a>. All Rights Reserved.</span> </div> </footer>

布局要点：

Logo 组合：flex items-center space-x-3 rtl:space-x-reverse让图标与品牌文字水平排列，rtl:space-x-reverse负责 RTL 方向反转；h-7控制 Logo 高度，text-heading ... font-semibold用主题色渲染品牌名。
分隔线：<hr class="my-6 border-default ... lg:my-8">使用border-default语义色，亮暗模式自动适配；lg:my-8在桌面端加大上下留白。
代码中的 Logo 图片路径仅作示意，实际项目中请替换为你自己的品牌 Logo 地址（仓库内的static/images/logo.svg即 Flowbite 的 Logo 源文件）。

多栏页脚 + 社交图标

对于需要承载更多信息的站点，这个变体在顶部放置 Logo，中部使用grid布局划分三列（Resources / Follow us / Legal），底部则是一排社交图标（Facebook、Discord、Twitter/X、GitHub、Dribbble）：

<footer class="bg-neutral-primary-soft"> <div class="mx-auto w-full max-w-screen-xl p-4 py-6 lg:py-8"> <div class="md:flex md:justify-between"> <div class="mb-6 md:mb-0"> <a href="/" class="flex items-center"> <img src="static/images/logo.svg" class="h-7 me-3" alt="FlowBite Logo" /> <span class="text-heading self-center text-2xl font-semibold whitespace-nowrap">Flowbite</span> </a> </div> <div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3"> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Resources</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="/" class="hover:underline">Flowbite</a> </li> <li> <a href="https://tailwindcss.com/" class="hover:underline">Tailwind CSS</a> </li> </ul> </div> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Follow us</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class="hover:underline ">Github</a> </li> <li> <a href="#" class="hover:underline">Discord</a> </li> </ul> </div> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Legal</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class="hover:underline">Privacy Policy</a> </li> <li> <a href="#" class="hover:underline">Terms &amp; Conditions</a> </li> </ul> </div> </div> </div> <hr class="my-6 border-default sm:mx-auto lg:my-8" /> <div class="sm:flex sm:items-center sm:justify-between"> <span class="text-sm text-body sm:text-center">© 2023 <a href="/" class="hover:underline">Flowbite™</a>. All Rights Reserved. </span> <div class="flex mt-4 sm:justify-center sm:mt-0"> <a href="#" class="text-body hover:text-heading"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/></svg> <span class="sr-only">Facebook page</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg> <span class="sr-only">Discord community</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/></svg> <span class="sr-only">Twitter page</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg> <span class="sr-only">GitHub account</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" clip-rule="evenodd"/></svg> <span class="sr-only">Dribbble account</span> </a> </div> </div> </div> </footer>

结构拆解：

栏目网格：grid grid-cols-2 gap-8 sm:grid-cols-3实现"移动端两列、平板以上三列"的自适应栏目排布，每个栏目由h2标题（text-sm font-semibold text-heading uppercase）加链接列表组成。
社交图标：全部使用内联 SVG（fill="currentColor"），配合text-body hover:text-heading让图标颜色跟随文字语义变化，悬停时加深；图标之间用ms-5提供逻辑间距。
可访问性细节：每个 SVG 都带有aria-hidden="true"，同时用<span class="sr-only">Facebook page</span>提供仅屏幕阅读器可见的文本说明——这是 Flowbite 组件在无障碍方面的标准做法，视觉上不显示、但读屏软件可以朗读。
代码中href="#"为占位链接，接入真实项目时应替换为对应的社交主页地址。

Sitemap 全宽页脚

对于页面众多的大型站点，Flowbite 提供了整行铺满的 Sitemap 页脚：四栏分类链接占据全宽，底部版权行使用更深一层的背景色，并附带社交图标：

<footer class="bg-neutral-primary"> <div class="mx-auto w-full max-w-screen-xl"> <div class="grid grid-cols-2 gap-8 px-4 py-6 lg:py-8 md:grid-cols-4"> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Company</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class=" hover:underline">About</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Careers</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Brand Center</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Blog</a> </li> </ul> </div> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Help center</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class="hover:underline">Discord Server</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Twitter</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Facebook</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Contact Us</a> </li> </ul> </div> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Legal</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class="hover:underline">Privacy Policy</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Licensing</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Terms &amp; Conditions</a> </li> </ul> </div> <div> <h2 class="mb-6 text-sm font-semibold text-heading uppercase">Download</h2> <ul class="text-body font-medium"> <li class="mb-4"> <a href="#" class="hover:underline">iOS</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Android</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">Windows</a> </li> <li class="mb-4"> <a href="#" class="hover:underline">MacOS</a> </li> </ul> </div> </div> <div class="px-4 py-6 bg-neutral-secondary-soft md:flex md:items-center md:justify-between"> <span class="text-sm text-body sm:text-center">© 2023 <a href="/">Flowbite™</a>. All Rights Reserved. </span> <div class="flex mt-4 sm:justify-center md:mt-0 space-x-2 rtl:space-x-reverse"> <!-- 此处社交图标 SVG 与上一节的 Facebook / Discord / Twitter / GitHub / Dribbble 五枚图标完全一致，可复制复用 --> <a href="#" class="text-body hover:text-heading"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M13.135 6H15V3h-1.865a4.147 4.147 0 0 0-4.142 4.142V9H7v3h2v9.938h3V12h2.021l.592-3H12V6.591A.6.6 0 0 1 12.592 6h.543Z" clip-rule="evenodd"/></svg> <span class="sr-only">Facebook page</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M18.942 5.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.586 11.586 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3 17.392 17.392 0 0 0-2.868 11.662 15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.638 10.638 0 0 1-1.706-.83c.143-.106.283-.217.418-.331a11.664 11.664 0 0 0 10.118 0c.137.114.277.225.418.331-.544.328-1.116.606-1.71.832a12.58 12.58 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM8.678 14.813a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.929 1.929 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"/></svg> <span class="sr-only">Discord community</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/></svg> <span class="sr-only">Twitter page</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/></svg> <span class="sr-only">GitHub account</span> </a> <a href="#" class="text-body hover:text-heading ms-5"> <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M12 2a10 10 0 1 0 10 10A10.009 10.009 0 0 0 12 2Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.093 20.093 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM10 3.707a8.82 8.82 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.755 45.755 0 0 0 10 3.707Zm-6.358 6.555a8.57 8.57 0 0 1 4.73-5.981 53.99 53.99 0 0 1 3.168 4.941 32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.641 31.641 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM12 20.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 15.113 13a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z" clip-rule="evenodd"/></svg> <span class="sr-only">Dribbble account</span> </a> </div> </div> </div> </footer>

实现要点：

四栏网格：grid grid-cols-2 ... md:grid-cols-4让小屏两列、中屏以上四列铺满整行，每个栏目块内部li通过mb-4保持一致的纵向间距。
层级区分：版权行使用bg-neutral-secondary-soft（亮色下为gray-50，暗色下为gray-900），与上方bg-neutral-primary（亮色white/ 暗色gray-950）形成微妙的明暗层级，视觉上把"导航区"与"版权区"分开。
与前面的示例相比，此版本去掉了容器圆角与描边，px-4 py-6直接控制内边距，更适合作为页面级、通栏的页脚。

吸底（Sticky）页脚

如果希望页脚始终固定在浏览器底部、随滚动保持可见，可以使用fixed定位。Flowbite 官方给出的实现如下：

<footer class="fixed bottom-0 left-0 z-20 w-full p-4 bg-neutral-primary-soft border-t border-default shadow-sm md:flex md:items-center md:justify-between md:p-6"> <span class="text-sm text-body sm:text-center">© 2023 <a href="/" class="hover:underline">Flowbite™</a>. All Rights Reserved. </span> <ul class="flex flex-wrap items-center mt-3 text-sm font-medium text-body sm:mt-0"> <li> <a href="#" class="hover:underline me-4 md:me-6">About</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Privacy Policy</a> </li> <li> <a href="#" class="hover:underline me-4 md:me-6">Licensing</a> </li> <li> <a href="#" class="hover:underline">Contact</a> </li> </ul> </footer>

定位与适配说明：

fixed bottom-0 left-0将页脚钉在视口左下角，w-full占满整行；z-20保证其悬浮在普通文档流内容之上。
border-t border-default shadow-sm在顶部勾勒一条语义分隔线并添加轻微阴影，让页脚与滚动内容之间产生清晰的视觉边界。
md:p-6在桌面端放大内边距，移动端保持p-4，兼顾触控与鼠标两种操作场景。
需要注意：fixed定位的页脚会覆盖页面底部内容，若主内容区没有预留足够底边距，末段内容可能被遮挡。在实际落地时，请结合z-index层级与内容区的padding-bottom综合规划（该示例在文档站中以 iframe 高度 480px 的预览形式展示，正是为了演示这种覆盖效果）。

总结：页脚设计的最佳实践清单

综合 Flowbite 官方页脚文档与仓库源码，落地一个高质量页脚可以遵循以下原则：

信息分层：按"品牌区 → 导航栏目 → 版权 + 社交"三段式组织，用border-default的<hr>或bg-neutral-secondary-soft背景做视觉切分；
响应式优先：一律使用sm:/md:/lg:断点工具类，保证移动端单列堆叠、桌面端多栏并排，并配合max-w-screen-xl mx-auto约束大屏宽度；
语义化 Token 替代硬编码色值：使用text-body、text-heading、border-default、neutral-primary-soft等 Flowbite 主题类，让暗色模式与换肤零成本生效；
无障碍不缺席：社交图标保留sr-only文本、aria-hidden="true"，链接保持hover:underline等可见反馈；
按场景选形态：轻量页面用默认页脚，品牌宣传加 Logo，信息量大用多栏或 Sitemap 全宽版，需要常驻提示则使用 fixed 吸底版。