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。一種方法是使用與鏈輪配合使用的寶石。為此，在不使用--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_sefield、radio_button、rich_text_area、選擇、提交、time_select、time_zSlect

以下小節描述了不在例外清單中的表單助理選項：

輸入元件/控件

若要指定產生的輸入標記的類，請使用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

Sunamu

SmartTube

wp functions

waymo open dataset

slugify