垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 起步 ​

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

安装 Foundation ​

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

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

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

html
<!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 官网下载文件包：

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

目录结构示例：

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

方法三：使用 npm ​

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

bash
npm install foundation-sites

方法四：使用 Foundation CLI ​

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

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

# 创建新项目
foundation new

基本模板 ​

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

html
<!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 标签 ​

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

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

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

no-js 类 ​

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

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

初始化 Foundation ​

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

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

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

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

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

html
<!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最新两个版本
IE11+
iOS Safari最新两个版本
Android最新两个版本

常见问题 ​

1. JavaScript 组件不工作？ ​

确保：

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

2. 样式不生效？ ​

检查：

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

3. 响应式不工作？ ​

确保添加了 viewport meta 标签：

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

总结 ​

本章我们学习了：

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

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

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