Foundation5手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框 尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

©
This document uses PHP Chinese website manual Release

characters

Foundation 输入框尺寸

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

实例

<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>
实例预览 »

前置和后置标签

你可以在 <div class="row collapse"> 中添加前置和后置标签，元素为： <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>
实例预览 »

前置和后置标签按钮

可以使用 <a> 元素添加 .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>
实例预览 »


关于我们 联系我们 留言板

手册网

Previous article： Next article：