开源网站建设教程合肥网站建设制作价格

开源网站建设教程,合肥网站建设制作价格,淘宝店铺运营,义乌小程序Foundation 输入框尺寸详解#xff08;超级完整版#xff0c;一次讲透#xff09; 我们继续你的 Foundation 系列#xff0c;今天重点讲 输入框#xff08;Input#xff09;尺寸#xff01;Foundation 6 支持三种内置尺寸类#xff0c;让输入框、选择框、文本域等表单元…Foundation 输入框尺寸详解超级完整版一次讲透我们继续你的 Foundation 系列今天重点讲输入框Input尺寸Foundation 6 支持三种内置尺寸类让输入框、选择框、文本域等表单元素快速调整高度和内边距超级简单默认中等不加类就是标准高度最常用.small小尺寸紧凑适合密集表单或移动端.large大尺寸突出适合重点输入或触摸设备这些类可以直接加到input、select、textarea上也支持输入组input-group和开关switch。1. 基本用法inputtypetextplaceholder默认尺寸中等inputtypetextclasssmallplaceholder小尺寸 .smallinputtypetextclasslargeplaceholder大尺寸 .large2. 结合输入组Input Groupdivclassinput-group smallspanclassinput-group-label小/spaninputclassinput-group-fieldtypetextplaceholder小输入组/divdivclassinput-group largespanclassinput-group-label大/spaninputclassinput-group-fieldtypetextplaceholder大输入组/div3. 其他元素支持选择框Selectselectclasslargeoption大选择框/option/select开关Switchdivclassswitch smallinputclassswitch-inputidsmallSwitchtypecheckboxlabelclassswitch-paddleforsmallSwitch/label/div4. 今天直接给你抄的完整代码复制就能跑!DOCTYPEhtmlhtmlheadlinkrelstylesheethrefhttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/css/foundation.min.css/headbodyh3Foundation 输入框尺寸对比/h3label默认尺寸中等/labelinputtypetextplaceholder标准高度label小尺寸 .small/labelinputtypetextclasssmallplaceholder紧凑版label大尺寸 .large/labelinputtypetextclasslargeplaceholder突出版!-- 输入组示例 --divclassinput-group smallstylemargin-top:20px;spanclassinput-group-label/spaninputclassinput-group-fieldtypeemailplaceholder小邮箱/divdivclassinput-group largespanclassinput-group-label$/spaninputclassinput-group-fieldtypenumberplaceholder大金额/divscriptsrchttps://cdn.jsdelivr.net/npm/jquery3.7.1/dist/jquery.min.js/scriptscriptsrchttps://cdn.jsdelivr.net/npm/foundation-sites6.8.1/dist/js/foundation.min.js/scriptscript$(document).foundation();/script/body/html下面给你看类似效果Foundation 表单输入框不同尺寸的实际演示官方文档最新版https://get.foundation/sites/docs/forms.html搜索 “Input Sizes” 或查看示例代码你现在想干嘛→ 明天继续讲 Foundation 表格Table还是按钮尺寸→ 帮我做一个小尺寸的搜索表单带图标→ 给我一个全尺寸对比的登录表单直接回复下一句“明天讲 table”“帮我做搜索表单”“给我登录表单”我立刻给你写好