Foundation 起步

Foundation起步

什么是Foundation

Foundation是一个响应式的前端框架，可以轻松地构建现代化的Web应用程序和网站。它提供了许多的CSS和JavaScript组件，可以帮助开发人员快速地构建出具有强大功能的Web页面。

Foundation采用了模块化的设计理念，可以将需要的组件直接引用，减少了代码量。并且，它的语法简洁明了，易于上手。Foundation的目标是提供一种简单的方法来创建灵活的，可维护的前端代码。

安装Foundation

直接使用CDN

Foundation提供了CDN服务，可以很方便地在HTML页面中引用。这样可以直接在浏览器中加载相关资源并使用。只需要在HTML页面中引用以下CSS和JavaScript即可：

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

下载Foundation

你也可以在官网上下载Foundation压缩包，然后将其解压缩到本地。解压后会得到css和js两个文件夹，里面分别包含了Foundation的所有CSS和JavaScript文件。只需要在HTML页面中引用以下文件即可：

<link rel="stylesheet" href="path/to/foundation.min.css">
<script src="path/to/foundation.min.js"></script>

使用npm安装

如果你使用npm来管理项目依赖，可以通过以下命令来安装Foundation：

npm install foundation-sites

安装完毕后，在HTML页面中引用相关文件即可：

<link rel="stylesheet" href="/node_modules/foundation-sites/dist/css/foundation.min.css">
<script src="/node_modules/foundation-sites/dist/js/foundation.min.js"></script>

快速上手

创建基本的网页布局

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>

<div class="grid-container">
    <div class="grid-x grid-padding-x">
        <div class="large-12 cell">
            <h1>Welcome to Foundation</h1>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
</body>
</html>

这个例子展示了如何在网页中使用Foundation来创建一个基本的网页布局。其中包括了一个响应式的网格系统，可以很方便地进行自适应布局。

添加复杂的组件

Foundation提供了许多可定制的组件，可以轻松地和其他组件嵌套使用。一个简单的例子是导航栏（top-bar）：

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.css">
</head>
<body>

<div class="top-bar">
    <div class="top-bar-title">
        <div class="menu-icon hide-for-large"><span></span></div>
        <a href="#">My Site</a>
    </div>

    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
            <li class="has-submenu">
                <a href="#">One</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li class="has-submenu">
                <a href="#">Two</a>
                <ul class="submenu menu vertical" data-submenu>
                    <li><a href="#">One</a></li>
                    <li><a href="#">Two</a></li>
                    <li><a href="#">Three</a></li>
                </ul>
            </li>
            <li><a href="#">Three</a></li>
            <li><a href="#">Four</a></li>
        </ul>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>
</body>
</html>

这个例子展示了如何创建一个复杂的组件——导航栏。你可以通过类似的方式，来创建其他组件，比如警告框（alert）、模态框（modal）、卡片（card）等等。

结论

Foundation是一个非常强大的前端框架，它提供了许多组件和工具，可以帮助开发人员快速地构建出高质量的Web应用程序。上述内容只是Foundation的冰山一角，如果你想学习更多的内容，可以参考官方文档。

Foundation 表格 Foundation 进度条