当前位置: 首页 > news >正文

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”
“帮我做搜索表单”
“给我登录表单”

我立刻给你写好!

http://www.cnnetsun.cn/news/85598.html

相关文章:

  • GAN基础与应用:从原理到PaddlePaddle实践
  • Codex效率命令调试技巧:在Anything-LLM中模拟终端执行
  • Python语言编程导论第六章 字符串
  • 20、Linux 系统音频光盘操作与声音文件编辑全攻略
  • LobeChat能否造句子?中小学生作文辅导
  • 期末文献综述撰写指南:结构框架、研究方法与常见问题解析
  • Linux系统下TensorFlow-GPU环境搭建全指南
  • Jupyter Notebook与cpolar的深度协作——解锁远程开发新体验
  • SMDJ48A单向 TVS瞬态抑制二极管:48V单向瞬态防护核心
  • 基于springboot乡镇医院挂号预约系统
  • PHP大数据处理与人工智能集成实战:构建高并发智能系统-1
  • 4.3POSIXskin的不兼容性
  • 40、Perl与操作系统:Windows环境下的应用与操作
  • 盘点!国内几款特色AI大模型
  • 44、Perl引用的使用与深入探究
  • GPT-SoVITS语音合成与音色克隆实战指南
  • GPT-OSS-20B与Qwen3-14B九维全面对比
  • Docker与本地配置PaddleOCR实战指南
  • 从入门到精通:Agent任务分解终极指南,一篇彻底讲透技术栈与实战!
  • AutoGPT入门指南:安装、使用与案例全解析
  • 27、文本编辑器的复杂性与设计权衡
  • 基于java + vue校园快递物流管理系统(源码+数据库+文档)
  • AI时代工作模式革命:揭秘’人+智能体+机器人’新范式,重构未来职业与教育方向!
  • TOB企业获客软件选型指南:技术架构、核心能力与可信赖度深度剖析
  • 突破Seed-Coder-8B上下文限制的三大策略
  • Gfast 快速开发框架 V3.3.10 版发布
  • 稀土网络指标(2018-2024)
  • vue基于Spring Boot框架自然灾害应急救援捐赠平台_jwwh8v3n
  • 基于springboot和vue的陶瓷销售商城平台的设计与实现_87274i2a(java毕业设计项目源码)
  • 基于springboot和vue的高校晒衣服交流系统 物品收纳空间管理系统_76216q80(java毕业设计项目源码)