# Twitter Bootstrap for Rails 3.1 Asset Pipeline Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites. It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more. twitter-bootstrap-rails project integrates Bootstrap CSS toolkit for Rails 3.1 Asset Pipeline (Rails 3.2 supported) [![Build Status](https://secure.travis-ci.org/seyhunak/twitter-bootstrap-rails.png)](http://travis-ci.org/seyhunak/twitter-bootstrap-rails) [![Dependency Status](https://gemnasium.com/seyhunak/twitter-bootstrap-rails.png)](https://gemnasium.com/seyhunak/twitter-bootstrap-rails) [![Code Climate](https://codeclimate.com/badge.png)](https://github.com/seyhunak/twitter-bootstrap-rails) ## Screencasts #### Installing twitter-bootstrap-rails, generators, usage and more Screencasts provided by Railscasts (Ryan Bates) [Twitter Bootstrap Basics](http://railscasts.com/episodes/328-twitter-bootstrap-basics "Twitter Bootstrap Basics") in this episode you will learn how to include Twitter Bootstrap into Rails application with the twitter-bootstrap-rails gem. [More on Twitter Bootstrap](http://railscasts.com/episodes/329-more-on-twitter-bootstrap "More on Twitter Bootstrap") in this episode continues on the Twitter Bootstrap project showing how to display flash messages, add form validations with SimpleForm, customize layout with variables, and switch to using Sass. (Note: This episode is pro episode) ## Installing Gem Include the [Twitter Bootstrap Rails gem](http://rubygems.org/gems/twitter-bootstrap-rails) in Gemfile to install it from [RubyGems.org](http://rubygems.org); ```ruby gem "twitter-bootstrap-rails", :group => :assets ``` or you can install from latest build; ```ruby gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git' ``` You can run bundle from command line bundle install ## Installing to App (using Generators) You can run following generators to get started with Twitter Bootstrap quickly. Install (requires directives to Asset pipeline.) 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: rails g bootstrap:layout application fixed 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 ## Using with Less Bootstrap was built with Preboot, an open-source pack of mixins and variables to be used in conjunction with Less, a CSS preprocessor for faster and easier web development. ## Using stylesheets with Less You have to require Bootstrap LESS (bootstrap_and_overrides.css.less) in your application.css ```css /* *= require bootstrap_and_overrides */ /* Your stylesheets goes here... */ ``` If you'd like to alter Bootstrap's own variables, or define your LESS styles inheriting Bootstrap's mixins, you can do so inside bootstrap_and_overrides.css.less: ```css @linkColor: #ff0000; ``` ## Using Javascripts You have to require Bootstrap JS (bootstrap.js) in your application.js ```js //= require twitter/bootstrap $(document).ready(function(){ /* Your javascripts goes here... */ }); ``` ## Using Coffeescript (optionally) Using Twitter Bootstrap with the CoffeeScript is easy. twitter-bootstrap-rails generates a "bootstrap.js.coffee" file for you to /app/assets/javascripts/ folder. ```coffee jQuery -> $("a[rel=popover]").popover() $(".tooltip").tooltip() $("a[rel=tooltip]").tooltip() ``` ## Using Helpers ### Flash helper Add flash helper <%= bootstrap_flash %> to your layout (built-in with layout generator) ## Using Static CSS, JS (w/o Less) twitter-bootstrap-rails has seperate branch (w/o Less) that just serves latest static CSS, JS files. You can install from latest build (from branch); ```ruby gem 'twitter-bootstrap-rails', :git => 'git://github.com/seyhunak/twitter-bootstrap-rails.git', :branch => 'static' ``` ## Changelog