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>
In order to comment, please sign in
Comments