Foundation5 教程

閱讀(325.3k) 收藏贊(210)

手冊簡介

Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。 Foundation 是一個易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。 Foundation 是一個以移動優(yōu)先的流行框架。

手冊說明

Foundation 5 教程

Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。

Foundation 是一個易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。

Foundation 是一個以移動優(yōu)先的流行框架。

在線實(shí)例

本教程包含了上百個 Foundation 實(shí)例。

你可以直接使用我們的在線編輯器，并點(diǎn)擊"提交運(yùn)行"按鈕查看結(jié)果：

Foundation 實(shí)例

<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>

嘗試一下 ?

點(diǎn)擊"嘗試一下"按鈕查看在線實(shí)例。

Foundation 特性

以下效果為在 iframe 標(biāo)簽中的演示，可以點(diǎn)擊"嘗試一下"查看在線實(shí)例：

Foundation5 教程

手冊簡介

手冊說明

Foundation 5 教程

在線實(shí)例

Foundation 實(shí)例

Foundation 特性

按鈕

表格:

圖片彈窗:

警告:

網(wǎng)格:

進(jìn)度條:

面板:

下拉菜單:

手風(fēng)琴效果:

頂部導(dǎo)航:

模態(tài)框:

開關(guān):

滑塊:

更新記錄

多端閱讀

擴(kuò)展欄目

開發(fā)工具IDE

編程訓(xùn)練營

Wiki列表