UI库/组件【免费下载链接】bhBootstrap Helpers for Ruby项目地址https://gitcode.com/gh_mirrors/bh/bh点击查看免费下载bhBootstrap Helpers是面向 Rails 的 Bootstrap 6 表单助手 gem它替你写好全部 HTML视图里只剩一行 Ruby。本文带你一次看懂它的三个特色字段phone_field的实时格式化以及price_field、percentage_field这类把单位写进边框的输入组 一分钟接入 bh 表单助手先说结论装好 gem、在布局里挂上样式表和脚本、给控制器指定构建器三个字段立刻可用。# 控制器里指定默认表单构建器 class ApplicationController ActionController::Base default_form_builder Bh::FormBuilder end布局中通过Bh::Engine::PREFIX引入/bh/css/bh.css和/bh/js/bh.js即可样式与脚本都由引擎自己分发详见 lib/engine.rb。phone_field 电话字段边输入边格式化phone_field处理北美电话NANP用户敲入5555555555页面里立刻变成555-555-5555。% form.phone_field :phone, class: text-center %它的工作原理是「服务器只交数字形状交给浏览器」服务器渲染出的输入框只带 10 位裸数字和data-controllerphone所有格式规则集中在 app/javascript/bh/phone_controller.js 这一个 Stimulus 控制器里想换成(555) 555-5555只需改 JS不碰 Ruby。控制器写死了合法形状pattern[2-9]\d{2}-[2-9]\d{2}-\d{4}区号和交换码不能以 0/1 开头见 phone_controller.js#L10-L11并顺手补上inputmodenumeric移动端直接弹出数字键盘。只进数字keydown会直接拒绝非数字键满 10 位后第 11 位按键被当场拦下保证旁观的校验器永远先看到合法形态。粘贴、自动填充也重排整串进入的值会被重新整形并再发一次input事件。带 1 的国家码也能收11 位且以 1 开头时自动剥掉前导 1只留 10 位号码。校验失败重绘页面后照样带分隔符connect时会对已有值再格式化一遍表单不会因为服务端退回裸数字而露馅。placeholder 里的555-555-5555取自语言文件 config/locales/bh.en.yml#L12——号码怎么写是读者语言的事不硬编码进 gem。字段默认携带autocompletetel与aria-label视图显式传入的class、autocomplete、data都会原样保留见 lib/bh/form_builder.rb#L62-L66。price_field 金额输入组货币符号写进边框price_field渲染的是 Bootstrap 的 adorned附饰控件货币符号是一个span和数字输入框共处同一个边框内——边框和内边距属于外层包裹内部输入框戴form-ghost类自己不描边不占位。% form.price_field :fee % # 渲染出div classform-control form-adorn d-flex # span classform-adorn-text$/span # input classform-ghost typenumber min0 step0.01 ... # /div默认规则很克制min: 0、step: 0.01美分级调用方知道列的精度时可以传step:覆盖。货币符号读 I18n 的number.currency.format.unit缺省$把语言文件的 unit 设成¥字段就跟着变 ¥逻辑见 lib/bh/form_builder/adornments.rb#L16-L35。percentage_field 百分比输入组百分号跟随数字percentage_field与金额字段共用同一套附饰结构只有一处不同%是后缀而不是前缀。外层多一个form-adorn-end类CSS 里让数字输入框排在符号前面所以视觉上永远是「数字 %」符合人读百分数的习惯。% form.percentage_field :rate % # 渲染出div classform-control form-adorn d-flex form-adorn-end # span classform-adorn-text%/span # input classform-ghost typenumber ... # /div它没有预设min/step默认就是普通数字输入框调用方按需补充。完整渲染断言可以参考 test/test_bh_forms.rb#L32-L39。字段单位位置默认约束典型场景phone_field无单位10 位、NANP 形状、数字键盘联系电话price_field前缀$/I18n 单位min0、step0.01金额、费率percentage_field后缀%无预设折扣、占比、税率三个字段一页跑起来本地演示步骤gem 自带一个「每个组件只画一次」的演示应用三个字段全部在同一个表单里fee、rate、phone见 test/dummy/app/views/pages/show.html.erb#L22-L29。克隆仓库后即可启动git clone https://gitcode.com/gh_mirrors/bh/bh cd bh bin/setup rails s打开localhost:3000就能看到全部组件同屏渲染?flash1还能追加 toast 提示。小结什么时候用哪个字段收电话号码 →phone_field格式化、键盘、校验提示一站配齐改形状只动 JS收金额 →price_field货币符号来自 I18n换语言文件就换币种收百分比 →percentage_field%恒在数字之后。三者都由 lib/bh/form_builder.rb 统一「着装」视图只声明字段种类外观、无障碍标签、浏览器提示全部由构建器负责这正是 bh「一行 Ruby零 markup」的核心理念 ✨赞分享UI库/组件【免费下载链接】bhBootstrap Helpers for Ruby项目地址https://gitcode.com/gh_mirrors/bh/bh点击查看免费下载相关推荐AlphaFold 3输入文件详解JSON格式与字段说明AlphaFold 3输入文件详解JSON格式与字段说明 在使用AlphaFold 3进行蛋白质结构预测时输入文件的正确配置是获得准确结果的关键步骤。本文将人工智能深度学习生物信息学科研MCreator 村民交易指南第二个可选价格Price 2字段详解与源码解析MCreator 村民交易指南第二个可选价格Price 2字段详解与源码解析 导读 在 MCreator 中制作自定义村民交易Villager Trad低代码代码生成桌面应用游戏开发Deep-Live-Cam 换脸模型配置完整指南inswapper 与 GFPGAN 下载放置Deep Live Cam 换脸模型配置完整指南inswapper 与 GFPGAN 下载放置 Deep Live Cam 凭一张照片即可做实时换脸的视频深度UI库/组件上一篇5秒克隆中文声线IndexTTS-2.5零样本克隆实测与效果对比下一篇老卡不慌Tesla V100 32GB 跑通 H3 的完整部署实录创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 bh的三个特色字段：phone_field实时格式化、price与percentage输入组详解
UI库/组件【免费下载链接】bhBootstrap Helpers for Ruby项目地址https://gitcode.com/gh_mirrors/bh/bh点击查看免费下载bhBootstrap Helpers是面向 Rails 的 Bootstrap 6 表单助手 gem它替你写好全部 HTML视图里只剩一行 Ruby。本文带你一次看懂它的三个特色字段phone_field的实时格式化以及price_field、percentage_field这类把单位写进边框的输入组 一分钟接入 bh 表单助手先说结论装好 gem、在布局里挂上样式表和脚本、给控制器指定构建器三个字段立刻可用。# 控制器里指定默认表单构建器 class ApplicationController ActionController::Base default_form_builder Bh::FormBuilder end布局中通过Bh::Engine::PREFIX引入/bh/css/bh.css和/bh/js/bh.js即可样式与脚本都由引擎自己分发详见 lib/engine.rb。phone_field 电话字段边输入边格式化phone_field处理北美电话NANP用户敲入5555555555页面里立刻变成555-555-5555。% form.phone_field :phone, class: text-center %它的工作原理是「服务器只交数字形状交给浏览器」服务器渲染出的输入框只带 10 位裸数字和data-controllerphone所有格式规则集中在 app/javascript/bh/phone_controller.js 这一个 Stimulus 控制器里想换成(555) 555-5555只需改 JS不碰 Ruby。控制器写死了合法形状pattern[2-9]\d{2}-[2-9]\d{2}-\d{4}区号和交换码不能以 0/1 开头见 phone_controller.js#L10-L11并顺手补上inputmodenumeric移动端直接弹出数字键盘。只进数字keydown会直接拒绝非数字键满 10 位后第 11 位按键被当场拦下保证旁观的校验器永远先看到合法形态。粘贴、自动填充也重排整串进入的值会被重新整形并再发一次input事件。带 1 的国家码也能收11 位且以 1 开头时自动剥掉前导 1只留 10 位号码。校验失败重绘页面后照样带分隔符connect时会对已有值再格式化一遍表单不会因为服务端退回裸数字而露馅。placeholder 里的555-555-5555取自语言文件 config/locales/bh.en.yml#L12——号码怎么写是读者语言的事不硬编码进 gem。字段默认携带autocompletetel与aria-label视图显式传入的class、autocomplete、data都会原样保留见 lib/bh/form_builder.rb#L62-L66。price_field 金额输入组货币符号写进边框price_field渲染的是 Bootstrap 的 adorned附饰控件货币符号是一个span和数字输入框共处同一个边框内——边框和内边距属于外层包裹内部输入框戴form-ghost类自己不描边不占位。% form.price_field :fee % # 渲染出div classform-control form-adorn d-flex # span classform-adorn-text$/span # input classform-ghost typenumber min0 step0.01 ... # /div默认规则很克制min: 0、step: 0.01美分级调用方知道列的精度时可以传step:覆盖。货币符号读 I18n 的number.currency.format.unit缺省$把语言文件的 unit 设成¥字段就跟着变 ¥逻辑见 lib/bh/form_builder/adornments.rb#L16-L35。percentage_field 百分比输入组百分号跟随数字percentage_field与金额字段共用同一套附饰结构只有一处不同%是后缀而不是前缀。外层多一个form-adorn-end类CSS 里让数字输入框排在符号前面所以视觉上永远是「数字 %」符合人读百分数的习惯。% form.percentage_field :rate % # 渲染出div classform-control form-adorn d-flex form-adorn-end # span classform-adorn-text%/span # input classform-ghost typenumber ... # /div它没有预设min/step默认就是普通数字输入框调用方按需补充。完整渲染断言可以参考 test/test_bh_forms.rb#L32-L39。字段单位位置默认约束典型场景phone_field无单位10 位、NANP 形状、数字键盘联系电话price_field前缀$/I18n 单位min0、step0.01金额、费率percentage_field后缀%无预设折扣、占比、税率三个字段一页跑起来本地演示步骤gem 自带一个「每个组件只画一次」的演示应用三个字段全部在同一个表单里fee、rate、phone见 test/dummy/app/views/pages/show.html.erb#L22-L29。克隆仓库后即可启动git clone https://gitcode.com/gh_mirrors/bh/bh cd bh bin/setup rails s打开localhost:3000就能看到全部组件同屏渲染?flash1还能追加 toast 提示。小结什么时候用哪个字段收电话号码 →phone_field格式化、键盘、校验提示一站配齐改形状只动 JS收金额 →price_field货币符号来自 I18n换语言文件就换币种收百分比 →percentage_field%恒在数字之后。三者都由 lib/bh/form_builder.rb 统一「着装」视图只声明字段种类外观、无障碍标签、浏览器提示全部由构建器负责这正是 bh「一行 Ruby零 markup」的核心理念 ✨赞分享UI库/组件【免费下载链接】bhBootstrap Helpers for Ruby项目地址https://gitcode.com/gh_mirrors/bh/bh点击查看免费下载相关推荐AlphaFold 3输入文件详解JSON格式与字段说明AlphaFold 3输入文件详解JSON格式与字段说明 在使用AlphaFold 3进行蛋白质结构预测时输入文件的正确配置是获得准确结果的关键步骤。本文将人工智能深度学习生物信息学科研MCreator 村民交易指南第二个可选价格Price 2字段详解与源码解析MCreator 村民交易指南第二个可选价格Price 2字段详解与源码解析 导读 在 MCreator 中制作自定义村民交易Villager Trad低代码代码生成桌面应用游戏开发Deep-Live-Cam 换脸模型配置完整指南inswapper 与 GFPGAN 下载放置Deep Live Cam 换脸模型配置完整指南inswapper 与 GFPGAN 下载放置 Deep Live Cam 凭一张照片即可做实时换脸的视频深度UI库/组件上一篇5秒克隆中文声线IndexTTS-2.5零样本克隆实测与效果对比下一篇老卡不慌Tesla V100 32GB 跑通 H3 的完整部署实录创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考