---
title: "页脚"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS 页脚具有多列布局、社交链接和品牌部分。语义 HTML5、SEO 友好的响应式网站页脚结构。"
url: https://frutjam.com/zh-hans/components/footer
---
# 页脚组件
Footer components organize and present site-wide information like links, copyright, and contact details at the bottom of pages. Built with semantic HTML, footers improve navigation and provide important meta information. The Frutjam footer system supports multiple layouts, directions, and styles—ideal for site footers, documentation footers, and bottom navigation.
CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.
| Class | Type | Description |
| ----------------- | -------- | -------------------------------------- |
| footer | Base | Page footer container with grid layout |
| footer-title | Modifier | Section heading inside the footer |
| footer-horizontal | Modifier | Horizontal single-row layout |
| footer-vertical | Modifier | Vertical stacked layout |
## Basic Usage
## Footer Directions
```html
```
## Footer with Social
```html
```