Foundation 起步学习笔记

1. 什么是 Foundation？

Foundation 是一款优秀的前端框架，它包含了多个组件和工具，可以帮助我们快速构建现代化、响应式的网站和应用。它由 Zurb 公司开发并维护。

2. 安装 Foundation

使用 npm 安装

要安装 Foundation，首先需要确保你已经安装了 Node.js 环境。然后，可以使用以下命令来安装 Foundation：

bashCopy Code
npm install foundation-sites

使用 CDN 引入

如果你不想通过 npm 安装 Foundation，还可以通过 CDN 引入。在 HTML 文件中添加以下代码即可：

htmlCopy Code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites/dist/css/foundation.min.css">
<script src="https://cdn.jsdelivr.net/npm/foundation-sites/dist/js/foundation.min.js"></script>

3. 使用 Foundation

使用 Foundation 构建网站非常方便，这里介绍两个基本的实例。

实例1：创建一个基本的网格布局

htmlCopy Code
<div class="grid-x grid-margin-x">
  <div class="cell small-6 medium-4 large-3">
    <!-- 第一个格子 -->
  </div>
  <div class="cell small-6 medium-4 large-3">
    <!-- 第二个格子 -->
  </div>
  <div class="cell small-6 medium-4 large-3">
    <!-- 第三个格子 -->
  </div>
  <div class="cell small-6 medium-4 large-3">
    <!-- 第四个格子 -->
  </div>
</div>

上面的代码中，我们使用 grid-x 类来定义一个网格容器，并在其中添加了四个格子，每个格子都使用了 cell 类。同时，使用 small-6 medium-4 large-3 这种格式来定义不同屏幕尺寸下每个格子占据的宽度。

实例2：创建一个基本的导航栏

htmlCopy Code
<nav class="top-bar" data-topbar role="navigation">
  <ul class="title-area">
    <li class="name">
      <h1><a href="#">网站名称</a></h1>
    </li>
    <li class="toggle-topbar menu-icon"><a href="#"><span>菜单</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="right">
      <li><a href="#">链接 1</a></li>
      <li><a href="#">链接 2</a></li>
      <li><a href="#">链接 3</a></li>
    </ul>
  </section>
</nav>

上面的代码中，我们定义了一个 top-bar 导航栏，并包含了三个链接。在小屏幕设备上会自动收起导航栏，并显示一个菜单按钮，点击后可以展开链接。

结语

以上是 Foundation 的起步学习笔记，希望对你有所帮助。在实际开发中，可以结合官方文档和示例代码进行学习和实践。