ดาวน์โหลด bootstrap_form - ดาวน์โหลด bootstrap

bootstrap_form

bootstrap_form เป็นตัวสร้างแบบฟอร์ม Rails ที่ทำให้การรวมแบบฟอร์มสไตล์ Bootstrap v5 เข้ากับแอปพลิเคชัน Rails ของคุณเป็นเรื่องง่ายมาก มีตัวช่วยแบบฟอร์มที่เพิ่มตัวช่วยแบบฟอร์ม Rails ตัวช่วยแบบฟอร์มของ bootstrap_forms จะสร้างฟิลด์แบบฟอร์มและเลเบลและมาร์กอัป Bootstrap ทั้งหมดที่จำเป็นสำหรับการแสดง Bootstrap ที่เหมาะสม bootstrap_form ยังมี:

ข้อความแสดงข้อผิดพลาดในการตรวจสอบด้านล่างฟิลด์ที่เกี่ยวข้องตามค่าเริ่มต้น คุณยังสามารถใส่ข้อความแสดงข้อผิดพลาดไว้หลังป้ายกำกับ หรือปิดการจัดการข้อผิดพลาดในการตรวจสอบความถูกต้องของ bootstrap_form และดำเนินการด้วยตนเอง โปรดทราบว่าสิ่งนี้ใช้กับข้อความตรวจสอบความถูกต้องที่สร้างโดย Rails การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์ HTML 5 และการตรวจสอบความถูกต้องของ Rails ใช้งานร่วมกันได้ไม่ดีนัก การอภิปรายเกี่ยวกับความท้าทายและวิธีแก้ปัญหาบางอย่างอยู่ที่นี่
มาร์กอัปอัตโนมัติสำหรับแอตทริบิวต์ required ในฟิลด์ที่ต้องระบุ
วิธีง่ายๆ ในการแสดงข้อความช่วยเหลือในช่องต่างๆ อย่างสม่ำเสมอ
มาร์กอัปสำหรับรูปแบบแนวนอน Bootstrap (ป้ายกำกับทางด้านซ้ายของฟิลด์ เช่นเดียวกับแอปพลิเคชันเดสก์ท็อปทั่วไป) หากนั่นคือสิ่งที่คุณต้องการ
ตัวเลือกมากมายในการแก้ไขหรือเพิ่มมาร์กอัปที่สร้างขึ้น
วิธีหลบหนีไปยังผู้ช่วยแบบฟอร์ม Rails หากคุณต้องการทำสิ่งที่ bootstrap_form ไม่สามารถทำได้

สิ่งดีๆ อื่นๆ ที่ bootstrap_form ทำเพื่อคุณคือ:

ลดจำนวนโค้ดในไฟล์ .erb ของคุณ
ช่วยให้คุณก้าวไปได้เร็วขึ้นด้วย Bootstrap เพราะคุณไม่จำเป็นต้องเรียนรู้กฎทั้งหมดของมาร์กอัปแบบฟอร์ม Bootstrap เพื่อเริ่มต้น
ลดข้อผิดพลาดเนื่องจากคุณพิมพ์น้อยลง
ทำให้ง่ายต่อการดูตรรกะของแบบฟอร์ม เนื่องจากไม่ได้ปะปนกับมาร์กอัป Bootstrap

bootstrap_form ทำงานเหมือนกับตัวช่วยฟอร์ม Rails มาตรฐาน และ README นี้ถือว่าคุณรู้วิธีการทำงาน คุณเริ่มต้นแบบฟอร์มด้วย bootstrap_form_with , bootstrap_form_for หรือ bootstrap_form_tag อย่างใดอย่างหนึ่งในไฟล์มุมมอง คุณได้รับตัวสร้างแบบฟอร์มที่เรียกตัวช่วย bootstrap_form แทนที่จะเป็นตัวช่วย Rails มาตรฐาน คุณใช้ตัวสร้างแบบฟอร์มนั้นในไฟล์มุมมองเพื่อแสดงผลฟิลด์ฟอร์มตั้งแต่หนึ่งฟิลด์ขึ้นไป

ความต้องการ

bootstrap_form รองรับ Ruby และ Rails เวอร์ชันที่รองรับในปัจจุบันเป็นอย่างน้อย:

รูบี้ 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 ของคุณ วิธีหนึ่งคือการใช้อัญมณีที่ใช้งานได้กับ Sprockets ในการทำเช่นนั้น ในแอปพลิเคชัน Rails 7.0+ ใหม่ที่สร้างขึ้น โดยไม่มี ตัวเลือก --webpacker ให้เพิ่ม bootstrap gem ลงใน Gemfile ของคุณ :

 gem "bootstrap" , "~> 5.0"

และปฏิบัติตามคำแนะนำที่เหลือในคู่มือการติดตั้ง bootstrap อย่างเป็นทางการสำหรับการตั้งค่า application.scss และ application.js

เพิ่ม bootstrap_form gem ให้กับ Gemfile ของคุณ :

 gem "bootstrap_form" , "~> 5.4"

แล้ว:

bundle install

ขึ้นอยู่กับตัวประมวลผลล่วงหน้า CSS ที่คุณใช้ การเพิ่มสไตล์ของฟอร์มบูตสแตรปจะแตกต่างกันเล็กน้อย หากคุณใช้ Rails ในโหมดเริ่มต้นโดยไม่มีตัวประมวลผลล่วงหน้า คุณจะต้องเพิ่มบรรทัดต่อไปนี้ในไฟล์ application.css ของคุณ:

 * = require rails_bootstrap_forms

หากคุณปฏิบัติตามคู่มือการติดตั้ง bootstrap อย่างเป็นทางการ คุณอาจเปลี่ยนมาใช้ SCSS ในกรณีนี้ ให้เพิ่มบรรทัดต่อไปนี้ใน application.scss ของคุณ :

 @import " rails_bootstrap_forms.css " ;

การใช้งาน

bootstrap_form_for

ในการเริ่มต้น ให้ใช้ bootstrap_form_for helper แทน Rails form_for helper นี่คือตัวอย่าง:

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 helper แทน 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 รองรับทั้ง model: และ url: use cases ใน form_with

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 แต่สร้างแอตทริบิวต์ `role="form"` เช่น `bootstrap_form` เวอร์ชัน 3 และ 4

ตัวอย่าง:

 # 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

ตามค่าเริ่มต้น ตัวช่วยจะสร้างแท็ก label และ input , select หรือแท็ก textarea โดยการเรียกตัวช่วย label Rails จากนั้นจึงเรียกตัวช่วย Rails ที่มีชื่อเดียวกันกับตัวช่วย bootstrap_form

ตัวช่วย 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

ตัวเลือกสำหรับตัวช่วยแบบฟอร์มที่ไม่อยู่ในรายการข้อยกเว้นจะอธิบายไว้ในส่วนย่อยต่อไปนี้:

ป้ายกำกับ

ใช้ตัวเลือก label หากคุณต้องการระบุข้อความป้ายกำกับของฟิลด์:

Example 4

 <%= f.password_field :password_confirmation, label: "Confirm Password" %>

สิ่งนี้สร้าง:

 < div class =" mb-3 " >
  < label class =" form-label " for =" user_password_confirmation " > Confirm Password </ label >
  < input class =" form-control " id =" user_password_confirmation " name =" user[password_confirmation] " type =" password " >
</ div >

หากต้องการซ่อนป้ายกำกับ ให้ใช้ตัวเลือก hide_label: true ซึ่งจะเป็นการเพิ่มคลาส visually-hidden ซึ่งช่วยให้ผู้ที่ใช้โปรแกรมอ่านหน้าจอสามารถเข้าถึงป้ายกำกับของคุณได้

Example 5

 <%= f.text_area :comment, hide_label: true, placeholder: "Leave a comment..." %>

สิ่งนี้สร้าง:

 < div class =" mb-3 " >
  < label class =" visually-hidden " for =" user_comment " > Comment </ label >
  < textarea class =" form-control " id =" user_comment " name =" user[comment] " placeholder =" Leave a comment... " >
</ textarea >
</ div >

หากต้องการเพิ่มคลาสที่กำหนดเองให้กับป้ายกำกับของฟิลด์ ให้ทำดังนี้

Example 6

 <%= f.email_field :email, label_class: "custom-class" %>

สิ่งนี้สร้าง:

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

หรือคุณสามารถเพิ่มป้ายกำกับเป็นตัวยึดตำแหน่งอินพุตแทนได้ (ซึ่งจะซ่อนป้ายกำกับโดยอัตโนมัติ):

Example 7

 <%= f.email_field :email, value: '', label_as_placeholder: true %>

สิ่งนี้สร้าง:

 < div class =" mb-3 " >
  < label class =" visually-hidden required " for =" user_email " > Email </ label >
  < input class =" form-control " id =" user_email " name =" user[email] " placeholder =" Email " required =" required " type =" email " value ="" >
</ div >

องค์ประกอบอินพุต / การควบคุม

หากต้องการระบุคลาสของแท็กอินพุตที่สร้างขึ้น ให้ใช้ตัวเลือก 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 >

อัญมณีนี้ยังทราบถึงข้อความช่วยเหลือในไฟล์การแปลโลแคล (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

ความต้องการ

การติดตั้ง

การใช้งาน

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

เกมส์บูทสแตรปไอส์แลนด์

คลาสแบบฟอร์ม Zebra_Form

chat.petals.dev

GPT Prompt Templates

GPTyped

waymo open dataset

Sunamu

SmartTube

wp functions

waymo open dataset

slugify