Skip to content

Latest commit

 

History

History
281 lines (203 loc) · 6.78 KB

README.md

File metadata and controls

281 lines (203 loc) · 6.78 KB
Raw

Build Status

BootstrapForm

BootstrapForm is a form builder that makes it super easy to integrate Twitter Bootstrap-style forms into your Rails App.

Requirements

  • Ruby 1.9+
  • Rails 3, 4
  • Twitter Bootstrap 3.0+

Installation

Add it to your Gemfile:

gem 'bootstrap_form'

Then:

bundle

Rails 3

Add this line to app/assets/stylesheets/application.css.scss:

/*
 *= require bootstrap_form
*/

Usage

To get started, just use the BootstrapForm form helper. Here's an example:

<%= bootstrap_form_for(@user) do |f| %>
  <%= f.text_field :name %>
  <%= f.email_field :email %>
  <%= f.password_field :password %>
  <%= f.submit "Create My Account" %>
<% end %>

Form Helpers

This gem wraps the following Rails form helpers:

  • text_field
  • password_field
  • text_area
  • file_field
  • number_field
  • email_field
  • telephone_field / phone_field
  • url_field
  • select
  • collection_select
  • date_select
  • time_select
  • datetime_select
  • check_box
  • radio_button

Default Form Style

By default, your forms will stack labels on top of controls and your controls will grow to 100% of the available width.

Inline Forms

To use a inline-style form, use the style: :inline option. To hide labels, use the sr-only class, which keeps your forms accessible for those using Screen Readers.

<%= bootstrap_form_for(@user, style: :inline) do |f| %>
  <%= f.email_field :email, label_class: "sr-only" %>
  <%= f.password_field :password, label_class: "sr-only" %>
  <%= f.check_box :terms, label: "Remember Me" %>
  <%= f.submit "Create My Account" %>
<% end %>

Horizontal Forms

To use a horizontal-style form with labels to the left of the inputs, use the style: :horizontal option. You will need to specify both label and control widths.

<%= bootstrap_form_for(@user, style: horizontal) do |f| %>
  <%= f.email_field :email, label_class: "col-sm-2", wrap_control: "col-sm-10" %>
  <%= f.password_field :password, label_class: "col-sm-2", wrap_control: "col-sm-10" %>

  <%= f.form_group nil, wrap_content: "col-sm-offset-2 col-sm-10" do %>
    <%= f.submit "Create My Account" %>
  <% end %>
<% end %>

Code Triage page

http://www.codetriage.com/potenza/bootstrap_form

Contributors

https://github.com/potenza/bootstrap_form/graphs/contributors

License

MIT License. Copyright 2012-2013 Stephen Potenza (https://github.com/potenza)