Ada 4 langkah yang perlu dilakukan untuk memasang Bootstrap ini pada aplikasi Anda :
- Tambahkan pada Gemfile dan pastikan gem tersebut dipasang pada group assets
group :assets do
gem 'bootstrap-sass'
end
gem 'bootstrap-sass'
end
Lalu jalankan di console
bundle install
- Tambahkan juga tag Bootstrap javascript pada file app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree
//= require jquery_ujs
//= require bootstrap
//= require_tree
- Buat sebuah file scss pada folder app/assets/stylesheets Anda dengan nama bootstrap_and_overrides.css.scss dan isi file tersebut dengan
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";
body { padding-top: 60px; }
@import "bootstrap-responsive";
Lalu tambahkan ini pada file application.css
.content {
background-color: #eee;
padding: 20px;
margin: 0 -20px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
background-color: #eee;
padding: 20px;
margin: 0 -20px;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
Dan ubah nama application.css menjadi application.css.scss
- Ubah layout aplikasi Anda pada file app/views/layouts/application.html.erb menjadi seperti ini :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title><%= content_for?(:title) ?
yield(:title) : "Myapp" %></title>
<meta name="description" content="">
<meta name="author" content="">
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
<%= yield(:head) %>
</head>
<body>
<header class="navbar navbar-fixed-top">
<nav class="navbar-inner">
<div class="container">
<%= render 'layouts/navigation' %>
</div>
</nav>
</header>
<div id="main" role="main">
<div class="container">
<div class="content">
<div class="row">
<div class="span12">
<%= render 'layouts/messages' %>
<%= yield %>
</div>
</div>
<footer>
</footer>
</div>
</div> <!--! end of .container -->
</div> <!--! end of #main -->
</body>
</html>
Jangan lupa untuk menambahkan halaman partial navigation dan messages pada folder app/views/layouts Anda. Masing-masing halaman partial tersebut berfungsi untuk menampilkan link navigasi dan flash message pada aplikasi web Anda.
Isi masing-masing halaman partial tersebut sesuai dengan kebutuhan aplikasi web Anda
Contoh isi partial app/views/layouts/_navigation.html.erb :
<%= link_to "Home", root_path, :class => 'brand' %>
<ul class="nav">
<% if user_signed_in? %>
<li>
<%= link_to('Logout', destroy_user_session_path,
:method=>'delete') %>
</li>
<% else %>
<li>
<%= link_to('Login', new_user_session_path) %>
</li>
<% end %>
<% if user_signed_in? %>
<li>
<%= link_to('Edit account', edit_user_registration_path) %>
</li>
<% else %>
<li>
<%= link_to('Sign up', new_user_registration_path) %>
</li>
<% end %>
</ul>
Contoh isi partial app/views/layouts/_messages.html.erb :
<% flash.each do |name, msg| %>
<% if msg.is_a?(String) %>
<div class="alert alert-<%= name == :notice ?
"success" : "error" %>">
<a class="close" data-dismiss="alert">×</a>
<%= content_tag :div, msg, :id => "flash_#{name}" %>
</div>
<% end %>
<% end %>
Contoh :
<table class="table table-striped">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<th></th>
</tr> </tbody> </table>
Berikut ini adalah contoh tampilan aplikasi Rails yang menggunakan Bootstrap :
Selamat mencoba dan Happy Coding :) 
