Foundation 输入框尺寸
使用网格的列来设置输入框的大小,如 .large-6, .medium-6, 等。

目前创新互联已为上1000+的企业提供了网站建设、域名、网站空间、网站托管、服务器租用、企业网站设计、兴和网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
更多网格系统知识,可以点击 网格系统 教程。
实例
<
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
>
尝试一下 »
内联标签
如果你希望你的标签内容显示在左边(不是上边),可以将标签元素 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">。可以使用网格系统来设置前置和后置标签的大小:
实例
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
>
尝试一下 »
分享文章:创新互联Foundation教程:Foundation输入框尺寸
URL分享:http://www.jxjierui.cn/article/dpggcej.html


咨询
建站咨询
