Hi…to all to day i learned Bootstrap from Twitter in rails application…
Before getting into session first ,let we know about twitterbootstrap..It helps to build beautiful web applications..It provides variety of CSS and Javascripts for making layouts,navigations.lot more etc..
Now, we ll create a simple application to store the products and price in a shop and then add TwitterBootstrap..
we ll call the app as store and create scaffold named Product model to do some work
$ rails new store
$ cd store
$ rails g scaffold product name:string price:decimal –skip-stylesheets
$ rake db:migrate
Note: we skipped stylesheets because we are going to use Bootstrap’s stylesheets,css,etc..
now you can see the page as like this..

now.we have to add Bootstrap to this application..
open Gem file
- # Gems used only for assets and not required
- # in production environments by default.
- group :assets do
- gem ‘sass-rails’, ‘~> 3.2.3’
- gem ‘coffee-rails’, ‘~> 3.2.1’
-
- # See https://github.com/sstephenson/execjs#readme for more supported runtimes
- # gem ‘therubyracer’
-
- gem ‘uglifier’, ‘>= 1.0.3’
- gem ‘twitter-bootstrap-rails’
- end
now bundle it and install Bootstrap Twitter
$ bundle install
$ rails g bootstrap:install
this file will be installed in assests/bootstrap_and_overwrites_css.less
now if yuo run the server u can feel difference ..Now our page looks like this…

now we can improve our layout by bootstrap..
app/views/layout/application.html
add <div class=”container”> in body of the file.
now we are going to add sidebar to our page
/app/views/layouts/application.html.erb
<div>
<div>
<div><%= yield %></div>
<div>
<h2>About Us</h2>
<p>This is a product based company.Here we are generating a very good products for pepole in a quality manner. Our products are most popular in the market.</p>
</div>
</div>
</div>
now you can see the about us as sidebar in our app like this

Finally we are going to add the navigation bar such as somestore,contact us..etc
add these lines on top of the body of the file /app/views/layouts/application.html.erb
- <div class=”navbar navbar-fixed-top”>
- <div class=”navbar-inner”>
- <div class=”container”>
- <a class=”btn btn-navbar” data-toggle=”collapse” data-target=”.collapse”>
- <span class=”icon-bar”></span>
- <span class=”icon-bar”></span>
- <span class=”icon-bar”></span>
- </a>
- <a class=”brand” href=”#”>Some Store</a>
- <div class=”nav-collapse”>
- <ul class=”nav”>
- <li><%= link_to “Browse Products”, products_path %></li>
- <li><%= link_to “Price List” %></li>
- <li><%= link_to “Contact Us” %></li>
- <li><%= link_to “Cart” %></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
now if you run the server you can see the navigations bar in our application…
Final Tweaks to The Header
Our application’s layout file is pretty much complete now but there are a couple of thing we need to add in the head section to ensure that it works everywhere.
/app/views/layouts/application.html.erb
<head>
<title>Store</title>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode/svn/trunk/html5.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
the above code for HTML5 support and mobile behaviour .
Next we’ll use Twitter Bootstrap to improve the look of this page. Instead of walking through each change manually we’ll use one of the generators provided by the gem.
$ rails g bootstrap:themed products -f
now run server by $ rails s
after adding products and price to our store apllication ..Our application looks like this…

Thats it…Thanks to all….happy times!!!!!