创新互联Foundation教程:Foundation输入框尺寸

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输入框尺寸
链接分享:http://www.shufengxianlan.com/qtweb/news23/63673.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联