Foundation 5 教程

Foundation 5

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

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

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


在線實例

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 標簽中的演示,可以點擊"運行結果"查看在線實例:

按鈕

運行結果


表格:

運行結果


圖片彈窗:

運行結果


警告:

運行結果



網格:

運行結果


進度條:

運行結果


面板:

運行結果


下拉菜單:

運行結果


手風琴效果:

運行結果


頂部導航:

運行結果


模態框:

運行結果


開關:

運行結果


滑塊:

運行結果