免費(fèi)AI編程助手
Foundation 5 教程
Foundation 用于開發(fā)響應(yīng)式的 HTML, CSS and JavaScript 框架。
Foundation 是一個(gè)易用、強(qiáng)大而且靈活的框架,用于構(gòu)建基于任何設(shè)備上的 Web 應(yīng)用。
Foundation 是一個(gè)以移動(dòng)優(yōu)先的流行框架。
在線實(shí)例
W3Cschool教程包含了上百個(gè) 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>
<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í)例：
更多建議：