介绍和安装 - Foundation教程

一、什么是 Foundation？

Foundation 是一个免费、开源的前端框架，用于快速开发响应式、移动优先的 Web 应用。

Foundation 的特点

基于 HTML / CSS / JavaScript
移动优先设计理念
响应式网页（根据不同设备自动适配）
提供丰富的 UI 组件：表单、按钮、Tabs、导航、弹窗等
包含大量设计模板和 JavaScript 插件
适合初学者和专业开发者

如果你学过 Bootstrap，会发现 Foundation 与 Bootstrap 非常相似，很多设计模式（如栅格系统、组件结构）几乎如出一辙。

Foundation 被谁在使用？

Foundation 已被以下企业/产品广泛使用：

Facebook
eBay
Samsung
Amazon
Disney

二、Foundation 版本说明

当前示例使用的是 Foundation 5.5.3
官方最新版本为 Foundation 6.x（如 6.5.1）
本文以 Foundation 5 为例进行演示

三、Foundation 下载地址

官方下载页面

https://foundation.zurb.com/sites/download

Foundation 5.5.3 直链下载

https://foundation.zurb.com/downloads/foundation-5.5.3.zip

四、Foundation 最基本安装示例

下面是一个最基础的 Foundation 5 页面示例，可直接运行。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Foundation最基本的安装</title>
    <meta charset="utf-8" />
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--下面按顺序引入-->
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        //一些 Foundation组件是基于 jQuery 开发的，如：模态框、下拉菜单等。
        //官方要求使用以下脚本来初始化组件
        $(document).ready(function() {
            $(document).foundation();
        })
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>Code language: HTML, XML (xml)

五、完整示例（含导航、面板、栅格）

下面是一个更接近真实项目的 Foundation 示例页面。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation最基本的安装</title>
    <meta charset="utf-8" />
    <!--移动优先-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--下面按顺序引入-->
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        //一些 Foundation组件是基于 jQuery 开发的，如：模态框、下拉菜单等。
        //官方要求使用以下脚本来初始化组件
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
</head>
<body>

    <!-- 顶部导航 -->
    <div class="row">
        <div class="medium-12 columns">
            <nav class="top-bar" data-topbar>
                <ul class="title-area">
                    <li class="name">
                        <h1><a href="#">个人主页</a></h1>
                    </li>
                    <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
                </ul>

                <section class="top-bar-section">
                    <ul class="left">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">相册</a></li>
                        <li><a href="#">文章</a></li>
                        <li><a href="#">视频</a></li>
                    </ul>
                </section>
            </nav>
        </div>
    </div>

    <!-- 欢迎面板 -->
    <div class="row">
        <div class="medium-12 columns">
            <div class="panel">
                <h1>欢迎光临</h1>
                <p>记录小心情的地方</p>
                <button type="button" class="button small">注册</button>
            </div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="row">

        <div class="medium-9 columns">
            <p>
                火星（Mars）是太阳系八大行星之一，是太阳系由内往外数的第四颗行星，属于类地行星，
                直径约为地球的53%，质量为地球的11%。自转轴倾角、自转周期均与地球相近，
                公转一周约为地球公转时间的两倍。橘红色外表是地表的赤铁矿（氧化铁）。
                我国古书上将火星称为“荧惑星”，西方古代（古罗马）称为“战神玛尔斯星”。
                火星基本上是沙漠行星，地表沙丘、砾石遍布且没有稳定的液态水体。
                二氧化碳为主的大气既稀薄又寒冷，沙尘悬浮其中，每年常有尘暴发生。
                火星两极皆有水冰与干冰组成的极冠会随着季节消长。
            </p>
        </div>

        <div class="medium-3 columns" style="border:1px solid #f1f1f1">
            <ul class="side-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Learn HTML</a></li>
                <li><a href="#">Learn JavaScript</a></li>
                <li><a href="#">Learn CSS</a></li>
                <li><a href="#">Learn Foundation</a></li>
                <li><a href="#">Learn HTML</a></li>
                <li><a href="#">Learn JavaScript</a></li>
                <li><a href="#">Learn CSS</a></li>
                <li><a href="#">Learn Foundation</a></li>
            </ul>
        </div>

    </div>

</body>
</html>Code language: HTML, XML (xml)

六、使用包管理器安装 Foundation

如果你使用现代前端工作流，也可以通过包管理器安装 Foundation。

官方文档：

https://foundation.zurb.com/sites/docs/installation.html

npm

npm install foundation-sites

PNPM

pnpm install foundation-sites

Yarn

yarn add foundation-sites

Bower

bower install foundation-sites

Ruby Gems

gem install foundation-rails

Meteor

meteor add zurb:foundation-sitesCode language: CSS (css)

Composer

php composer.phar require zurb/foundationCode language: JavaScript (javascript)

NuGet

Install-Package foundation-sites

七、使用 Foundation CLI（脚手架）

适合需要完整构建流程的项目：

npm install --global foundation-cliCode language: PHP (php)

Next: 文字相关