Foundation 输入尺寸学习笔记

1. 简介

Foundation 是一个用于快速构建响应式网站和应用程序的前端框架。其中，输入组件在表单设计中占据着重要的地位。本文将介绍 Foundation 中输入组件的尺寸设置方式及其使用示例。

2. 尺寸设置方法

Foundation 中提供了多种方式来设置输入组件的尺寸，包括：

2.1 设置 class

在 HTML 中，可以为输入组件添加不同的 class 来控制其大小。常用的 class 包括：

• small：较小的尺寸
• medium：中等尺寸（默认）
• large：较大的尺寸
• expand：自适应宽度

示例如下：

htmlCopy Code
<input type="text" class="small" placeholder="Small input">
<input type="text" class="" placeholder="Medium input">
<input type="text" class="large" placeholder="Large input">
<input type="text" class="expand" placeholder="Expand input">

2.2 使用 Sass 变量

在 Sass 中，Foundation 定义了一些变量来控制输入组件的尺寸。例如，可以通过修改 $input-small-font-size 变量来改变 small 大小的输入框字体大小。

示例如下：

scssCopy Code
$input-small-font-size: 12px;

input.small {
  font-size: $input-small-font-size;
}

3. 实例

3.1 设置 class

下面是一个使用不同 class 的示例：

htmlCopy Code
<form>
  <label>
    Small input
    <input type="text" class="small">
  </label>
  
  <label>
    Medium input
    <input type="text">
  </label>
  
  <label>
    Large input
    <input type="text" class="large">
  </label>
  
  <label>
    Expand input
    <input type="text" class="expand">
  </label>
</form>

显示效果如下：

3.2 使用 Sass 变量

下面是一个修改输入框字体大小的示例：

htmlCopy Code
<form>
  <label>
    Small input
    <input type="text" class="small">
  </label>
  
  <label>
    Medium input
    <input type="text">
  </label>
  
  <label>
    Large input
    <input type="text" class="large">
  </label>
  
  <label>
    Expand input
    <input type="text" class="expand">
  </label>
</form>

scssCopy Code
$input-small-font-size: 12px;
$input-medium-font-size: 14px;
$input-large-font-size: 18px;

input.small {
  font-size: $input-small-font-size;
}

input {
  font-size: $input-medium-font-size;
}

input.large {
  font-size: $input-large-font-size;
}

显示效果如下：

4. 总结

通过设置 class 或使用 Sass 变量，可以方便地调整 Foundation 输入组件的尺寸。在实际项目中，根据需要进行选择即可。