建站
咨詢
售后
建站咨詢
新聞中心
Foundation 輸入框尺寸
使用網(wǎng)格的列來設置輸入框的大小，如 .large-6, .medium-6, 等。
目前創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設、域名、網(wǎng)站空間、網(wǎng)站托管、服務器租用、企業(yè)網(wǎng)站設計、興和網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。
更多網(wǎng)格系統(tǒng)知識，可以點擊 網(wǎng)格系統(tǒng) 教程。
實例
<
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
>
嘗試一下 ?
相等大小列
以下演示了相等大小列的實例:
實例
<
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
>
嘗試一下 ?
內聯(lián)標簽
如果你希望你的標簽內容顯示在左邊（不是上邊），可以將標簽元素 label 放在輸入框左邊的不同的列上，并使用 .inline 類來設置垂直居中:
實例
<
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
>
嘗試一下 ?
前置和后置標簽
你可以在 < 可以使用 < <<element class="postfix"> 或 <element class="prefix">。可以使用網(wǎng)格系統(tǒng)來設置前置和后置標簽的大?。?/p>
實例
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
>
嘗試一下 ?前置和后置標簽按鈕
元素添加 .button 類來設置前置和后置按鈕:實例
a
href=
"#"
class=
"postfix button"
>Go
<
/a
>
嘗試一下 ?前置和后置標簽圓角按鈕
實例
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
>
嘗試一下 ?
本文題目：創(chuàng)新互聯(lián)Foundation教程：Foundation輸入框尺寸
文章URL：http://m.fisionsoft.com.cn/article/dpggcej.html
