news 2026/2/27 11:53:29

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/2/23 2:29:15

Foundation 滑块

Foundation 滑块&#xff08;Slider&#xff09;详解&#xff08;超级完整版&#xff0c;一次讲透&#xff09; 我们继续你的 Foundation 系列&#xff0c;今天把 滑块&#xff08;Slider&#xff09;讲得明明白白&#xff01;Foundation 6 的 Slider 是一个范围选择器&#xf…

作者头像 李华
网站建设 2026/2/24 13:48:17

如何恢复微信聊天记录!

最怕 “一时手快” 的代价&#xff1a;刚和家人聊完的温馨日常、和客户敲定的合作细节、存了好久的朋友调侃截图&#xff0c;微信 / QQ / 短信误删的瞬间&#xff0c;那些无法复刻的信息&#xff0c;真的要彻底失去吗&#xff1f;方法一&#xff1a;借助电脑端微信恢复很多人会…

作者头像 李华
网站建设 2026/2/27 3:08:28

Windows下安装PaddlePaddle 2.0(含WSL2 GPU版)

Windows下安装PaddlePaddle 2.0&#xff08;含WSL2 GPU版&#xff09; 你有没有遇到过这样的情况&#xff1a;刚配好环境&#xff0c;一跑代码就报错“Can not import avx core”&#xff1f;或者明明装了CUDA&#xff0c;paddle.is_compiled_with_cuda()却返回False&#xff…

作者头像 李华
网站建设 2026/2/24 16:42:26

Linly-Talker:构建智能多模态对话系统

Linly-Talker&#xff1a;让每个人都能拥有自己的AI数字人 想象一下&#xff0c;你只需上传一张照片和一段文字&#xff0c;几分钟后就能看到一个栩栩如生的“自己”在屏幕上开口说话——讲解课程、播报新闻、回答客户问题。这不再是科幻电影中的场景&#xff0c;而是Linly-Ta…

作者头像 李华
网站建设 2026/2/21 20:05:06

LobeChat能否模拟谈判?商务沟通预演工具

LobeChat能否模拟谈判&#xff1f;商务沟通预演工具 在企业日常运营中&#xff0c;一次关键的采购谈判可能直接影响数百万成本&#xff1b;一场国际商务对话中的措辞偏差&#xff0c;甚至可能引发合作破裂。传统上&#xff0c;这类高风险沟通依赖经验积累和有限的角色扮演训练—…

作者头像 李华
网站建设 2026/2/20 1:27:29

Qwen3-8B与vLLM协同推理加速实战

Qwen3-8B与vLLM协同推理加速实战 在当前AI应用快速落地的浪潮中&#xff0c;如何用有限的硬件资源跑出高性能的大模型推理服务&#xff0c;成了开发者绕不开的现实课题。尤其对于中小企业和独立开发者而言&#xff0c;动辄百亿参数、需要多张A100支撑的“巨无霸”模型显然不现实…

作者头像 李华