bootstrap_form 다운로드 - bootstrap_form 소스 코드 다운로드

bootstrap_form

bootstrap_form 은 Bootstrap v5 스타일 양식을 Rails 애플리케이션에 매우 쉽게 통합할 수 있게 해주는 Rails 양식 빌더입니다. Rails 양식 도우미를 보강하는 양식 도우미를 제공합니다. bootstrap_forms 의 양식 도우미는 양식 필드와 해당 레이블, 적절한 부트스트랩 표시에 필요한 모든 부트스트랩 마크업을 생성합니다. bootstrap_form 또한 다음을 제공합니다:

기본적으로 해당 필드 아래에 유효성 검사 오류 메시지가 표시됩니다. 라벨 뒤에 오류 메시지를 넣거나 bootstrap_form 의 유효성 검사 오류 처리를 끄고 직접 수행할 수도 있습니다. 이는 Rails에서 생성된 유효성 검사 메시지에 적용됩니다. HTML 5 클라이언트 측 유효성 검사와 Rails 유효성 검사는 실제로 함께 잘 작동하지 않습니다. 과제와 일부 솔루션에 대한 토론은 여기에 있습니다.
필수 필드의 required 속성에 대한 자동 마크업입니다.
필드에 도움말 텍스트를 일관되게 표시하는 쉬운 방법입니다.
원하는 경우 Bootstrap 가로 형식(기존 데스크톱 응용 프로그램과 같이 해당 필드 왼쪽에 레이블)에 대한 마크업입니다.
생성된 마크업을 수정하거나 확대할 수 있는 다양한 옵션.
bootstrap_form 할 수 없는 작업을 수행해야 하는 경우 Rails 양식 도우미로 탈출하는 방법입니다.

bootstrap_form 제공하는 다른 좋은 기능은 다음과 같습니다.

.erb 파일의 코드 양을 줄입니다.
시작하기 위해 Bootstrap 양식 마크업의 모든 규칙을 배울 필요가 없기 때문에 Bootstrap을 사용하면 더 빠르게 진행할 수 있습니다.
입력하는 횟수가 줄어들기 때문에 오류가 줄어듭니다.
Bootstrap 마크업과 혼합되지 않기 때문에 양식의 논리를 더 쉽게 볼 수 있습니다.

bootstrap_form 표준 Rails 양식 헬퍼처럼 작동하며 이 README에서는 작동 방식을 알고 있다고 가정합니다. 뷰 파일에서 bootstrap_form_with , bootstrap_form_for 또는 bootstrap_form_tag 중 하나로 양식을 시작합니다. 표준 Rails 도우미 대신 bootstrap_form 도우미를 호출하는 양식 작성기가 제공됩니다. 보기 파일에서 해당 양식 작성기를 사용하여 하나 이상의 양식 필드를 렌더링합니다.

요구사항

bootstrap_form 최소한 현재 지원되는 Ruby 및 Rails 버전을 지원합니다.

루비 3.0+ (https://www.ruby-lang.org/en/downloads/branches/)
레일스 6.1+ (https://guides.rubyonrails.org/maintenance_policy.html)
부트스트랩 5.0+

설치

Bootstrap 5를 설치합니다. Rails 애플리케이션에서 사용하는 자산 파이프라인에 따라 이를 수행하는 방법은 다양합니다. 한 가지 방법은 Sprockets과 함께 작동하는 gem을 사용하는 것입니다. 그렇게 하려면 --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

시작하려면 Rails form_for 도우미 대신 bootstrap_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

시작하려면 form_with 대신 bootstrap_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

중첩 없이 다른 객체에 대한 필드를 추가하는 것은 Rails에서 수행되는 것과 동일한 방식으로 bootstrap_fields_for 및 bootstrap_fields 도우미를 사용하여 수행할 수 있습니다.

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

예외 목록에 없는 양식 도우미에 대한 옵션은 다음 하위 섹션에 설명되어 있습니다.

라벨

필드의 레이블 텍스트를 지정하려면 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 >

이 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

요구사항

설치

용법

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