Foundation 起步

本章将介绍如何开始使用 Foundation 框架，包括安装方法、基本设置和创建第一个 Foundation 页面。

安装 Foundation

Foundation 提供多种安装方式，你可以根据项目需求选择合适的方法。

方法一：使用 CDN（推荐新手使用）

最简单的方式是通过 CDN 直接引入 Foundation 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的第一个 Foundation 页面</title>

    <!-- Foundation CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
</head>
<body>
    <!-- 页面内容 -->

    <!-- jQuery（Foundation 依赖） -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Foundation JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

方法二：下载文件

你可以从 Foundation 官网下载文件包：

访问 Foundation 下载页面
选择需要的版本（Complete 或 Essential）
解压下载的文件
将 CSS 和 JS 文件复制到项目目录

目录结构示例：

project/
├── css/
│   └── foundation.min.css
├── js/
│   ├── vendor/
│   │   └── jquery.js
│   └── foundation.min.js
└── index.html

方法三：使用 npm

对于使用 Node.js 的项目，可以通过 npm 安装：

npm install foundation-sites

方法四：使用 Foundation CLI

Foundation 提供了命令行工具来创建项目：

# 安装 Foundation CLI
npm install --global foundation-cli

# 创建新项目
foundation new

基本模板

以下是一个完整的 Foundation 基本模板：

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<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 模板</title>

    <!-- Foundation CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">

    <!-- 自定义样式 -->
    <style>
        /* 在这里添加自定义样式 */
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-bar">
        <div class="top-bar-left">
            <ul class="menu">
                <li class="menu-text">网站名称</li>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="grid-container">
        <div class="grid-x grid-padding-x">
            <div class="cell">
                <h1>欢迎使用 Foundation!</h1>
                <p>这是你的第一个 Foundation 页面。</p>
                <a class="button" href="#">了解更多</a>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>
        $(document).foundation();
    </script>
</body>
</html>

重要的 meta 标签

viewport 标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这个标签对于响应式设计至关重要，它告诉浏览器：

width=device-width：页面宽度等于设备宽度
initial-scale=1.0：初始缩放比例为 1

no-js 类

<html class="no-js" lang="zh-CN">

no-js 类用于检测 JavaScript 是否可用。当 JavaScript 加载后，Foundation 会自动将其替换为 js 类。

初始化 Foundation

Foundation 的 JavaScript 组件需要初始化才能工作：

// 基本初始化 - 初始化所有组件
$(document).foundation();

// 或者初始化特定组件
$(document).foundation('dropdown');
$(document).foundation('tabs');

第一个示例：响应式布局

让我们创建一个简单的响应式三栏布局：

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>响应式布局示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <style>
        .demo-box {
            background: #1779ba;
            color: white;
            padding: 20px;
            margin-bottom: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <h1>响应式三栏布局</h1>

        <div class="grid-x grid-padding-x">
            <!-- 小屏幕时占满宽度，中等屏幕时占 4 列 -->
            <div class="cell small-12 medium-4">
                <div class="demo-box">第一栏</div>
            </div>
            <div class="cell small-12 medium-4">
                <div class="demo-box">第二栏</div>
            </div>
            <div class="cell small-12 medium-4">
                <div class="demo-box">第三栏</div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

效果说明：

在手机上（小屏幕）：三个栏目垂直堆叠，每个占满宽度
在平板/电脑上（中等及以上屏幕）：三个栏目并排显示

Foundation 目录结构

一个典型的 Foundation 项目结构：

my-foundation-project/
├── css/
│   ├── foundation.css      # Foundation 样式
│   ├── foundation.min.css  # 压缩版本
│   └── app.css             # 自定义样式
├── js/
│   ├── vendor/
│   │   └── jquery.js
│   ├── foundation.js
│   ├── foundation.min.js
│   └── app.js              # 自定义脚本
├── img/                    # 图片资源
└── index.html              # 主页面

浏览器支持

Foundation 6 支持以下浏览器：

浏览器	支持版本
Chrome	最新两个版本
Firefox	最新两个版本
Safari	最新两个版本
Edge	最新两个版本
IE	11+
iOS Safari	最新两个版本
Android	最新两个版本

常见问题

1. JavaScript 组件不工作？

确保：

jQuery 在 Foundation JS 之前加载
调用了 $(document).foundation()
没有 JavaScript 错误（检查浏览器控制台）

2. 样式不生效？

检查：

CSS 文件是否正确引入
是否有其他样式覆盖
类名是否正确

3. 响应式不工作？

确保添加了 viewport meta 标签：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

总结

本章我们学习了：

Foundation 的多种安装方式
基本模板结构
重要的 meta 标签
如何初始化 Foundation
创建第一个响应式布局

下一章，我们将学习 Foundation 文本样式。

练习：尝试修改上面的示例，创建一个四栏布局，并观察在不同屏幕尺寸下的表现。

#Foundation 起步

#安装 Foundation

#方法一：使用 CDN（推荐新手使用）

#方法二：下载文件

#方法三：使用 npm

#方法四：使用 Foundation CLI

#基本模板

#重要的 meta 标签

#viewport 标签

#no-js 类

#初始化 Foundation

#第一个示例：响应式布局

#Foundation 目录结构

#浏览器支持

#常见问题

#1. JavaScript 组件不工作？

#2. 样式不生效？

#3. 响应式不工作？

#总结