Senin, 03 Desember 2012

Instalasi Twitter Bootstrap untuk Rails 3

Bootstrap adalah sebuah toolkit dari Twitter yang dirancang sebagai kerangka layout sebuah web sehingga memudahkan Anda dalam mengatur tampilan aplikasi yang Anda buat.

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


    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

  • 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";


     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);

}


      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">&#215;</a>
      <%= content_tag :div, msg, :id => "flash_#{name}" %>
    </div>
  <% end %>
<% end %>
 
 
Untuk membuat tabel pada aplikasi Anda cukup menambahkan class "table table-striped" pada element table

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 :)
 
 


4 komentar:

  1. mas ini tolong dejelasin lagi, ini ditaro dimana mas? "Tambahkan pada Gemfile dan pastikan gem tersebut dipasang pada group assets"


    gem 'bootstrap-sass' thanks klo berkenaan tolong di email aja ya mas > kevinoeng@gmail.com

    BalasHapus
  2. Mas Aris,

    Ketika Anda generate aplikasi rails, ada file dengan nama "Gemfile" pada root
    folder. Tambahkan code sebagai berikut:

    group :assets do
    gem 'bootstrap-sass'
    end

    Thanks,

    BalasHapus
  3. mas cara ceknya gimana?

    BalasHapus
    Balasan
    1. Coba bikin table terus kasih nama classnya "table table-striped", nanti kalau
      tampilan stylenya sesuai contoh berarti installasi nya sudah benar

      Hapus