---
title: "Footer"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Footer with multi-column layouts, social links, and brand sections. Semantic HTML5, SEO-friendly structure for responsive website footers."
url: https://frutjam.com/zh-hant/components/footer
---

# Footer Component

頁腳元件在頁面底部組織和呈現網站範圍的信息，例如連結、版權和聯絡資訊。頁腳採用語意 HTML 構建，可改善導覽並提供重要的元資訊。 Frutjam 頁腳系統支援多種佈局、方向和樣式，非常適合網站頁尾、文件頁尾和底部導覽。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級                | 類型  | 描述          |
| ----------------- | --- | ----------- |
| footer            | 根據  | 具有網格佈局的頁腳容器 |
| footer-title      | 修飾符 | 頁腳內的節標題     |
| footer-horizontal | 修飾符 | 水平單行版面      |
| footer-vertical   | 修飾符 | 垂直堆疊佈局      |

## 基本用法

## 頁尾方向

```html
<footer class="footer footer-center p-10 bg-base-200 text-on-base">
  <div class="flex justify-center">
    <a class="link link-hover">Company</a>
    <a class="link link-hover">About</a>
    <a class="link link-hover">Contact</a>
  </div>
  <div>
    <p>Copyright © 2024 - All rights reserved</p>
  </div>
</footer>
```

## 頁尾與社交

```html
<footer class="footer bg-neutral text-on-neutral p-10">
  <div>
    <span class="footer-title">Services</span>
    <a class="link link-hover">Web Design</a>
    <a class="link link-hover">UI/UX</a>
    <a class="link link-hover">Development</a>
  </div>

  <div>
    <span class="footer-title">Company</span>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
  </div>

  <div>
    <span class="footer-title">Social</span>
    <div class="flex gap-3">
      <a class="link">Twitter</a>
      <a class="link">GitHub</a>
      <a class="link">LinkedIn</a>
    </div>
  </div>
</footer>
```