news 2026/7/10 2:33:38

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/7/8 21:35:09

GAN基础与应用:从原理到PaddlePaddle实践

GAN基础与应用&#xff1a;从原理到PaddlePaddle实践 生成式对抗网络&#xff08;GAN&#xff09;自2014年问世以来&#xff0c;迅速成为人工智能领域最具颠覆性的技术之一。它不再局限于识别或分类任务&#xff0c;而是赋予机器“创造”的能力——让AI学会画画、写诗、演电影…

作者头像 李华
网站建设 2026/7/8 16:06:03

Codex效率命令调试技巧:在Anything-LLM中模拟终端执行

Codex效率命令调试技巧&#xff1a;在Anything-LLM中模拟终端执行 在开发和运维的日常工作中&#xff0c;你是否曾面对一条报错信息束手无策&#xff1f;比如看到 Permission denied 却不确定是权限配置问题、路径错误&#xff0c;还是用户上下文不对。传统的解决方式往往是复制…

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

Python语言编程导论第六章 字符串

内容提要 概述 通用序列操作 字符串格式化 字符串方法 正则表达式简介 一、概述 在Python中&#xff0c;字符串是除数字外最重要的数据类型。 字符串无处不在&#xff1a;将字符串输出到屏幕上&#xff1b;从用户的键盘输入读取字符串&#xff1b;文件通常被视为大型字…

作者头像 李华
网站建设 2026/7/8 13:05:58

20、Linux 系统音频光盘操作与声音文件编辑全攻略

Linux 系统音频光盘操作与声音文件编辑全攻略 1. 音频光盘播放与操作 1.1 音频光盘播放系统要求 在 Linux 系统中,若要播放音频光盘,需安装 CD 驱动器和声卡。播放音频光盘的控制方式与传统 CD 播放器类似,不过在 Linux 系统里,是通过命令行的软件工具来实现控制的。此外…

作者头像 李华
网站建设 2026/7/8 21:43:00

LobeChat能否造句子?中小学生作文辅导

LobeChat 能否教孩子写作文&#xff1f;探索 AI 在中小学写作辅导中的实践路径 在一间普通的城市小学语文课堂上&#xff0c;老师布置了本周的作文作业&#xff1a;《我最难忘的一天》。班上有四十个学生&#xff0c;每个孩子的表达能力、词汇积累和生活经历都不同。有的孩子提…

作者头像 李华
网站建设 2026/7/9 13:00:53

期末文献综述撰写指南:结构框架、研究方法与常见问题解析

科研新人做综述时最痛苦&#xff1a;一搜就是几十页论文&#xff0c;重复、无关、没用。下面三款工具让我效率翻倍。 ① WisPaper&#xff08;智能学术搜索 文献管理&#xff09; 官网&#xff1a;https://www.wispaper.ai WisPaper 能通过关键词和语义搜索快速找到相关文献&…

作者头像 李华