Foundation 教程

2022-05-27 14:39 更新
foundation-starter@128


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

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

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



在線實例

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

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

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 標簽中的演示,可以點擊"嘗試一下"查看在線實例:

按鈕



嘗試一下 ?


表格:



嘗試一下 ?


圖片彈窗:



嘗試一下 ?


警告:



嘗試一下 ?



網(wǎng)格:



嘗試一下 ?


進度條:



嘗試一下 ?


面板:



嘗試一下 ?


下拉菜單:



嘗試一下 ?


手風琴效果:



嘗試一下 ?


頂部導(dǎo)航:



嘗試一下 ?


模態(tài)框:



嘗試一下 ?


開關(guān):



嘗試一下 ?


滑塊:



嘗試一下 ?



以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號