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
Feedback: [email protected]
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 %>
Split button dropdown
<%= 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
Default navbar
<%= 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 %>
Inverted navbar
<%= navbar inverse: true do |nav| %>
...
<% end %>
Breadcrumbs
/app/controllers/application_controller.rb
:
class ApplicationController < ActionController::Base
:root # root_path will be used as url
end
/app/controllers/examples_controller.rb
:
class ExamplesController < ApplicationController
:index, :examples_path
def edit
@example = Example.find params[:id]
@example # @example.to_s as name, example_path(@example) as url
: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
<%= 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 with footer
<%= 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
Page header helper
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
In action of some controller, for example:
...
@title = 'Some custom text'
...
Change log
v1.3.4 - Replace '«' and '»' to html equivalent v1.3.3 - Available manually set required option for form controls v1.3.2 - Added required labels v1.3.1 - Added page_title helper v1.2.1 - Fix trouble with disabling create button in resource table v1.2.0 - Added check_box for form_group v1.1.0 - Added bootstrap panel helper