Penggunaan twitter bootstrap dengan ruby on rails


Ruby on Rails adalah framework nya ruby untuk web
seperti django,grok,cherry milik python yang
bisa di jadikan untuk web sebagai frameworknya

di sini penulis cara penggunaan bootstrap yang aslinya toolkit nya twitter
yang bisa di pakai untuk kerangka layout sebuah web
fungsinya memudahkan pengguna agar mudah mengatur interface aplikasinya

pertama-tama yang di install adalah gem file dan di letakkan di assets

gem 'bootstrap-sass'


kemudian ketik

bundle instal


jangan lupa bootstrap javascript di file

app/assets/javascripts/application.js

lalu buat file bootstrap_and_overrides.css.scss di direktori
app/assets/stylesheets

isinya seperti ini

@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";


lalu tambahkan kode ini di
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);
}

lalu rename saja
mv application.css application.css.scss

ini contoh layout applikasi saya yang ada di file
app/views/layouts/application.html.erb


<!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 tambahkan halaman partial navigasi dan messages di folder
"app/views/layout"
karenaaaa halaman2 partial itu fungsinya untuk nge link navigasi
untuk webapps nya
tentunyaaa halaman2 partial itu content nya sesuai keinginan apps kita

contoh seperti ini
nano app/views/layouts/_navigation.html.erb
Code:
<%= 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

nano app/views/layouts/_messages.html.erb

    Quote:
    <% 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 %>

Biasanya ada pertanyaan seperti ini
Q: bagaimana untuk membuat tampilan tabel di apps nya
sementara di situ ada element table ?

A : cukup tambahkan class "table table-striped" di element table nya

contoh :
<table class="table table-striped">
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th></th>
    </tr>
  </tbody>

0.00 / 0 votes

In order to comment, please sign in

Comments


Loading

Testimonials


User Menu