Foundation Chinese Manual /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 Tutorial

Foundation Grid

Foundation Reference Manual

Foundation 输入框尺寸

实例

相等大小列

实例

内联标签

实例

前置和后置标签

实例

前置和后置标签按钮

实例

前置和后置标签圆角按钮

实例

Tutorial Navigation

Foundation Tutorial

Foundation Grid

Foundation Reference Manual

Foundation 输入框尺寸

实例

使用网格设置输入框大小

相等大小列

实例

三个相等宽度的输入框

内联标签

实例

内联标签 Label

前置和后置标签

实例

前置后置标签

前置和后置标签按钮

实例

前置/后置按钮

前置和后置标签圆角按钮

实例

前置和后置标签

Tutorial Navigation

Foundation 输入框尺寸