Bootstrap::Sass::Extras

bootstrap-sass extras, idea and codes from twitter-bootstrap-rails

Note

From version 0.0.6, only support bootstrap 3. If you want to use bootstrap 2, please use version 0.0.5.

Installation

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

Generating locale, layouts and views

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.

Using Helpers

Viewport Meta Helper

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" />

Flash helper

Add flash helper <%= bootstrap_flash %> to your layout (built-in with layout generator)

Modal Helper

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')
%>

Breadcrumbs Helpers

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

Nav Helper

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 Helper

<%= glyph(:star) %>
# => <span class="glyphicon glyphicon-star"></span>

<%= glyph(:star, :paperclip) %>
# => <span class="glyphicon glyphicon-star"></span><span class="glyphicon glyphicon-paperclip"></span>

Badge Helper

<%= badge(2) %>
# => <span class="badge">2</span>

Contributing

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request