bootstrap_form下载 - bootstrap

引导程序表单

bootstrap_form是一个 Rails 表单构建器，可以非常轻松地将 Bootstrap v5 样式表单集成到 Rails 应用程序中。它提供了增强 Rails 表单助手的表单助手。 bootstrap_forms的表单助手生成表单字段及其标签以及正确 Bootstrap 显示所需的所有 Bootstrap 标记。 bootstrap_form还提供：

默认情况下，验证错误消息位于其对应的字段下方。您还可以将错误消息放在标签后面，或者关闭bootstrap_form的验证错误处理并自行执行。请注意，这适用于 Rails 生成的验证消息。 HTML 5 客户端验证和开箱即用的 Rails 验证并不能很好地协同工作。这里是对挑战和一些解决方案的讨论
自动标记必填字段上的required属性。
一种在字段上一致显示帮助文本的简单方法。
如果您想要的话，可以为 Bootstrap 水平表单进行标记（在字段左侧添加标签，就像传统的桌面应用程序一样）。
许多选项可用于修改或增强生成的标记。
如果您需要做bootstrap_form无法做的事情，这是一种转义到 Rails 表单助手的方法。

bootstrap_form为您做的其他一些好事是：

减少.erb文件中的代码量。
让您更快地使用 Bootstrap，因为您无需学习 Bootstrap 表单标记的所有规则即可开始使用。
减少错误，因为您减少了打字次数。
可以更轻松地查看表单的逻辑，因为它没有与 Bootstrap 标记混合在一起。

bootstrap_form工作方式类似于标准 Rails 表单助手，本自述文件假设您知道它们是如何工作的。您可以在视图文件中使用bootstrap_form_with 、 bootstrap_form_for或bootstrap_form_tag之一启动表单。您将获得一个调用bootstrap_form帮助程序而不是标准 Rails 帮助程序的表单生成器。您可以在视图文件中使用该表单生成器来呈现一个或多个表单字段。

要求

bootstrap_form至少支持当前支持的 Ruby 和 Rails 版本：

Ruby 3.0+ (https://www.ruby-lang.org/en/downloads/branches/)
Rails 6.1+ (https://guides.rubyonrails.org/maintenance_policy.html)
引导程序 5.0+

安装

安装 Bootstrap 5。有多种方法可以执行此操作，具体取决于您在 Rails 应用程序中使用的资产管道。一种方法是使用与链轮配合使用的宝石。为此，在不使用--webpacker选项创建的全新 Rails 7.0+ 应用程序中，将bootstrap gem 添加到Gemfile中：

 gem "bootstrap" , "~> 5.0"

并按照官方引导安装指南中的其余说明设置application.scss和application.js 。

将bootstrap_form gem 添加到您的Gemfile中：

 gem "bootstrap_form" , "~> 5.4"

然后：

bundle install

根据您使用的 CSS 预处理器，添加引导表单样式会略有不同。如果您在没有任何预处理器的情况下以默认模式使用 Rails，则必须将以下行添加到application.css文件中：

 * = require rails_bootstrap_forms

如果您遵循官方引导程序安装指南，您可能已经切换到 SCSS。在这种情况下，将以下行添加到您的application.scss中：

 @import " rails_bootstrap_forms.css " ;

用法

bootstrap_form_for

首先，使用bootstrap_form_for帮助程序代替 Rails form_for帮助程序。这是一个例子：

Example 0

 <%= bootstrap_form_for(@user) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

这会生成以下 HTML：

 < form accept-charset =" UTF-8 " action =" /users " class =" new_user " id =" new_user " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" user_password " > Password </ label >
    < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
  </ div >
  < div class =" form-check mb-3 " >
    < input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
    < input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
    < label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >

bootstrap_form_tag

如果您的表单不受模型支持，请使用bootstrap_form_tag 。此帮助器的用法与bootstrap_form_for相同，只是没有模型对象作为第一个参数传入。这是一个例子：

Example 1

 <%= bootstrap_form_tag url: '/subscribe' do |f| %>
  <%= f.email_field :email, value: '[email protected]' %>
  <%= f.submit %>
<% end %>

这会生成：

 < form accept-charset =" UTF-8 " action =" /subscribe " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label " for =" email " > Email </ label >
    < input class =" form-control " id =" email " name =" email " type =" email " value =" [email protected] " >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >

bootstrap_form_with

首先，只需使用bootstrap_form_with帮助器代替form_with 。这是一个例子：

Example 2

 <%= bootstrap_form_with(model: @user, local: true) do |f| %>
  <%= f.email_field :email %>
  <%= f.password_field :password, help: 'A good password should be at least six characters long' %>
  <%= f.check_box :remember_me %>
  <%= f.submit "Log In" %>
<% end %>

这会生成：

 < form accept-charset =" UTF-8 " action =" /users " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" user_password " > Password </ label >
    < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
    < small class =" form-text text-muted " > A good password should be at least six characters long </ small >
  </ div >
  < div class =" form-check mb-3 " >
    < input autocomplete =" off " name =" user[remember_me] " type =" hidden " value =" 0 " >
    < input class =" form-check-input " id =" user_remember_me " name =" user[remember_me] " type =" checkbox " value =" 1 " >
    < label class =" form-check-label " for =" user_remember_me " > Remember me </ label >
  </ div >
  < input class =" btn btn-secondary " data-disable-with =" Log In " name =" commit " type =" submit " value =" Log In " >
</ form >

bootstrap_form_with支持form_with中的model:和url:用例。

form_with与form_for和form_tag相比有一些重要的区别，这些区别也适用于bootstrap_form_with 。有关差异的详细总结，请访问：https://m.patrikonrails.com/rails-5-1s-form-with-vs-old-form-helpers-3a5f72a8c78a，或在 Rails 文档中。

bootstrap_fields_for 和 bootstrap_fields

可以使用bootstrap_fields_for和bootstrap_fields帮助器来为不同的对象添加字段而不需要嵌套，就像在 Rails 中一样。

Example 3

 <%= bootstrap_form_with model: @user do |f| %>
  <%= f.email_field :email %>
  <%= bootstrap_fields_for :parent do |pf| %>
    <%= pf.email_field :email, label: 'Parent email' %>
  <% end %>
  <%= bootstrap_fields @user.address do |af| %>
    <%= af.text_field :street_name %>
  <% end %>
  <%= f.primary "Save" %>
<% end %>

生成的 HTML：

 < form accept-charset =" UTF-8 " action =" /users " method =" post " >
  < div class =" mb-3 " >
    < label class =" form-label required " for =" user_email " > Email </ label >
    < input class =" form-control " id =" user_email " name =" user[email] " required =" required " type =" email " value =" [email protected] " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" parent_email " > Parent email </ label >
    < input class =" form-control " id =" parent_email " name =" parent[email] " type =" email " >
  </ div >
  < div class =" mb-3 " >
    < label class =" form-label " for =" street_name " > Street name </ label >
    < input class =" form-control " id =" street_name " name =" street_name " type =" text " >
  </ div >
  < input class =" btn btn-primary " data-disable-with =" Save " name =" commit " type =" submit " value =" Save " >
</ form >

配置

bootstrap_form可以开箱即用，无需任何配置。但是， bootstrap_form在config/initializers/bootstrap_form.rb处有一个可选配置文件，用于设置影响应用程序中所有生成的表单的选项。

当前的配置选项有：

选项	默认值	描述
`default_form_attributes`		`bootstrap_form`版本 3 和 4 向所有表单添加了 role="form" 属性。 W3C 验证器将对具有 role="form" 属性的表单发出警告。 `bootstrap_form`版本 5 默认删除此属性。将此选项设置为`{ role: "form" }`以使表单不符合 W3C，但会生成像`bootstrap_form`版本 3 和 4 一样的`role="form"`属性。

例子：

 # config/initializers/bootstrap_form.rb
BootstrapForm . configure do | c |
  c . default_form_attributes = { role : "form" } # to make forms non-compliant with W3C.
end

表单助手

bootstrap_form提供了以下 Rails 表单助手的自己版本：

 button                   email_field                               search_field
check_box                file_field                                select
collection_check_boxes   grouped_collection_select                 submit
collection_radio_buttons hidden_field (not wrapped, but supported) telephone_field
collection_select        month_field                               text_area
color_field              number_field                              text_field
date_field               password_field                            time_field
date_select              phone_field                               time_select
datetime_field           radio_button                              time_zone_select
datetime_local_field     range_field                               url_field
datetime_select          rich_text_area                            week_field

默认情况下，帮助程序通过调用 Rails label帮助程序以及与bootstrap_form帮助程序同名的 Rails 帮助程序来生成一个label标记以及一个input 、 select或textarea标记。

bootstrap_form帮助程序接受与标准 Rails 表单帮助程序相同的选项，并将这些选项传递给 Rails 帮助程序。他们还接受其他选项，如下一节所述。

表单助手选项

许多帮助者都接受相同的选择。例外情况是：

按钮、复选框、collection_check_boxes、collection_radio_buttons、collection_select、date_select、datetime_select、file_field、grouped_collection_select、hidden_field、radio_button、rich_text_area、选择、提交、time_select、time_zone_select

以下小节描述了不在例外列表中的表单助手选项：

输入元件/控件

要指定生成的输入标记的类，请使用control_class选项：

Example 8

 <%= f.text_field :email, control_class: "custom-class" %>

这会生成：

 < div class =" mb-3 " >
  < label class =" form-label required " for =" user_email " > Email </ label >
  < input class =" custom-class " id =" user_email " name =" user[email] " required =" required " type =" text " value =" [email protected] " >
</ div >

帮助文本

要添加帮助文本，请使用help选项：

Example 9

 <%= f.password_field :password, help: "Must be at least 6 characters long" %>

这会生成：

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_password " > Password </ label >
  < input class =" form-control " id =" user_password " name =" user[password] " type =" password " >
  < small class =" form-text text-muted " > Must be at least 6 characters long </ small >
</ div >

这个 gem 还知道语言环境翻译文件（i18n）中的帮助消息：

 en :
  activerecord :
    help :
      user :
        password : " A good password should be at least six characters long "

包含 HTML 的帮助翻译应遵循在名称后附加_html的约定：

 en :
  activerecord :
    help :
      user :
        password_html : " A <strong>good</strong> password should be at least six characters long "

如果您的模型名称有多个单词（例如SuperUser ），则翻译文件上的键应带有下划线（ super_user ）。

您可以通过传递help选项来覆盖特定字段的帮助翻译，或者通过传递help: false来完全关闭它们。

前置和附加输入

您可以将prepend和/或append选项传递到输入字段：

Example 10

 <%= f.text_field :price, prepend: "$", append: ".00" %>

这会生成：

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_price " > Price </ label >
  < div class =" input-group " >
    < span class =" input-group-text " > $ </ span >
    < input class =" form-control " id =" user_price " name =" user[price] " type =" text " >
    < span class =" input-group-text " > .00 </ span >
  </ div >
</ div >

如果要将多个项目附加到输入，请将它们作为数组传递：

Example 11

 <% icon = capture do %> < i class =" bi bi-currency-dollar " > </ i > <% end %>
<%= f . text_field :price , prepend : [ 'Net' , icon ] , append : [ '.00' , 'per day' ] %>

这会生成：

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_price " > Price </ label >
  < div class ="

展开

bootstrap_form

引导程序表单

要求

安装

用法

bootstrap_form_for

bootstrap_form_tag

bootstrap_form_with

bootstrap_fields_for 和 bootstrap_fields

配置

表单助手

表单助手选项

标签

输入元件/控件

帮助文本

前置和附加输入

OpenCore_NO_ACPI_Build

nspanel_pro_tools_apk

zkwork_aleo_gpu_worker

Newsletter_sign up_form

Bootstrap Island游戏

Zebra_Form表单类

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

SmartTube

Sunamu

wp functions

waymo open dataset

slugify