Latest web development tutorials

Foundation 教程

Foundation 5

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

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

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


在線實例

本教程包含了上百個Foundation 實例。

你可以直接使用我們的在線編輯器,並點擊"提交運行"按鈕查看結果:

Foundation 實例

< div class= "row" >
< div class= "medium-12 columns" >
< div class= "panel" >
< h1 > Foundation Page < /h1 >
< p > Resize this responsive page to see the effect! < /p >
< button type= "button" class= "button small" > I Like It! < /button >
< /div >
< /div >
< /div >

< div class= "row" >
< div class= "medium-4 columns" >
< h3 > Column 1 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 2 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< div class= "medium-4 columns" >
< h3 > Column 3 < /h3 >
< p > Lorem ipsum.. < /p >
< /div >
< /div >

嘗試一下»

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


Foundation 特性

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

按鈕

嘗試一下»


表格:

嘗試一下»


圖片彈窗:

嘗試一下»


警告:

嘗試一下»



網格:

嘗試一下»


進度條:

嘗試一下»


面板:

嘗試一下»


下拉菜單:

嘗試一下»


手風琴效果:

嘗試一下»


頂部導航:

嘗試一下»


模態框:

嘗試一下»


開關:

嘗試一下»


滑塊:

嘗試一下»