Twitter Bootstrap For Rails

This gem allow you to use Twitter Bootstrap 3 in ruby on rails application.

Current using version of Twitter Bootstrap is 3.0.2

Installing the gem

Inset to the gemfile of your RoR application:

gem 'twitter-bootstrap-for-rails'

Run bundle install:

Include stylesheets and javascript of Twitter Bootstrap in you application.css and application.js.

assets/stylesheets/application.css:

/*
*= require bootstrap
*/

assets/javascripts/application.js:

//
//= require bootstrap
//

If you want use minified script and stylesheets, replase require bootstrap on require bootstrap.min in application.css and application.js files.

Glyphicons

Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you to include a link back to Glyphicons whenever possible.

Using

<%= glyph :search %>

Form group

Basic usage

<%= form_for @o do |f| %>
  <%= form_group class: 'has-error' do %>
    <%= f.label :some_field %>
    <%= f.text_field :some_field %>
  <% end %>
<% end %>

Usage as form builder helper

<%= form_for @o do |f| %>
  <%= f.form_group class: :some_field do |fg| %>
    <%= fg.label %>
    <%= fg.text_field %>
  <% end %>
<% end %>

Submit button

<%= form_for @o do |f| %>
    <%= f.form_group do |fg| %>
      <%= fg.submit %>
    <% end %>
<% end %>

Check boxes

<%= form_for @o do |f| %>
  <%= f.form_group :boolean_field do |fg| %>
    <%= fg.check_box %>
  <% end %>
<% end %>

<%= form_for @o do |f| %>
  <%= f.form_group :boolean_field do |fg| %>
    <%= fg.check_box 'Custom text for label' %>
  <% end %>
<% end %>

Disable render validation error

Rendering of validation error for field disabled for .form-inline and .form-horizontal.

Use validation_error method of form_group for rendering validation error in needed place.

<%= form_for @o, html: { class: 'form-horizontal' } do |f| %>
  <%= form_group :field do |fg| %>
    <%= fg.label class: 'col-md-2' %>
    <div class="col-md-10">
      <%= fg.text_field %>
      <%= fg.validation_error %>
    </div>
  <% end %>
<% end %>

If you want disable rendering validation error for vertical form, use render_validation_error option with value false in form_for method:

<%= form_form @o, render_validation_error: false do |f| %>
  ...
<% end %>

If you want disable rendering validation error for specific form group, use render_validation_error option with value false in form_group method:

<%= form_for @o do |f| %>
  <%= form_group :field, render_validation_error: false %>
    ...
  <% end %>
<% end %>

Static control

<%= form_for @o, html: { class: 'form-horizontal' } do |f| %>
  <%= form_group :field do |fg| %>
    <%= fg.label class="col-md-2" %>

    <div class="col-md-10">
      <%= fg.static %>
      <%= fg.validation_error %>
    </div>
  <% end %>
<% end %>

Placeholders and Titles for form controllers

Gem using I18n API for set placeholders and titles in form controls.

en:
  activerecord:
    placeholders:
      model_name:
        field_name: 'Placeholder text'

You make use globall placeholder keys. Just use option placeholder with specific key: f.text_field :x, placeholder: :some_symbol and add in you l10n file:

en:
  activerecord:
    placeholders:
      some_symbol: 'Some text'

You may use the placeholder option with string. Use empty string for disabling placeholder.

<%= f.text_field :x, placeholder: '' %>

Required fields (and labels for him)

app/models/example_model.rb:

class ExampleModel < ActiveRecord::Base
    validates example_field, presence: true
end

app/controllers/example_controller.rb:

class ExampleController < ApplicationController
  def new
    @o = ExampleModel.new
  end
end

app/views/example/new.html.erb:

<%= form_for @o do |f| %>
  <%= f.label :example_field %>
  <%= f.text_field :example_field %>
  <%= f.text_field :example_field required = false %>
<% end %>

http://localhost:3000/examples/new:

<form accept-charset="UTF-8" action="/example" id="new_example_model" method="post" role="form">
  <label class="required-label" for="example_model_example_field">Example field</label>
  <input id="example_model_example_field" name="example_model[example_field]" required="required" type="text" />
  <input id="example_model_example_field" name="example_model[example_field]" type="text" />
</form>

Quick creating tables for collection of models

<%= resource_table Model, @collection, [field1, field2, [field3, field_for_field3]] %>

Helper resource_table creating table for collection of models.

The first parameter is the model class

The second parameter is the collection of models.

The third parameter is the collection of model fields or methods. Nesting arrays using for sequience invoking of methods. For example, [[:field, :subdield, :method]] invoke item.field.subfield.method.

Table including buttons for actions with model. For control of rendering this buttons, use boolean options:

can_remove;
can_show;
can_create;
can_edit.

<%= resource_table Model, @collection, [field1, field2, [field3, field_for_field3]], can_remove: false %>

Remove confirmation

User I18n API for set default confirmation text:

en:
  bootstrap:
    resource_table:
      remove_confirmation: 'Your remove confirmation text`

Use custom string with option remove_confirmation:

<%= resource_table Model, @collection, [fields], remove_confirmation: 'Your remove confrimation' %>

Use string for eval:

<%= resource_table Model, @collection, [fields], remove_confirmation: '"Remove #{item.name}?"' %>

User Proc:

<%= resource_table Model, @collection, [fields], remove_confirmation: Proc.new {|item| "Remove #{item.name}?"} %>

Button dropdowns

<%= dropdown 'Actions' do |dd| %>
  <%= dd.item 'Home', root_path # Menu item with link %>
  <%= dd.item 'Disabled', class: 'disabled' # disabled menu item, without link %>
  <%= dd.divider # Menu divider %>
  <%= dd.header 'Text' # Menu header %>
<% end %>

Customizing

Dropup

<%= dropdown 'Actions', drop_direction: :up do |dd| %>
  ...
<% end %>

<%= dropdown 'Actions', button: {split: true} do |dd| %>
  ...
<% end %>

Customize buttons

<%= dropdown 'Actions', button: {class: 'btn-primary', split: {class: 'btn-default'}} do |dd| %>
  ...
<% end %>

Bootstrap confirmation dialog

app/assets/javascripts/application.js:

//
//= require bootstrap.min
//= require bs-confirmation-dialog
//

I18n

en:
  bootstrap:
    confirm_dialog_title: 'Confirm action'
    confirm_button: 'Yes'
    dismiss_button: 'No'

<%= navbar brand: 'Brand' do |nav| %>
  <%= nav.group do |ng| %>
    <%= ng.item 'Link', root_path %>
    <%= ng.item 'Link', '#' %>

    <%= ng.dropdown 'Dropdown' do |dd| %>
      <%= dd.item 'Action', '#' %>
      <%= dd.item 'Another action', '#' %>
      <%= dd.item 'Something else here', '#' %>
      <%= dd.divider %>
      <%= dd.item 'Separated link', '#' %>
      <%= dd.divider %>
      <%= dd.item 'One more separated link', '#' %>
    <% end %>
  <% end %>

  <form class="navbar-form navbar-left" role="search">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

  <%= nav.group pull: :right do |ng| %>
    <%= ng.item 'Link', '#' %>

    <%= ng.dropdown 'Dropdown' do |dd| %>
      <%= dd.item 'Action', '#' %>
      <%= dd.item 'Another action', '#' %>
      <%= dd.item 'Something else here', '#' %>
      <%= dd.divider %>
      <%= dd.item 'Separated link', '#' %>
    <% end %>
  <% end %>
<% end %>

Buttons

<%= navbar do |nav| %>
  <%= nav.button 'Sign in' %>
<% end %>

Text

<%= navbar do |nav| %>
  <%= nav.text 'Signed in as Mark Otto' %>
<% end %>

Non-nav links

<%= navbar do |nav| %>
  <%= nav.text "Signed in as #{nav.link 'Mark Otto', '#'}".html_safe, pull: :right %>
<% end %>

Fixed to top

<%= navbar fixed: :top do |nav| %>
  ...
<% end %>

Fixed to bottom

<%= navbar fixed: :bottom do |nav| %>
  ...
<% end %>

Static top

<%= navbar static: :top do |nav| %>
  ...
<% end %>

<%= navbar inverse: true do |nav| %>
  ...
<% end %>

Breadcrumbs

/app/controllers/application_controller.rb:

class ApplicationController < ActionController::Base
    add_breadcrumb :root # root_path will be used as url
end

/app/controllers/examples_controller.rb:

class ExamplesController < ApplicationController
    add_breadcrumb :index, :examples_path

    def edit
    @example = Example.find params[:id]
    add_breadcrumb @example # @example.to_s as name, example_path(@example) as url
    add_breadcrumb :edit, edit_example_path(@example)
  end
end

/app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...

    <%= render_breadcrumbs %>

    <%= yield %>
  </body>
</html>

/config/locales/en.yml:

en:
  breadcrumbs:
    root: 'Home'
    edit: `Edit`

    examples:
      index: 'Examples'
      edit: 'Edit example'

Pagination

Default pagination

<%= paginator @current_page, @total_pages %>

Disabled and active states

Disabled and active states set automatically

Sizing

<%= paginator @current_page, @total_pages, size: :large

<%= paginator @current_page, @total_pages, size: :small

Page param name

<%= paginator @current_page, @total_pages, param: :p

Alerts

<%= bs_alert :success, 'Message' %>

Render rules:

:success render as .alert-success;
:info render as .alert-info;
:warning render as .alert-warning;
:danger render as .alert-danger;
:notice render as .alert-success;
:alert render as .alert-danger;
another keys render as alert-info.

Flash block

<%= flash_block %>

Each flash message render as bs_alert(flash_message_key, flash_message).

<%= modal_dialog id: 'myModal',
                 header: content_tag(:h4, 'Modal dialog header'),
                 body: 'Modal body',
                 footer: 'Dialog footer' %>

Complex content

<% dialog_footer = capture do %>
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary">Save changes</button>
<% end %>

<%= modal_dialog id: 'myModal',
                 header: content_tag(:h4, 'Modal dialog header'),
                 body: 'Modal body',
                 footer: dialog_footer %>

Dismiss button

<%= modal_dialog id: 'myModal',
                 header: content_tag(:h4, 'Modal dialog header'),
                 body: 'Modal body',
                 footer: dismiss_button('Ok') %>

Panels

Basic example

<%= panel do %>
  Basic panel example
<% end %>

Panel with heading

<%= panel header: 'Panel heading without title' do %>
  Panel content
<% end %>

<%= panel title: {level: 3, content: 'Panel title'} do %>
  Panel content
<% end %>

<%= panel footer: 'Panel footer' do %>
  Panel content
<% end %>

Contextual alternatives

<%= panel header: 'Panel header', context: :primary do %>
  Panel content
<% end %>

<%= panel header: 'Panel header', context: :info do %>
  Panel content
<% end %>

<%= panel header: 'Panel header', context: :success do %>
  Panel content
<% end %>

<%= panel header: 'Panel header', context: :warning do %>
  Panel content
<% end %>

<%= panel header: 'Panel header', context: :danger do %>
  Panel content
<% end %>

Global settings

config/initializers/bootstrap.rb:

Twitter::Bootstrap::For::Rails.setup do |config|
  # Globally disable or enable rendering validation errors inside form groups
  config.render_validation_error = true
end

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <%= page_title @title %>
    <!-- Another content for head section -->
  </head>

  <body>
    <%= yield :title %>
    <!-- Another content for body section -->
  </body>
</html>

Text fo title get from page_titles.controller_name.action_name of you i18n hash.

User another key for page title

In action of some controller, for example:

...
  @title = :i_found_it
...

Text tot title get from page_titles.controller_name.i_found_it in this case.

Custom title text