Foundation CSS 参考手册（完整指南）

Foundation CSS 参考手册：从零开始构建响应式网页

你是否曾为移动端适配焦头烂额？是否在写 CSS 时反复调整 media query，却总感觉布局不够灵活？如果你正在寻找一个能快速上手、结构清晰、组件丰富的前端框架，那么 Foundation CSS 会是你的理想选择。

Foundation 是由 ZURB 团队开发的一套现代前端框架，它以响应式设计为核心，提供了一整套预定义的 CSS 类和组件，帮助开发者高效构建跨设备兼容的网页。无论你是初学者，还是已有一定经验的中级开发者，这份《Foundation CSS 参考手册》将带你一步步掌握其核心用法。

基础结构与网格系统：网页的骨架搭建

在开始设计页面之前，首先要理解 Foundation 的基础结构。它采用“容器 → 行 → 列”的层级模型，类似于搭建积木，每一步都清晰可控。

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-12 medium-6 large-4">
      这是一个占满小屏全宽、中等屏一半、大屏四分之一的区块
    </div>
    <div class="cell small-12 medium-6 large-4">
      第二个区块
    </div>
    <div class="cell small-12 medium-12 large-4">
      第三个区块，中等屏占满、大屏占四分之一
    </div>
  </div>
</div>

• grid-container：为整个布局提供外边距和最大宽度限制，相当于页面的“画布”。
• grid-x：定义一个水平方向的行（row），用于排列子元素。
• grid-margin-x：为行内子元素添加水平外边距，避免元素紧贴边缘。
• cell：表示网格中的一个单元格，是内容容器。
• small-12、medium-6、large-4：响应式断点控制，分别对应小屏（< 768px）、中屏（≥ 768px）、大屏（≥ 1024px）下的列宽占比。

💡 小贴士：你可以把网格系统想象成“可伸缩的乐高积木”。每块积木（cell）在不同设备上会自动调整大小，确保页面始终美观。

响应式断点与媒体查询机制

Foundation 使用了标准的响应式断点策略，让你无需手动写 @media 规则。它预设了四个断点：

这些断点通过 CSS 类名自动生效。例如：

<div class="cell small-12 medium-6 large-4 xlarge-3">
  内容区域
</div>

• 在手机上，该元素占满 12 列；
• 在平板上，占 6 列（即一半）；
• 在大屏上，占 4 列（即 1/3）；
• 在超大屏上，占 3 列（即 1/4）。

⚠️ 注意：xlarge 断点在默认设置中需要额外启用。若未生效，请检查是否引入了 foundation-xy 模块。

常用 UI 组件：让页面“活”起来

Foundation 不仅提供布局，还内置了大量可复用的 UI 组件，极大提升开发效率。

按钮与链接样式

按钮是用户交互的核心。Foundation 提供多种按钮变体，无需额外 CSS 即可使用。

<!-- 基础按钮 -->
<button class="button">默认按钮</button>

<!-- 主要按钮 -->
<button class="button primary">主要操作</button>

<!-- 成功/警告/危险按钮 -->
<button class="button success">成功操作</button>
<button class="button warning">警告提示</button>
<button class="button alert">危险操作</button>

<!-- 圆角按钮 -->
<button class="button round">圆角按钮</button>

<!-- 无边框按钮（适合图标） -->
<a href="#" class="button hollow">空心链接</a>

• primary：强调主操作；
• success / warning / alert：用于状态反馈；
• round：圆角设计，更现代；
• hollow：空心样式，适合轻量级操作。

✅ 建议：在表单中使用 button 元素，避免用 <a> 模拟按钮，以保持语义正确。

表单控件：简化输入体验

表单是网站交互的重要部分。Foundation 提供了统一的表单样式，让输入更直观。

<form>
  <!-- 文本输入框 -->
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <label>用户名</label>
      <input type="text" placeholder="请输入用户名" class="input-text">
    </div>
  </div>

  <!-- 密码输入框 -->
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <label>密码</label>
      <input type="password" placeholder="请输入密码" class="input-text">
    </div>
  </div>

  <!-- 下拉选择框 -->
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <label>选择地区</label>
      <select class="select">
        <option value="">请选择</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
      </select>
    </div>
  </div>

  <!-- 提交按钮 -->
  <div class="grid-x grid-margin-x">
    <div class="cell small-12">
      <button type="submit" class="button primary expand">提交</button>
    </div>
  </div>
</form>

• input-text：统一输入框样式，包含内边距和边框；
• select：下拉框统一样式；
• expand：让按钮占满父容器宽度，适合表单提交。

辅助类与布局工具：提升开发效率的“小技巧”

Foundation 提供了许多实用的辅助类，帮助你在不写自定义 CSS 的情况下实现复杂布局。

文本对齐与间距控制

<!-- 文本居中 -->
<div class="text-center">
  这段文字在水平方向居中
</div>

<!-- 左对齐（默认） -->
<div class="text-left">
  这是左对齐
</div>

<!-- 右对齐 -->
<div class="text-right">
  这是右对齐
</div>

<!-- 垂直居中（配合 flex 使用） -->
<div class="grid-x align-center">
  <div class="cell small-12">
    <div class="text-center vertical-align">内容垂直居中</div>
  </div>
</div>

• text-center / text-left / text-right：快速控制文本对齐；
• align-center：用于 grid-x 行内，使子元素垂直居中；
• vertical-align：配合 Flexbox 实现内容垂直居中。

隐藏与显示控制

<!-- 在小屏隐藏，中屏及以上显示 -->
<div class="hide-for-small-only show-for-medium-up">
  仅在中屏及以上设备可见
</div>

<!-- 在大屏隐藏 -->
<div class="show-for-small-only hide-for-large-up">
  仅在小屏可见
</div>

• hide-for-*：在指定断点下隐藏元素；
• show-for-*：在指定断点下显示元素。

🛠 使用场景：为移动端设计简洁版导航，为桌面端展示完整菜单。

实战案例：构建一个响应式卡片布局

我们来实战一个完整的小项目：一个包含图片、标题和描述的卡片列表。

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <!-- 卡片 1 -->
    <div class="cell small-12 medium-6 large-4">
      <div class="card">
        <div class="card-image">
          <img src="image1.jpg" alt="图片1">
        </div>
        <div class="card-section">
          <h4>项目一</h4>
          <p>这是一个使用 Foundation 构建的响应式卡片，支持多设备适配。</p>
        </div>
        <div class="card-footer">
          <a href="#" class="button secondary hollow expand">查看详情</a>
        </div>
      </div>
    </div>

    <!-- 卡片 2 -->
    <div class="cell small-12 medium-6 large-4">
      <div class="card">
        <div class="card-image">
          <img src="image2.jpg" alt="图片2">
        </div>
        <div class="card-section">
          <h4>项目二</h4>
          <p>通过 Foundation 的网格系统，轻松实现多列布局。</p>
        </div>
        <div class="card-footer">
          <a href="#" class="button secondary hollow expand">查看详情</a>
        </div>
      </div>
    </div>
  </div>
</div>

• card：定义卡片容器，自带阴影和圆角；
• card-image：用于包裹图片，自动处理比例；
• card-section：卡片内容区域；
• card-footer：底部操作区域；
• expand：按钮占满卡片宽度。

这个布局在手机上为单列，平板上为两列，桌面端为三列，完美适应不同屏幕。

总结：Foundation CSS 参考手册的价值

Foundation CSS 并不是为了取代 CSS，而是为开发者提供一个“标准答案”——一套经过验证、结构清晰、响应式优先的开发范式。它降低了学习成本，提升了团队协作效率，尤其适合快速原型开发和中小型项目。

无论你是刚接触前端，还是希望提升开发效率的中级开发者，掌握 Foundation 的核心机制，都能让你在构建现代网页时事半功倍。这份《Foundation CSS 参考手册》不仅是工具书，更是一份可落地的实践指南。

从今天起，告别繁琐的 media query 和手动布局，用 Foundation 的网格与组件，让开发变得更简单、更优雅。