Foundation -岩石教程

特点

响应式设计：支持移动优先布局，确保在各种设备上的一致性。
自定义性强：通过 SASS 可以轻松定制样式和主题。
丰富的组件库：包括按钮、导航栏、模态框、网格系统等。
JavaScript 插件：提供多种实用的 JS 插件，如弹出框、标签页、表单验证等。
良好的文档：详细的文档和代码示例，帮助开发者快速上手。
活跃的社区：提供商业支持和丰富的学习资源。

使用场景

企业级网站：适用于需要复杂布局和高可定制性的企业网站。
移动应用：为移动设备优化，确保应用在不同屏幕尺寸上的一致性。
快速原型设计：利用其丰富的组件库，可以快速搭建网站原型。

安装方式

可以通过多种方式安装 Foundation：

使用 npm 安装

npm install foundation-sites

使用 CDN 引入

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

使用示例

以下是一个简单的使用示例，展示如何使用 Foundation 构建一个基本的布局：

<!doctype html>
<html class="no-js" lang="en">
<head>
  <meta charset="utf-8">
  <title>Foundation Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
</head>
<body>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="cell small-6">
        <h1>Hello, Foundation!</h1>
        <p>This is a basic example of a Foundation grid layout.</p>
      </div>
      <div class="cell small-6">
        <p>Responsive and customizable.</p>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>
  <script>$(document).foundation();</script>
</body>
</html>

常用 API 介绍

网格系统 (Grid System)
- grid-container：定义一个网格容器。
- grid-x：水平排列的网格行。
- grid-padding-x：水平排列的网格行，带有内边距。
- cell：网格单元，根据大小类进行调整 (small-6、medium-4 等)。
按钮 (Buttons)
- button：基础按钮样式。
- success、alert、secondary：不同状态的按钮样式。
模态框 (Modal)
- reveal：模态框容器。
- close-reveal-modal：关闭模态框的按钮。
导航栏 (Navigation)
- top-bar：顶部导航栏。
- menu：菜单列表。
- dropdown：下拉菜单。

高级用法

Foundation 提供了强大的 SASS 支持，可以通过自定义 SASS 变量来改变框架的默认样式。例如，可以创建一个自定义的主题：

$foundation-palette: (
  primary: #2199e8,
  secondary: #777,
  success: #3adb76,
  warning: #ffae00,
  alert: #ec5840
);

@import 'foundation-sites';

通过上述方法，可以快速创建与品牌一致的自定义样式，提升用户体验和品牌识别度。

官方资料

Foundation 官方文档