Bulma.field表单容器详解.control职责分离与 field 布局体系的演进【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulmaBulma 在 0.6.0 版本中引入.field元素将表单控件从既能做块级容器、又能做行内容器的.control中解耦出来从而支持横向 help 文本、带图标的 addons、多控件分组加载等更复杂的表单布局。本文基于仓库中的发布文档 New field element结合当前源码 sass/form/tools.scss完整讲解这次 API 重构的背景、前后写法对照以及.field/.field-label/.field-body/.control的现行实现与可定制变量。背景.control的双重身份与它的代价从 Bulma 早期版本开始.control一直是表单控件的万能容器一个元素同时承担了六类职责让控件在垂直方向上拉开间距在 input、button、textarea 旁边附加图标为控件追加 loading 旋转器创建横向表单horizontal form创建control addons连体控件如搜索框 按钮创建control groups控件分组。问题在于它同时扮演了两种容器角色角色用途典型修饰类块级block容器垂直间距、横向表单中的行容器块级边距行为行内inline容器图标、loader、addon、grouping.has-icon、.is-loading这种混合导致三个做不到的场景这也是.field出现的直接动因无法在横向表单中放 help 文本—— help 文本需要与.control同级而不是嵌套其中无法在一组控件里同时挂多个图标或 loader—— 图标/loader 的修饰类只能挂在单个.control上无法给 addons 中的每个控件挂不同图标—— addon 组整体共享一个.control上下文。核心变化.field承接 block 角色.control回归纯行内发布文档给出的结论只有一句话TL;DR: theres a new.fieldcontainer, and.controlhas been re-purposed.具体分工调整为.field成为.control的 block 容器并继承了原先挂在.control上的布局修饰类.has-addons、.is-grouped、.is-horizontal.control只允许包含一个.button、.input、.select或.textarea外加至多一个.icon它不能再包含.help元素也不能再嵌套其他.control。类结构前后对照摘自发布文档// Before .control .has-addons .has-icon .is-grouped .is-horizontal .is-loading // After .control .has-icon .is-loading .field .has-addons .is-grouped .is-horizontal .field-label .field-bodyHTML 写法的前后对照以用户名可用提示为例!-- Before -- label classlabelUsername/label p classcontrol has-icon has-icon-right input classinput is-success typetext placeholderText input valuebulma span classicon is-small i classfas fa-check/i /span span classhelp is-successThis username is available/span /p !-- After -- div classfield label classlabelUsername/label p classcontrol has-icon has-icon-right input classinput is-success typetext placeholderText input valuebulma span classicon is-small i classfas fa-check/i /span /p p classhelp is-successThis username is available/p /div结构上的关键差别.label与.help从.control内部提升为.field的直接子元素与.control平级。这正是help 可以横向排布得以成立的原因——它们与控件同处一个 flex/block 容器层级。注意当前仓库源码中图标修饰类已改名为has-icons-left/has-icons-right见 sass/form/tools.scss 中.control.has-icons-left, .has-icons-right的选择器发布文档里的has-icon/has-icon-right是 0.6.0 时期的历史写法在后续版本中被弃用。.field的现行实现三个布局修饰类发布文档中.field只列出了继承了哪些修饰类而当前源码 sass/form/tools.scss 则展示了这些修饰类的完整实现。.field基础样式继承 block 行为.field { include cv.register-vars( ( block-spacing: #{cv.getVar(field-block-spacing)}, ) ); extend %block; ... }从源码结构看.field通过extend %block复用全局 block 的垂直间距行为%block定义在 sass/utilities/extends.scss并把自己专属的块间距变量--bulma-block-spacing指向 CSS 变量field-block-spacing。这个变量由 SASS 变量$field-block-spacing注册默认值0.75rem同样定义在 sass/form/tools.scss$field-block-spacing: 0.75rem !default;.field之间的垂直节奏由它统一控制这正是垂直拉开控件间距这一原.control职责的落点。.has-addons连体控件.has-addons { display: flex; justify-content: flex-start; .control { :not(:last-child) { margin-inline-end: -1px; // 边框重叠视觉上连成一体 } :not(:first-child):not(:last-child) { .button, .input, .select select { border-radius: 0; // 中间段无圆角 } } :first-child:not(:only-child) { /* 只保留左侧圆角 */ } :last-child:not(:only-child) { /* 只保留右侧圆角 */ } .is-expanded { flex-grow: 1; flex-shrink: 1; } } .has-addons-centered { justify-content: center; } .has-addons-right { justify-content: flex-end; } .has-addons-fullwidth { .control { flex-grow: 1; flex-shrink: 0; } } }要点addons 通过负外边距让相邻控件边框重叠、对非首尾控件清零圆角来实现连体外观每个子控件用.control.is-expanded声明弹性扩展交互状态hover/focus/active通过z-index: 2/3/4分层保证聚焦控件的 focus 光圈不被相邻控件压住。.is-grouped带间距的控件组.is-grouped { display: flex; gap: 0.75rem; justify-content: flex-start; .control { flex-shrink: 0; .is-expanded { flex-grow: 1; flex-shrink: 1; } } .is-grouped-centered { justify-content: center; } .is-grouped-right { justify-content: flex-end; } .is-grouped-multiline { flex-wrap: wrap; } }与 addons 的区别在于用gap: 0.75rem保留控件间距不连体并提供居中/靠右/多行三个变体。每个.control默认flex-shrink: 0不被压缩仅.is-expanded的控件参与伸缩。.is-horizontal与.field-label/.field-body.is-horizontal { include mx.tablet { display: flex; // 仅 tablet 及以上生效 } }.is-horizontal在移动端保持块级堆叠、在 tablet 断点以上才切换为 flex 横排是响应式表单的基础。与之配套的两个子容器.field-labeltablet 以上flex-grow: 1、text-align: right、右侧1.5rem间距并支持is-small / is-normal / is-medium / is-large四档字号每档带padding-top: 0.375em与输入框顶部对齐移动端仅保留0.5rem的下边距。.field-bodytablet 以上flex-grow: 5label:body 形成 1:5 的列比例内部多个.field之间margin-inline-end: 0.75rem非.is-narrow的子 field 自动flex-grow: 1平分剩余宽度。这一 label:body 1:5 的弹性比例是从源码中可以直接验证的布局细节。.control的现行实现纯行内职责重构后的.control在 sass/form/tools.scss 中只剩与单个控件内部装饰相关的逻辑.control { box-sizing: border-box; clear: both; font-size: cv.getVar(size-normal); position: relative; // 为图标/loader 的绝对定位提供参照 text-align: inherit; }图标定位.has-icons-left/.has-icons-right下.icon以绝对定位覆盖在输入框上height/width均取input-heightz-index: 4输入框则按input-height预留左右 paddinginput 的 hover/focus 通过兄弟选择器 ~ .icon联动图标颜色。loading 旋转器.is-loading用::after伪元素extend %loader渲染定位于控件右上角内inset-inline-end: 0.75em; top: 0.75em并随is-small / is-medium / is-large调整字号——因为.control现在只包一个控件spinner 不再与其他控件互相干扰这正是发布文档解决方案一节中允许多个控件各自挂 loader的落地形态。控件度量基线.control本身的高度、行高、内边距来自 sass/utilities/controls.scss 的$control-height: 2.5em、$control-line-height: 1.5、$control-padding-vertical / -horizontal等变量统一注册为--bulma-control-*CSS 变量供 input、select、button、file 等所有控件形态共用。%controlplaceholder 在 sass/utilities/extends.scss 中定义被各输入形态extend保证同一控件在不同上下文中度量一致。文档中的两个典型示例发布文档给出了两个最能体现新结构的场景。示例一addons 组内每个控件各自带图标/状态div classfield is-grouped p classcontrol is-expanded has-icon input classinput is-success typetext placeholderUsername valuealexsmith span classicon is-small i classfas fa-check/i /span /p p classcontrol is-expanded has-icon input classinput is-warning typeemail placeholderEmail valuealexsmith.com span classicon is-small i classfas fa-exclamation-triangle/i /span /p p classcontrol is-expanded is-loading input classinput typeemail placeholderName /p /div三个控件分处三个独立.control各自携带不同的图标或 loading 状态——这在旧结构一个.control包整组中是做不到的。示例二横向表单 help 文本div classfield is-horizontal div classfield-label label classlabelFrom/label /div div classfield-body div classfield is-grouped p classcontrol is-expanded input classinput typetext placeholderName /p /div div classfield p classcontrol is-expanded has-icon has-icon-right input classinput is-success typeemail placeholderEmail valuealexsmith.com span classicon is-small i classfas fa-check/i /span /p p classhelp is-successThis email is correct/p /div /div /div嵌套关系值得注意外层.field.is-horizontal用.field-label.field-body分成左右两栏.field-body内部再嵌套两个.field一个is-grouped的 Name 组、一个 Email 字段help 文本位于内层.field中、与.control平级——这是.help能正常换行排布的前提。该示例与现行文档 Input 表单页面 中.input.is-static横向表单的示例结构完全一致说明这一写法在后续版本中持续沿用。.label与.helpfield 的配套元素.field重构的完整体验还包括两个文字元素定义同见 sass/form/tools.scss.labeldisplay: block颜色取text-strong$label-color字重$label-weight默认weight-semibold非末位时margin-bottom为$label-spacing默认0.5em支持is-small / is-medium / is-large字号变体。.helpdisplay: block字号$help-size默认size-smallmargin-top: 0.25rem通过each遍历$label-colors即完整调色板自动生成is-{color}变体与.input.is-success、.input.is-warning等状态色一一对应。这些变量$label-color、$label-spacing、$label-weight、$help-size、$field-block-spacing都带!default可以在自定义 SASS 中覆盖$field-block-spacing对应的 CSS 变量为--bulma-field-block-spacing见 CHANGELOG.md 中 v1 的变量迁移记录即项目已同时支持 SASS 变量与 CSS 变量两条定制路径。版本演进脉络结合 CHANGELOG.md 可以还原这条 API 线的完整演进版本变化0.5.x.control.is-grouped使用.control元素作为直接子元素BREAKING见 0.6.0 记录0.6.02017-03新增.field元素.control重新定义职责—— 即本文发布文档对应版本0.7.2.control.has-icon弃用改名为.control.has-icons1.x表单样式全面接入 CSS 变量$field-block-spacing→--bulma-field-block-spacing等.field继续extend %block从 CHANGELOG 到当前sass/form/tools.scss的选择器可以验证0.6.0 确立的.field管 block 布局、.control管单控件装饰这一分层在 1.x 中完全没有被推翻只经历了命名has-icon→has-icons-left/right与变量机制SASS → CSS 变量的渐进式迁移。小结.field的引入是 Bulma 表单系统一次典型的单一职责重构.fieldblock 容器负责垂直间距与三大布局修饰类.has-addons/.is-grouped/.is-horizontal并新增.field-label、.field-body支撑横向表单的响应式 1:5 布局.control行内容器只包裹一个.button/.input/.select/.textarea与可选.icon负责图标定位has-icons-left/right与 loading 旋转器is-loading.label/.help作为.field的直接子元素与.control平级获得横向排布能力并与全调色板状态色联动。对使用方的实际意义从旧版迁移时把原先一个.control包一切的结构拆开——label、control、help提升为.field的三个兄弟节点图标与 loading 修饰类下沉到具体控件的.control上布局修饰类上提到.field上即可获得发布文档所述更复杂的表单设计能力且与现行 1.x 源码结构完全兼容。【免费下载链接】bulmaModern CSS framework based on Flexbox项目地址: https://gitcode.com/GitHub_Trending/bu/bulma创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考