开始学习教程

通过基础开始创建令人惊叹的网站。我们希望您能尽早上手并运行，以便构建出色的内容！查看以下资源，以了解基础的里里外外。

如果您想要由核心团队构建基础的直接指导，ZURB 团队每个月都会提供互动网络研讨会课程。这些网络研讨会将帮助您的开发技能领先于其他技能，让您全面了解网格、导航、表单、按钮、标注、基础 JavaScript 等等。

了解更多

特选视频教程

通过这些出色的视频教程学习基础。我们提供有关 CSS、Sass、原型设计、JavaScript、导航、布局等的视频基础。

image clip of video
F6、Flexbox、Sass、布局

理解 Flexbox 基础凯文·鲍尔
image clip of video
F6、JavaScript、Flexbox

使用 Flexbox 帮助器类充分利用 Flexbox拉菲·本夸尔
image clip of video
F6、Webpack、JavaScript、ZURB 堆栈

在 Foundation 6.4 中添加非现代 JavaScript 库凯文·鲍尔
image clip of video
F6、Webpack、JavaScript、ZURB 堆栈

Foundation 6.4 JavaScript 集成教程凯文·鲍尔
image clip of video
F6、Off-Canvas、组件、HTML、CSS

了解基础 Off-Canvas 组件的高级用法！凯文·鲍尔
image clip of video
F6、Dropdown、组件、HTML、CSS

了解基础 Dropdown 组件的高级用法！凯文·鲍尔
image clip of video
F6、Reveal Modal、组件、HTML、CSS

了解基础 Reveal Modal 组件的高级用法！凯文·鲍尔
image clip of video
F6、Toggler、动画、HTML、CSS

了解基础 Toggler 组件的高级用法！凯文·鲍尔
image clip of video
F6、Off-canvas、HTML、CSS

从 in-canvas 改为 Off-canvas凯文·鲍尔
image clip of video
F6、原型设计、HTML、CSS

原型设计实用帮助器凯文·鲍尔
image clip of video
F6、组件、Dropdown、HTML、CSS

显式定位凯文·鲍尔
image clip of video
F6、网格、布局、HTML、CSS

Foundation 6.4 XY 网格凯文·鲍尔
image clip of video
基础、CSS 网格、布局、HTML、CSS

了解 CSS 网格基础凯文·鲍尔
image clip of video
F6、Flexbox、组件、HTML、CSS

基础 Flexbox 卡片简介拉菲·本夸尔
image clip of video
F6、基础模块、HTML、CSS

如何使用基础基础模块凯文·鲍尔
image clip of video
F6、Offcanvas、组件、HTML、CSS

基础 Off-canvas：1 个 off-canvas，10 个可能性拉菲·本夸尔
image clip of video
电子邮件、电子邮件策略、工作流

内联您的电子邮件 CSS马特·凯利
image clip of video
电子邮件、电子邮件策略、工作流

内联您的电子邮件 CSS马特·凯利
image clip of video
电子邮件、电子邮件策略、工作流

发送电子邮件马特·凯利
image clip of video
电子邮件、电子邮件策略、工作流

响应式电邮编码简介马特·凯利
image clip of video
F6、优化、项目结构、ZURB 堆栈

ZURB 堆栈的作用 - 第 2 部分拉菲·本库阿勒
image clip of video
F6、优化、项目结构、ZURB 堆栈

ZURB 堆栈的作用 - 第 1 部分拉菲·本库阿勒
image clip of video
F6、优化、项目结构、ZURB 堆栈

使用 Panini 创建可重用布局拉菲·本库阿勒
image clip of video
F6、优化、项目结构、ZURB 堆栈

掌握 Panini 助手和数据拉菲·本库阿勒
image clip of video
F6、优化、项目结构、ZURB 堆栈

使用 Panini 变量和助手简化组件拉菲·本库阿勒
image clip of video
F6、Sass、项目结构、组织

优化 Foundation 6 Sass 和组织拉菲·本库阿勒
image clip of video
F6、Sass、项目结构、ZURB 堆栈

Foundation ZURB 堆栈和文件结构概述拉菲·本库阿勒
image clip of video
F6、Sass、安装、CLI

开始使用 Foundation 6拉菲·本库阿勒
image clip of video
F6、Sass、安装、CLI

在 Windows 系统上安装 Foundation 6 Sass詹姆斯·斯通
image clip of video
F6、网格、布局、HTML

Foundation 6 Block 网格原型团队成员蒂姆
image clip of video
F6、网格、布局、CSS

使用 Foundation 6 网格源代码排序和按钮进行原型设计团队成员蒂姆
image clip of video
F6、网格、布局、CSS

Foundation 6 网格和移动优先的基本知识团队成员乔恩
image clip of video
F6、项目结构、安装、下载

Foundation 6 的新功能以及入门方法团队成员乔恩
image clip of video
F6、网格、布局、HTML

Foundation 网格简介詹姆斯·斯通
image clip of video
F6、网格、布局、设计模式

Foundation 网格模式在实践中詹姆斯·斯通
image clip of video
F6、Ruby、Rails、安装

从 Foundation 5 升级到 Foundation 6 Rails Gem詹姆斯·斯通
image clip of video
F6、工作流程、优化、Gulp

使用 ZURB 堆栈实现低于承诺高于交付ZURB 的杰夫·金博尔
image clip of video
F6、下载、CSS

开始使用 Foundation 6加里·詹宁斯
image clip of video
F6、CSS、安装、项目结构

设置 Foundation 6 项目加里·詹宁斯
image clip of video
F6、导航、CSS、HTML

设置桌面导航加里·詹宁斯
image clip of video
F6、CSS、HTML、布局

使用 Foundation 6 构建英雄版块加里·詹宁斯
image clip of video
F6、CSS、HTML、布局

使布局和间距正确加里·詹宁斯
image clip of video
F6、网格、HTML、布局

使用 Foundation 6 创建响应式布局加里·詹宁斯
image clip of video
F6、CSS、网格、布局

使用 Foundation 6 构建响应式页脚加里·詹宁斯
image clip of video
F6、CSS、导航

细化桌面导航样式 - 第 1 部分加里·詹宁斯
image clip of video
F6、CSS、导航

细化桌面导航样式 - 第 2 部分加里·詹宁斯
image clip of video
F6、CSS、网格、布局

使英雄版块和页脚完美无缺加里·詹宁斯
image clip of video
F6、CSS、导航、JavaScript

使用离画布式编码移动导航模式加里·詹宁斯
image clip of video
F6、CSS、导航、JavaScript

细化移动导航模式加里·詹宁斯
image clip of video
电邮、Sass、安装、CLI

开始使用针对电邮的 Foundation戴夫·霍兰
image clip of video
电邮、HTML、ZURB 堆栈

使用布局、页面、局部优化电邮戴夫·霍兰
image clip of video
电邮、布局、HTML

处理响应式电邮中的图片戴夫·霍兰
image clip of video
Gulp、工作流程、ZURB 堆栈

使用 ZURB 堆栈部署 Foundation 网站ZURB

特色书面教程

我们收集了一些优秀的书面教程来帮助你充分利用 Foundation。

Foundation 课程

我们每周都会发布有关 Foundation 和设计知识的有用课程。这是一个学习新知识的好地方！

image clip of video
Sass、性能、ZURB 堆栈

针对速度优化 FoundationZURB
image clip of video
导航、JavaScript、HTML

为 Sites 6 构建粘性导航ZURB
image clip of video
JavaScript、AJAX、jQuery

动态更新您的网页ZURB

查看课程 →