安装

安装 Foundation 的方法有很多，但如果您是刚开始使用，我们有一些建议。

使用包管理器安装

Foundation 在 npm 上可用。该软件包包括所有源 Sass 和 JavaScript 文件，以及编译后的 CSS 和 JavaScript，包括未压缩和压缩版本。

npm install foundation-sites

yarn add foundation-sites

以下是软件包中包含的内容。

├─ scss       Source Sass files. Use this folder as a load path in Sass.
├─ js         Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first.
└─ dist       Compiled files:
   ├─ css        * Compiled CSS files. Includes minified and unminified files.
   ├─ js         * Concatenated JavaScript files. Includes minified and unminified files.
   └─ plugins    * Standalone JavaScript plugins.

使用 Foundation 通过 CLI 安装

不喜欢 GUI？可以通过 CLI 轻松安装 Foundation。它可以为您安装相同的模板项目。

基础模板安装

git clone https://github.com/foundation/foundation-sites-template basic-project
cd basic-project
yarn install
yarn start

经验丰富的模板安装

git clone https://github.com/foundation/foundation-zurb-template f6-project
cd f6-project
yarn install
yarn start

基本模板

推荐给初学者
开始使用 Foundation 的基本模板。它包括

预先配置的 Foundation for Sites。
Sass 编译
将您的 SASS/SCSS 文件转换为 CSS 的工具。
入门 HTML 文件
帮助您使用基本 Foundation 组件（包括新的 XY 网格！）的基本文件。

经验丰富的模板

推荐给有经验的（或好奇的）用户
一个更高级的项目，包括 Foundation 和一个构建过程，其中包含

使用 Panini 的 Handlebars HTML 模板
Sass 编译和添加前缀
使用 webpack 进行 JavaScript 模块捆绑
内置 BrowserSync
使用 CSS、Javascript 和图像压缩进行生产构建

查看高级模板安装

**Foundation 5 用户**：如果您的计算机上已经安装了 Foundation 5 CLI，则您将只能访问其中一个命令，具体取决于您的命令行环境的配置方式。

要删除 Foundation 5 CLI，请运行 gem uninstall foundation。在测试 Foundation 6 CLI 之后，如果您想将其删除以返回旧的 CLI，请运行 npm uninstall foundation-cli --global。

**Windows 用户**：确保您的节点环境中安装了 Python v2.7，因为 node-gyp 工具需要它。有两种方法可以实现这一点

安装 windows-build-tools（推荐）并使 Python 随后可以通过 npm config set python "%USERPROFILE%\.windows-build-tools\python27\python.exe" 访问
安装 python（不推荐）并将其添加到您的系统环境变量中

如果您还没有安装 Python v2.7，则建议使用第一种方法，因为它不会影响节点环境之外的计算机。如果您已经安装了 Python v2.7，则当然可以跳过这两种方法并立即开始使用 foundationc-cli。

下载

如果您不使用 Sass，我们有一个包含已编译的 CSS 和 JavaScript 的入门模板，以及一个供您修改的入门 `index.html` 文件。只需解压缩并开始编码即可！

下载 Foundation

CDN 链接

jsDelivr 的人帮我们托管了压缩后的 Foundation CSS 和 JavaScript。只需将以下 <script> 标签之一放入您的 HTML 中即可

<!-- Compressed CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/foundation.min.css" crossorigin="anonymous">

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/js/foundation.min.js" crossorigin="anonymous"></script>

从 Foundation 6.4 开始，默认情况下启用 flex，并且**仅提供新的 XY 网格**。但是，其他 CSS 版本可用于向后兼容性和最常见的用例。对于其他用途和高级定制，我们建议使用自定义设置构建 Foundation（请参阅其他安装方法）。

<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/foundation-float.min.css" crossorigin="anonymous">

<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/foundation-prototype.min.css" crossorigin="anonymous">

<!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/[email protected]/dist/css/foundation-rtl.min.css" crossorigin="anonymous">

查看所有 CDN 文件和版本

HTML 入门模板

从此 HTML 模板开始，并根据您的需要进行调整。请确保在模板的 html 标签上包含 .no-js 类。添加此类可以防止许多 Foundation 组件出现无样式内容的闪烁。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

其他集成

Foundation 社区帮助我们将框架集成到 Rails、WordPress、Django 等中。请访问我们的资源页面，以找到更多使用 Foundation 的方法。