news 2026/6/10 15:55:08

Foundation 输入框尺寸

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Foundation 输入框尺寸

Foundation 输入框尺寸详解(超级完整版,一次讲透)
我们继续你的 Foundation 系列,今天重点讲输入框(Input)尺寸!Foundation 6+ 支持三种内置尺寸类,让输入框、选择框、文本域等表单元素快速调整高度和内边距,超级简单:

  • 默认(中等):不加类,就是标准高度(最常用)
  • .small:小尺寸(紧凑,适合密集表单或移动端)
  • .large:大尺寸(突出,适合重点输入或触摸设备)

这些类可以直接加到<input><select><textarea>上,也支持输入组(input-group)和开关(switch)。

1. 基本用法

<inputtype="text"placeholder="默认尺寸(中等)"><inputtype="text"class="small"placeholder="小尺寸 .small"><inputtype="text"class="large"placeholder="大尺寸 .large">

2. 结合输入组(Input Group)

<divclass="input-group small"><spanclass="input-group-label"></span><inputclass="input-group-field"type="text"placeholder="小输入组"></div><divclass="input-group large"><spanclass="input-group-label"></span><inputclass="input-group-field"type="text"placeholder="大输入组"></div>

3. 其他元素支持

  • 选择框(Select)
    <selectclass="large"><option>大选择框</option></select>
  • 开关(Switch)
    <divclass="switch small"><inputclass="switch-input"id="smallSwitch"type="checkbox"><labelclass="switch-paddle"for="smallSwitch"></label></div>

4. 今天直接给你抄的完整代码(复制就能跑)

<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation 输入框尺寸对比</h3><label>默认尺寸(中等)</label><inputtype="text"placeholder="标准高度"><label>小尺寸 .small</label><inputtype="text"class="small"placeholder="紧凑版"><label>大尺寸 .large</label><inputtype="text"class="large"placeholder="突出版"><!-- 输入组示例 --><divclass="input-group small"style="margin-top:20px;"><spanclass="input-group-label">@</span><inputclass="input-group-field"type="email"placeholder="小邮箱"></div><divclass="input-group large"><spanclass="input-group-label">$</span><inputclass="input-group-field"type="number"placeholder="大金额"></div><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script><script>$(document).foundation();</script></body></html>

下面给你看类似效果(Foundation 表单输入框不同尺寸的实际演示):

官方文档(最新版):https://get.foundation/sites/docs/forms.html(搜索 “Input Sizes” 或查看示例代码)

你现在想干嘛?
→ 明天继续讲 Foundation 表格(Table)还是按钮尺寸?
→ 帮我做一个小尺寸的搜索表单(带图标)?
→ 给我一个全尺寸对比的登录表单?

直接回复下一句:
“明天讲 table”
“帮我做搜索表单”
“给我登录表单”

我立刻给你写好!

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/10 12:50:15

Qwen3-8B大模型快速上手:本地部署与调用实践

Qwen3-8B大模型快速上手&#xff1a;本地部署与调用实践 在消费级显卡上跑通一个真正“能思考”的大模型&#xff0c;曾经是许多开发者遥不可及的梦想。如今&#xff0c;随着 Qwen3-8B 的发布&#xff0c;这一切变得触手可及——仅需一块 RTX 3060&#xff0c;你就能拥有一个支…

作者头像 李华
网站建设 2026/6/10 15:44:01

Ubuntu 20.04 安装 TensorFlow 2.5 GPU 版本

Ubuntu 20.04 安装 TensorFlow 2.5 GPU 版本 在深度学习项目中&#xff0c;一个稳定且支持 GPU 加速的训练环境几乎是标配。尤其是在企业级部署场景下&#xff0c;TensorFlow 凭借其成熟的生产链路、强大的分布式能力以及对硬件生态的良好适配&#xff0c;依然是许多团队的首选…

作者头像 李华
网站建设 2026/6/10 17:05:35

9、Linux 文本查看全攻略

Linux 文本查看全攻略 1. 文本查看基础 文本处理是 Linux 系统的核心功能之一,文本文件格式多样,包括英文文本、C 语言代码、保存的邮件消息或 HTML 文件等。普通文本文件不一定需要 .txt 或 .text 扩展名。若不确定文件内容是否为文本,可使用 file 命令来判断。 查…

作者头像 李华
网站建设 2026/6/10 18:29:09

EmotiVoice开源TTS引擎使用指南

EmotiVoice开源TTS引擎使用指南 你有没有想过&#xff0c;一段只有3秒的录音&#xff0c;就能让AI“长出”你的声音&#xff1f;在虚拟主播、有声书、游戏NPC对话这些场景中&#xff0c;我们不再满足于冷冰冰的机械朗读——我们需要的是会笑、会怒、会颤抖的声音。EmotiVoice …

作者头像 李华
网站建设 2026/6/9 20:09:35

Stable Diffusion 3.5 发布:图像质量与社区友好的双重突破

Stable Diffusion 3.5 发布&#xff1a;图像质量与社区友好的双重突破 在 AIGC 领域&#xff0c;每一次主流文生图模型的迭代都像是一场技术地震。前几天&#xff0c;Stability AI 正式发布了 Stable Diffusion 3.5&#xff08;SD3.5&#xff09;&#xff0c;不仅在生成质量、…

作者头像 李华
网站建设 2026/6/10 15:44:10

ComfyUI AnyText节点实现中英文文字生成

ComfyUI AnyText节点实现中英文文字生成 在当前AI图像生成的应用场景中&#xff0c;设计师和开发者越来越不满足于“图中有文”的模糊表达——他们需要的是精准控制文本内容、位置与样式的图文一体化输出。无论是电商主图上的品牌标语、包装设计中的多语言说明&#xff0c;还是…

作者头像 李华