Foundation 基礎(chǔ)
Foundation 教程
Foundation 安裝
Foundation 按鈕
Foundation 按鈕組
Foundation 標(biāo)簽
Foundation 表單
Foundation 表格
Foundation 側(cè)邊欄
Foundation 頂部導(dǎo)航欄
Foundation 分頁
Foundation 滑動(dòng)導(dǎo)航
Foundation 滑塊
Foundation 價(jià)格表
Foundation 進(jìn)度條
Foundation 均衡器(Equalizer)
Foundation 開關(guān)
Foundation 列表
Foundation 麥哲倫（Magellan）導(dǎo)航
Foundation Joyride
Foundation 面板
Foundation 模態(tài)框
Foundation 輸入框 尺寸
Foundation 提示框
Foundation 提醒框
Foundation 圖標(biāo)
Foundation 圖片
Foundation 文本
Foundation 下拉菜單
Foundation 選項(xiàng)卡
Foundation 折疊列表
Foundation 手冊(cè)
Foundation CSS 參考手冊(cè)
Foundation CSS 可見性
Foundation 圖標(biāo)參考手冊(cè)
Foundation 網(wǎng)格
Foundation 塊狀網(wǎng)格
Foundation 網(wǎng)格 - 大型設(shè)備
Foundation 網(wǎng)格 - 水平堆疊
Foundation 網(wǎng)格 - 小型設(shè)備
Foundation 網(wǎng)格 - 中型設(shè)備
Foundation 網(wǎng)格實(shí)例
Foundation 網(wǎng)格系統(tǒng)
?
This document uses PHP Chinese website manual Release
characters
Foundation 輸入框尺寸
使用網(wǎng)格的列來設(shè)置輸入框的大小，如 .large-6, .medium-6, 等。
實(shí)例
<form> ??<div?class="row"> ????<div?class="large-10?medium-7?columns"> ??????<label>large-10?medium-7?(100%?on?small) ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ??</div> ??<div?class="row"> ????<div?class="small-5?columns"> ??????<label>small-5 ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ??</div> ??<div?class="row"> ????<div?class="medium-3?columns"> ??????<label>medium-3?(100%?on?small) ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ??</div> </form>實(shí)例預(yù)覽 ?
相等大小列
以下演示了相等大小列的實(shí)例:
實(shí)例
<form> ??<div?class="row"> ????<div?class="medium-4?columns"> ??????<label>medium-4?(100%?on?small,?stacked) ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ????<div?class="medium-4?columns"> ??????<label>medium-4?(100%?on?small,?stacked) ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ????<div?class="medium-4?columns"> ??????<label>medium-4?(100%?on?small,?stacked) ????????<input?type="text"?placeholder="Name"> ??????</label> ????</div> ??</div> </form>實(shí)例預(yù)覽 ?
內(nèi)聯(lián)標(biāo)簽
如果你希望你的標(biāo)簽內(nèi)容顯示在左邊（不是上邊），可以將標(biāo)簽元素 label 放在輸入框左邊的不同的列上，并使用 .inline 類來設(shè)置垂直居中:
實(shí)例
<form> ??<div?class="row"> ????<div?class="small-8"> ??????<div?class="row"> ????????<div?class="small-3?columns"> ??????????<label?for="name"?class="inline?right">Name</label> ????????</div> ????????<div?class="small-9?columns"> ??????????<input?type="text"?id="name"?placeholder="First?Name.."> ????????</div> ??????</div> ????</div> ??</div> </form>實(shí)例預(yù)覽 ?
前置和后置標(biāo)簽
你可以在 <div class="row collapse"> 中添加前置和后置標(biāo)簽，元素為： <element class="postfix"> 或 <element class="prefix">?？梢允褂镁W(wǎng)格系統(tǒng)來設(shè)置前置和后置標(biāo)簽的大?。?/p>
實(shí)例
<form> ??<div?class="row"> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?prefix-radius"> ????????<div?class="small-3?columns"> ??????????<span?class="prefix">Prefix</span> ????????</div> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ??????</div> ????</div> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?postfix-radius"> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ????????<div?class="small-3?columns"> ??????????<span?class="postfix">Postfix</span> ????????</div> ??????</div> ????</div> ??</div> </form>實(shí)例預(yù)覽 ?
前置和后置標(biāo)簽按鈕
可以使用 <a> 元素添加 .button 類來設(shè)置前置和后置按鈕:
實(shí)例
<a?href="#"?class="postfix?button">Go</a>實(shí)例預(yù)覽 ?
前置和后置標(biāo)簽圓角按鈕
實(shí)例
?<form> ??<div?class="row"> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?prefix-radius"> ????????<div?class="small-3?columns"> ??????????<span?class="prefix">Prefix</span> ????????</div> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ??????</div> ????</div> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?postfix-radius"> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ????????<div?class="small-3?columns"> ??????????<span?class="postfix">Postfix</span> ????????</div> ??????</div> ????</div> ??</div> ??<div?class="row"> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?prefix-round"> ????????<div?class="small-3?columns"> ??????????<a?href="#"?class="button?prefix">Go</a> ????????</div> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ??????</div> ????</div> ????<div?class="large-6?columns"> ??????<div?class="row?collapse?postfix-round"> ????????<div?class="small-9?columns"> ??????????<input?type="text"?placeholder="Value"> ????????</div> ????????<div?class="small-3?columns"> ??????????<a?href="#"?class="button?postfix">Go</a> ????????</div> ??????</div> ????</div> ??</div> </form>實(shí)例預(yù)覽 ?
關(guān)于我們 聯(lián)系我們 留言板
手冊(cè)網(wǎng)