Foundation 中文手册 /Foundation 输入框尺寸

Foundation 输入框尺寸

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

更多网格系统知识，可以点击网格系统教程。

实例

   Foundation 实例       
    使用网格设置输入框大小
  large-10 medium-7 (100% on small)   
 
   small-5   
 
   medium-3 (100% on small)   
 
   medium-4 (100% on small, stacked)   
  medium-4 (100% on small, stacked)   
  medium-4 (100% on small, stacked)

运行实例 »

点击 "运行实例" 按钮查看在线实例

相等大小列

以下演示了相等大小列的实例:

实例

   Foundation 实例       
    三个相等宽度的输入框
  medium-4 (100% on small, stacked)   
  medium-4 (100% on small, stacked)   
  medium-4 (100% on small, stacked)

运行实例 »

点击 "运行实例" 按钮查看在线实例

内联标签

如果你希望你的标签内容显示在左边（不是上边），可以将标签元素 label 放在输入框左边的不同的列上，并使用.inline类来设置垂直居中:

实例

   Foundation 实例       
    内联标签 Label
 提示: 如果你需要标签显示在左边，可以移除 .right 类。
    Name

运行实例 »

点击 "运行实例" 按钮查看在线实例

前置和后置标签

你可以在

中添加前置和后置标签，元素为：<elementclass="postfix">或<elementclass="prefix">。可以使用网格系统来设置前置和后置标签的大小：

实例

   Foundation 实例       
    前置后置标签
    前置 
   
 
 
     
  后置

运行实例 »

点击 "运行实例" 按钮查看在线实例

前置和后置标签按钮

可以使用元素添加.button类来设置前置和后置按钮:

实例

   Foundation 实例       
    前置/后置按钮
     
  提交

运行实例 »

点击 "运行实例" 按钮查看在线实例

前置和后置标签圆角按钮

实例

   Foundation 实例       
    前置和后置标签
 圆角前置和后置标签:
    Prefix 
   
 
 
     
  Postfix 
 
 
 
  圆形前置和后置标签按钮:
    Go 
   
 
 
     
  Go

运行实例 »

点击 "运行实例" 按钮查看在线实例

← Foundation 表单

Foundation 开关→

Foundation 教程

Foundation 网格

Foundation 参考手册

Foundation 输入框尺寸

实例

相等大小列

实例

内联标签

实例

前置和后置标签

实例

前置和后置标签按钮

实例

前置和后置标签圆角按钮

实例

教程导航

Foundation 教程

Foundation 网格

Foundation 参考手册

Foundation 输入框尺寸

实例

使用网格设置输入框大小

相等大小列

实例

三个相等宽度的输入框

内联标签

实例

内联标签 Label

前置和后置标签

实例

前置后置标签

前置和后置标签按钮

实例

前置/后置按钮

前置和后置标签圆角按钮

实例

前置和后置标签

教程导航

Foundation 输入框尺寸