news 2026/9/19 0:25:32

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/9/17 22:57:01

开源免费、私有化部署的项目管理系统,附Demo和源码地址!

做项目&#xff0c;最怕越忙越乱&#xff0c;越管越累。当企业项目数量不断增长、团队协作愈加复杂时&#xff0c;一款合适的多项目管理系统就显得非常重要了。无论你正在负责项目建设、规划跨部门项目排期&#xff0c;还是需要在多个并行项目中合理调配资源&#xff0c;都可以…

作者头像 李华
网站建设 2026/9/18 22:42:40

Qwen3-VL-8B中文多模态能力实测

Qwen3-VL-8B中文多模态能力实测&#xff1a;轻量级模型如何扛起“识图”大旗&#xff1f; 在智能家居设备日益复杂的今天&#xff0c;用户不再满足于“输入文字、返回答案”的单向交互。他们更希望系统能“看懂”上传的照片——比如一张商品图、一段故障截图&#xff0c;甚至是…

作者头像 李华
网站建设 2026/9/18 2:18:39

Kotaemon揭秘:基于GraphRAG的文档问答创新

Kotaemon揭秘&#xff1a;基于GraphRAG的文档问答创新 在企业级AI应用日益普及的今天&#xff0c;一个核心挑战始终存在&#xff1a;如何让大模型不仅“能说”&#xff0c;还能“懂”&#xff1f;尤其是在金融、法律、医疗等专业领域&#xff0c;用户不再满足于泛泛而谈的答案…

作者头像 李华
网站建设 2026/9/17 22:46:45

LLaMA Factory本地部署与离线安装指南

LLaMA Factory本地部署与离线安装实战指南 在大模型定制化需求日益增长的今天&#xff0c;如何快速、安全地完成私有化部署&#xff0c;成为企业和科研团队面临的关键挑战。LLaMA Factory 正是为此而生——它不仅是一个开源微调框架&#xff0c;更像是一座“自动化工厂”&…

作者头像 李华
网站建设 2026/9/17 10:34:13

【必学收藏】大模型原理深度解析:从Transformer到GPT的完整指南

本文系统性地介绍了大模型的推理原理&#xff0c;从Transformer架构和注意力机制入手&#xff0c;详细解析了不同类型的Transformer架构&#xff0c;特别是GPT模型的工作方式。文章深入浅出地解释了自注意力机制(MHA)、KV缓存、MQA/GQA优化技术以及前馈神经网络(FFN)的核心原理…

作者头像 李华
网站建设 2026/9/17 3:48:43

21、Linux磁盘存储与打印操作全解析

Linux磁盘存储与打印操作全解析 1. Linux磁盘存储概述 在Linux系统中,所有文件和目录都存储在Linux文件系统上,这是一种经过格式化以存储目录树的磁盘设备,如硬盘。Linux系统的磁盘存储主要分为两种类型:固定存储和可移动存储。 固定存储 :指牢固连接到计算机系统,通常…

作者头像 李华