使用教學入門

使用 Foundation 開始建立令人驚豔的網站。我們希望您能盡快上手，以便建立偉大的事物！查看以下資源，以了解 Foundation 的裡裡外外。

如果您希望由建立 Foundation 的核心團隊直接指導，ZURB 團隊會每月提供互動式網路研討會課程。這些網路研討會將讓您的開發技能領先群倫，讓您全面了解網格、導覽、表單、按鈕、提示、Foundation JavaScript 等等。

了解更多

精選影片教學

透過這些很棒的影片教學，學習基礎。我們有關於 CSS、Sass、原型設計、JavaScript、導覽、版面配置等基礎影片。

image clip of video
F6、彈性盒狀模型、Sass、版面配置

了解彈性盒狀模型的基礎凱文·鮑爾
image clip of video
F6、JavaScript、彈性盒狀模型

使用彈性盒狀模型輔助類別，充分利用彈性盒狀模型拉菲·班夸爾
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、側邊欄、元件、HTML、CSS

學習 Foundation 的側邊欄元件的高階用法！凱文·鮑爾
image clip of video
F6、下拉式選單、元件、HTML、CSS

學習 Foundation 的下拉式選單元件的高階用法！凱文·鮑爾
image clip of video
F6、揭露模式、元件、HTML、CSS

學習 Foundation 的揭露模式元件的高階用法！凱文·鮑爾
image clip of video
F6、切換器、動畫、HTML、CSS

學習 Foundation 的切換器元件的高階用法！凱文·鮑爾
image clip of video
F6、側邊欄、HTML、CSS

從畫布內到畫布外凱文·鮑爾
image clip of video
F6、原型設計、HTML、CSS

原型設計實用程式輔助工具凱文·鮑爾
image clip of video
F6、元件、下拉式選單、HTML、CSS

明確定位凱文·鮑爾
image clip of video
F6、格線、版面配置、HTML、CSS

Foundation 6.4 XY 格線凱文·鮑爾
image clip of video
Foundation、CSS 格線、版面配置、HTML、CSS

學習 CSS 格線的基礎凱文·鮑爾
image clip of video
F6、彈性盒狀模型、元件、HTML、CSS

Foundation 的彈性盒狀模型卡片簡介拉菲·班夸爾
image clip of video
F6、建構區塊、HTML、CSS

如何使用 Foundation 建構區塊凱文·鮑爾
image clip of video
F6、側邊欄、元件、HTML、CSS

Foundation 的側邊欄：1 個側邊欄，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 堆疊和檔案結構概觀Rafi Benkual
image clip of video
F6、Sass、安裝、CLI

入門 Foundation 6Rafi Benkual
image clip of video
F6、Sass、安裝、CLI

在 Windows 上安裝 Foundation 6 SassJames Stone
image clip of video
F6、格線、版面、HTML

Foundation 6 區塊格線原型Tim - Foundation 團隊
image clip of video
F6、格線、版面、CSS

使用 Foundation 6 格線來源順序和按鈕進行原型製作Tim - Foundation 團隊
image clip of video
F6、格線、版面、CSS

Foundation 6 格線和行動優先的基礎Jon - Foundation 團隊
image clip of video
F6、專案結構、安裝、下載

Foundation 6 的新功能和入門方法Jon - Foundation 團隊
image clip of video
F6、格線、版面、HTML

Foundation 格線簡介James Stone
image clip of video
F6、格線、版面、設計模式

Foundation 格線模式在實際應用中的範例James Stone
image clip of video
F6、Ruby、Rails、安裝

從 Foundation 5 升級到 Foundation 6 Rails 寶石James Stone
image clip of video
F6、工作流程、最佳化、Gulp

使用 ZURB 堆疊承諾不足、表現超群Geoff Kimball | ZURB
image clip of video
F6、下載、CSS

入門 Foundation 6Gary Jennings
image clip of video
F6、CSS、安裝、專案結構

設定 Foundation 6 專案Gary Jennings
image clip of video
F6、導覽、CSS、HTML

設定桌面導覽Gary Jennings
image clip of video
F6、CSS、HTML、版面

使用 Foundation 6 建立英雄區段Gary Jennings
image clip of video
F6、CSS、HTML、版面

讓版面和間距恰到好處Gary Jennings
image clip of video
F6、格線、HTML、版面

使用 Foundation 6 建立回應式版面Gary Jennings
image clip of video
F6、CSS、格線、版面

使用 Foundation 6 建立回應式頁尾Gary Jennings
image clip of video
F6、CSS、導覽

調整桌面導覽樣式 - 第 1 部分Gary Jennings
image clip of video
F6、CSS、導覽

調整桌面導覽樣式 - 第 2 部分Gary Jennings
image clip of video
F6、CSS、格線、版面

讓英雄區段和頁尾恰到好處Gary Jennings
image clip of video
F6、CSS、導覽、JavaScript

使用 Off-Canvas 編碼行動裝置導覽模式Gary Jennings
image clip of video
F6、CSS、導覽、JavaScript

改善您的行動裝置導覽模式Gary Jennings
image clip of video
電子郵件、Sass、安裝、CLI

開始使用 Foundation for EmailsDave Horan
image clip of video
電子郵件、HTML、ZURB Stack

使用版面、頁面、部分最佳化您的電子郵件Dave Horan
image clip of video
電子郵件、版面、HTML

處理回應式電子郵件中的圖片Dave Horan
image clip of video
Gulp、工作流程、ZURB Stack

使用 ZURB Stack 部署您的 Foundation 網站ZURB

精選書面教學

我們在此收集了一些很棒的書面教學，以協助您充分利用 Foundation。

Foundation 課程

我們每週都會針對 Foundation 和設計知識發布實用的課程。這是學習新知的好地方！

image clip of video
Sass、效能、ZURB Stack

最佳化 Foundation 以提升速度ZURB
image clip of video
導覽、JavaScript、HTML

使用 Foundation for Sites 6 建立固定導覽ZURB
image clip of video
JavaScript、AJAX、jQuery

動態更新您的網頁ZURB

查看課程 →