Foundation CSS 参考手册学习笔记

概述

Foundation 是一个响应式前端框架，它提供了一系列的 CSS 和 JavaScript 工具，帮助我们构建美观、响应式和易于维护的网站。

栅格系统

Foundation 的栅格系统是其最强大的功能之一，它允许我们通过排列列来创建网站布局。默认情况下，每一行被分为 12 列，我们可以选择在每一列中放置元素。

基本用法

htmlCopy Code
<div class="row">
  <div class="column">1/1</div>
</div>

<div class="row">
  <div class="column small-6">1/2</div>
  <div class="column small-6">1/2</div>
</div>

<div class="row">
  <div class="column medium-4">1/3</div>
  <div class="column medium-4">1/3</div>
  <div class="column medium-4">1/3</div>
</div>

在上面的示例中，第一个 row 包含一列，这个列将横跨整个行。第二个 row 包含两个列，每个列都占据行宽的一半。最后一个 row 包含三个列，每个列占用了屏幕宽度的 1/3。

响应式栅格系统

Foundation 的栅格系统是响应式的，这意味着列的宽度可以根据屏幕大小而变化。在列上添加类名，可以让它们在不同的屏幕宽度下有不同的宽度。

htmlCopy Code
<div class="row">
  <div class="column small-12 medium-6 large-4">1/1</div>
  <div class="column small-12 medium-6 large-4">1/1</div>
  <div class="column small-12 medium-6 large-4">1/1</div>
</div>

在这个示例中，对于小屏幕，每列占据整行，对于中等屏幕，每列占据行宽的 1/2，而对于大屏幕，每列则只占据屏幕宽度的 1/3。

样式

Foundation 提供了一系列的预定义 CSS 类和 mixin，可以简化样式的编写。

颜色

Foundation 内置了一些颜色，可以通过以下类名来指定：

.primary: 主色调
.secondary: 次要色调
.success: 成功颜色
.alert: 警告颜色
.warning: 危险颜色

动画效果

Foundation 提供了多种动画效果，可以用于 hover 状态或其他交互。它们可以通过以下类名来使用：

.fade-in
.fade-out
.slide-in
.slide-out

按钮

Foundation 的按钮是经过设计的，有多种样式，可以通过添加以下类名来使用：

.button
.success button
.alert button
.warning button

插件

Foundation 还提供了许多插件，这些插件可以方便地实现常见的交互功能，例如轮播图、模态框等。下面是一个实现轮播图的示例。

htmlCopy Code
<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>

    <li class="is-active orbit-slide">
      <img src="https://placehold.it/2000x750&text=One">
    </li>
    <li class="orbit-slide">
      <img src="https://placehold.it/2000x750&text=Two">
    </li>
    <li class="orbit-slide">
      <img src="https://placehold.it/2000x750&text=Three">
    </li>
  </ul>
</div>

<script>
  $(document).foundation();
</script>

在上面的示例中，包含一个 orbit 容器，其中包含多个 orbit-slide (轮播)。通过调用 $(document).foundation() 来初始化 Foundation 插件。

以上是 Foundation CSS 的一些常用功能，希望对你有所帮助。