Foundation5 教學

Foundation 用於開發響應式的 HTML, CSS and JavaScript 框架。

Foundation 是一個易用、強大而且靈活的框架,用於構建基於任何裝置上的 Web 應用。

Foundation 是一個以行動優先的流行框架。


線上範例

線上程式語言教學練習包含了上百個 Foundation 範例。

你可以直接使用我們的線上編輯器,並點選"提交執行"按鈕檢視結果:

Foundation 範例

<div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 頁面</h1> <p>重置視窗大小,檢視效果!</p> <button type="button" class="button small">我是按鈕!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>線上程式語言教學練習</h3> <p>學的不僅是科技,更是夢想!!!</p> </div> <div class="medium-4 columns"> <h3>線上程式語言教學練習</h3> <p>學的不僅是科技,更是夢想!!!</p> </div> <div class="medium-4 columns"> <h3>線上程式語言教學練習</h3> <p>學的不僅是科技,更是夢想!!!</p> </div> </div>

線上執行 ?

點選"線上執行"按鈕檢視線上範例。


Foundation 屬性

以下效果為在 iframe 標籤中的演示,可以點選"線上執行"檢視線上範例:

按鈕

線上執行 ?


表格:

線上執行 ?


圖片彈窗:

線上執行 ?


警告:

線上執行 ?



網格:

線上執行 ?


進度條:

線上執行 ?


面板:

線上執行 ?


下拉式選單:

線上執行 ?


手風琴效果:

線上執行 ?


頂部導覽:

線上執行 ?


模態框:

線上執行 ?


開關:

線上執行 ?


滑塊:

線上執行 ?