twitter-bootstrap is pluggable css suit provided by twitter.
To know more about how to get started on it click here.
Below post will help you out in getting started bootstrap css with rails app. One need to add below files to helpers directory.
MainForm can be used as base version of form builder and can be overriden for its subsequent use inside other custom form builders.
- Main Form
</div></div><div data-line='2' class='code-highlight-row numbered'><div class='code-highlight-line'>class MainForm < ActionView::Helpers::FormBuilder # NestedForm::Builder
</div></div><div data-line='3' class='code-highlight-row numbered'><div class='code-highlight-line'> CSS = {
</div></div><div data-line='4' class='code-highlight-row numbered'><div class='code-highlight-line'> :label => 'label-control',
</div></div><div data-line='5' class='code-highlight-row numbered'><div class='code-highlight-line'> :hint => 'hint',
</div></div><div data-line='6' class='code-highlight-row numbered'><div class='code-highlight-line'> :hint_ptr => 'hint-pointer',
</div></div><div data-line='7' class='code-highlight-row numbered'><div class='code-highlight-line'> :error => 'help-inline',
</div></div><div data-line='8' class='code-highlight-row numbered'><div class='code-highlight-line'> :field_error => 'error',
</div></div><div data-line='9' class='code-highlight-row numbered'><div class='code-highlight-line'> :main_class => 'clearfix'
</div></div><div data-line='10' class='code-highlight-row numbered'><div class='code-highlight-line'> }
</div></div><div data-line='11' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='12' class='code-highlight-row numbered'><div class='code-highlight-line'> FIELDS = %w(radio_button check_box text_field text_area password_field select file_field collection_select email_field date_select)
</div></div><div data-line='13' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='14' class='code-highlight-row numbered'><div class='code-highlight-line'> def main_class(error=nil)
</div></div><div data-line='15' class='code-highlight-row numbered'><div class='code-highlight-line'> return CSS[:main_class] unless error
</div></div><div data-line='16' class='code-highlight-row numbered'><div class='code-highlight-line'> [CSS[:main_class], CSS[:field_error]].join(' ')
</div></div><div data-line='17' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='18' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='19' class='code-highlight-row numbered'><div class='code-highlight-line'> def required(name)
</div></div><div data-line='20' class='code-highlight-row numbered'><div class='code-highlight-line'> object.class.validators_on(name).map(&:class).include?(ActiveModel::Validations::PresenceValidator) rescue nil
</div></div><div data-line='21' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='22' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='23' class='code-highlight-row numbered'><div class='code-highlight-line'> def cancel(options={})
</div></div><div data-line='24' class='code-highlight-row numbered'><div class='code-highlight-line'> link = options.fetch(:return, "/")
</div></div><div data-line='25' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.content_tag(:a, "Cancel", :href => link, :class => "btn_form button np_cancel_btn #{options[:class]}")
</div></div><div data-line='26' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='27' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='28' class='code-highlight-row numbered'><div class='code-highlight-line'> def submit(value="Save", options={})
</div></div><div data-line='29' class='code-highlight-row numbered'><div class='code-highlight-line'> options[:class] = "send_form_btn #{options[:class]}"
</div></div><div data-line='30' class='code-highlight-row numbered'><div class='code-highlight-line'> super
</div></div><div data-line='31' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='32' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='33' class='code-highlight-row numbered'><div class='code-highlight-line'> def label_class
</div></div><div data-line='34' class='code-highlight-row numbered'><div class='code-highlight-line'> {:class => CSS[:label]}
</div></div><div data-line='35' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='36' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='37' class='code-highlight-row numbered'><div class='code-highlight-line'> def label_tag(attribute, arg)
</div></div><div data-line='38' class='code-highlight-row numbered'><div class='code-highlight-line'> # Incase its a mandatory field, the '*' is added to the field.
</div></div><div data-line='39' class='code-highlight-row numbered'><div class='code-highlight-line'> txt = arg[:label] && arg[:label].to_s || attribute.to_s.titleize
</div></div><div data-line='40' class='code-highlight-row numbered'><div class='code-highlight-line'> txt<< '*' if(arg[:required] || required(attribute)) && arg[:required] != false
</div></div><div data-line='41' class='code-highlight-row numbered'><div class='code-highlight-line'> label(attribute, txt, label_class)
</div></div><div data-line='42' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='43' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='44' class='code-highlight-row numbered'><div class='code-highlight-line'> def error_tag(method_name, attribute)
</div></div><div data-line='45' class='code-highlight-row numbered'><div class='code-highlight-line'> errs = field_error(method_name, attribute)
</div></div><div data-line='46' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.content_tag(:span, errs.first, :class => CSS[:error]) if errs.present?
</div></div><div data-line='47' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='48' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='49' class='code-highlight-row numbered'><div class='code-highlight-line'> def field_error(method_name, attribute)
</div></div><div data-line='50' class='code-highlight-row numbered'><div class='code-highlight-line'> return if @object && @object.errors.blank?
</div></div><div data-line='51' class='code-highlight-row numbered'><div class='code-highlight-line'> return @object.errors[attribute] if method_name != 'file_field'
</div></div><div data-line='52' class='code-highlight-row numbered'><div class='code-highlight-line'> @object.errors["#{attribute.to_s}_file_name"] | @object.errors["#{attribute.to_s}_file_size"] | @object.errors["#{attribute.to_s}_content_type"]
</div></div><div data-line='53' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='54' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='55' class='code-highlight-row numbered'><div class='code-highlight-line'> def hint_tag(txt)
</div></div><div data-line='56' class='code-highlight-row numbered'><div class='code-highlight-line'> hintPtr = @template.content_tag(:span, '', :class => CSS[:hint_ptr])
</div></div><div data-line='57' class='code-highlight-row numbered'><div class='code-highlight-line'> hintT = @template.content_tag(:span, txt + hintPtr, {:class => CSS[:hint]}, false)
</div></div><div data-line='58' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='59' class='code-highlight-row numbered'><div class='code-highlight-line'> </div></div><div data-line='60' class='code-highlight-row numbered'><div class='code-highlight-line'> def spinner_tag
</div></div><div data-line='61' class='code-highlight-row numbered'><div class='code-highlight-line'> @template.image_tag('spinner.gif', :class => :spinner,:id => :spinner)
</div></div><div data-line='62' class='code-highlight-row numbered'><div class='code-highlight-line'> end
</div></div><div data-line='63' class='code-highlight-row numbered'><div class='code-highlight-line'>end</div></div></pre></div></figure>
ZeroForm is custom form builder which is inherited from main_form
and its going to be actually used inside forms.
Feel free to make custom form related changes inside this
In order to use Nested Forms you need to extend MainForm with NestedForm Builder
Integrate NestedForm with FormBuilder
View Form