Foundation5 教學

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

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

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


線上實例

IT研修包含了上百個 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>IT研修</h3> <p>鍵盤之下,連接的是無限可能!!!</p> </div> <div class="medium-4 columns"> <h3>IT研修</h3> <p>鍵盤之下,連接的是無限可能!!!</p> </div> <div class="medium-4 columns"> <h3>IT研修</h3> <p>鍵盤之下,連接的是無限可能!!!</p> </div> </div>

點擊"嘗試一下"按鈕查看線上實例。


Foundation 特性

以下效果為在 iframe 標籤中的演示,可以點擊"嘗試一下"查看線上實例:

按鈕


表格:


圖片彈窗:


警告:



網格:


進度條:


面板:


下拉菜單:


手風琴效果:


頂部導航:


模態框:


開關:


滑塊: