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

Diposting oleh

6 komentar:

  1. kevin9 Oktober 2013 pukul 11.03

    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. Anonim9 Oktober 2013 pukul 14.09

    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. Anonim5 Desember 2013 pukul 19.55

    mas cara ceknya gimana?

    BalasHapus
    Balasan
    1. Anonim2 Januari 2014 pukul 08.28

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

      Hapus
  4. Unknown18 April 2018 pukul 23.14

    Maaf mas, kalo tidak pada group: asset do menyimpan bootsrap apa tidak apa2?
    soalnya saya bisa2 saja ini mas
    apa bedanya jika dengan di simpan pada group?maaf masi awam

    BalasHapus
    Balasan
    1. Anonim19 April 2018 pukul 09.09

      kalau di local di dalam atau di luar gemnya masih bisa terbaca
      kalau untuk rails 3 group pada assets berguna untuk process compile assets di production server nanti

      Hapus

Langganan: Posting Komentar (Atom)