bootstrap-sass extras, idea and codes from twitter-bootstrap-rails
From version 0.0.6, only support bootstrap 3. If you want to use bootstrap 2, please use version 0.0.5.
Add this line to your application's Gemfile:
gem 'bootstrap-sass-extras'
And then execute:
$ bundle
Or install it yourself as:
$ gem install bootstrap-sass-extras
You can run following generators to get started with Twitter Bootstrap quickly.
Generate locale
Usage:
rails g bootstrap:install
Layout (generates Twitter Bootstrap compatible layout) - (Haml and Slim supported)
Usage:
rails g bootstrap:layout [LAYOUT_NAME] [*fixed or fluid]
Example of a fixed layout:
rails g bootstrap:layout application fixed
Example of a responsive layout:
rails g bootstrap:layout application fluid
Themed (generates Twitter Bootstrap compatible scaffold views.) - (Haml and Slim supported)
Usage:
rails g bootstrap:themed [RESOURCE_NAME]
Example:
rails g scaffold Post title:string description:text
rake db:migrate
rails g bootstrap:themed Posts
Notice the plural usage of the resource to generate bootstrap:themed.
Add the viewport meta helper <%= viewport_meta_tag %>
to your layout
(built-in with layout generator) to render the required meta tag for Bootstrap:
<meta content="width=device-width,initial-scale=1.0" name="viewport" />
You can change the content value by passing a hash as an argument:
<%= viewport_meta_tag(:maximum_scale => "1.0") %>
Renders:
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0" name="viewport" />
Add flash helper <%= bootstrap_flash %>
to your layout (built-in with layout generator)
You can create modals easily using the following example. The header, body, and footer all accept content_tag or plain html. The href of the button to launch the modal must match the id of the modal dialog.
<%= modal_toggle 'Modal', dialog: '#modal'%>
<%= modal_dialog :id => "modal",
:header => { :show_close => true, :title => 'Modal header' },
:body => 'This is the body',
:footer => content_tag(:button, 'Save', :class => 'btn btn-primary')
%>
Notice If your application is using breadcrumbs-on-rails you will have a namespace collision with the add_breadcrumb method. You do not need to use these breadcrumb gems since this gem provides the same functionality out of the box without the additional dependency.
class ApplicationController
add_breadcrumb :index, :root_path
end
class ExamplesController < ApplicationController
add_breadcrumb :index, :examples_path
def index
end
def show
@example = Example.find params[:id]
add_breadcrumb @example.name, example_path(@example)
add_breadcrumb :show, example_path(@example)
end
end
Finally, add the <%= render_breadcrumbs %>
helper to your layout.
You can wrap the breadcrumbs in an HTML element by using the block form like this:
<%= render_breadcrumbs do |breadcrumbs| %>
<%= content_tag(:div, breadcrumbs, class: "container") %>
<% end %>
# =>
# <div class="container">
# <ol class="breadcrumb">
# <li> ... </li>
# <li class="active"> ... </li>
# </ol>
# </div>
You can also optionally specify which custom view partial you would like to use for rendering the breadcrumbs:
<%= render_breadcrumbs partial: 'path/to/custom/breadcrumbs' %>
There are also a few interface methods available for working with the internal breadcrumbs hashes. The following methods are available in controllers and views.
# Given previously added breadcrumbs:
breadcrumbs?
# => true
breadcrumb_names
# => ["example", "show"]
The following method is available to controllers only.
clear_breadcrumbs
# => nil
To render the Bootstrap example:
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="/">Home</a></li>
<li role="presentation"><a href="/profile">Profile</a></li>
<li role="presentation"><a href="/messages">Messages</a></li>
</ul>
In your views:
<%= nav do %>
<%= nav_to('Home', root_path) %>
<%= nav_to(profile_path) do %>
Profile
<% end %>
<%= nav_to('Messages', controller: users, action: :messages) %>
<%= nav_to('Forced active state', some_path, active: true) %>
<% end %>
The tabs
helper declares that a tab component is being used. Alternatively, the pills
helper can
be used in the same manner. Other classes can be specified in the class
hash argument, the nav
class need not be specified.
The nav_to
helper accepts the same methods that the link_to
helper accepts, but also
automatically applies the active
class to the active link.
<%= glyph(:star) %>
# => <span class="glyphicon glyphicon-star"></span>
<%= glyph(:star, :paperclip) %>
# => <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-paperclip"></span>
<%= badge(2) %>
# => <span class="badge">2</span>
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request