Trước tiên kiểm tra thu hình màn ảnh này:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
sau đó tôi sẽ thêm một viên ngọc bootstrap như bootstrap-sass, sau đó thêm các tập tin JS qua đá quý bằng cách thêm chúng vào manifest, một cái gì đó như thế này:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
sau đó tôi sẽ nhận các tệp css mà bạn đã mua từ wrapboostrap và đặt chúng vào thư mục tài sản/stylesheets, sau đó thêm đánh dấu và clases necesary vào ứng dụng của bạn.
hy vọng nó sẽ giúp
EDIT:
Markup:
Kiểm tra mẫu bạn tải về, cho phép bắt đầu với navbar ví dụ
Mã từ mẫu:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="container">
<a class="brand" href="index.html">Gaia Business</a>
<div class="nav-collapse">
<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="service.html">Service</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul id="dropdown-menu" class="dropdown-menu">
<li><a href="#">Dropdown 1</a></li>
<li><a href="#">Dropdown 2</a></li>
<li><a href="#">Dropdown 3</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Dropdown 4</a></li>
<li><a href="#">Dropdown 5</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Bây giờ bạn cần đặt mình vào ứng dụng của mình, nếu navbar cho thấy trong mọi quan điểm về ứng dụng của bạn, bạn nên đề cập đến nó trên layouts/application.html.erb một cái gì đó như thế này:
<!DOCTYPE html>
<html>
<head>
<title>Golden Green Chlorella</title>
<%= stylesheet_link_tag "application", :media => "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= render :partial => 'layouts/navbar' %>
<%= yield %>
</body>
</html>
và cuối cùng, làm navbar của bạn phần
_navbar.html.erb:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
<span class="icon-bar glyph"></span>
</a>
<div class="container">
<%= link_to "Your app", root_path, :class => "brand" %>
<div class="nav-collapse">
<ul class="nav">
<li class=<%= current_page?(static_index_path) || current_page?(root_path) ? "active" : "" %> > <%= link_to (t "navbar.home"), root_path%></li>
<li class=<%= current_page?(static_know_path) ? "active" : "" %>> <%= link_to (t "navbar.know"), static_know_path%></li>
<li class=<%= current_page?(static_buy_path) ? "active" : "" %>> <%= link_to (t "navbar.buy"), static_buy_path%></li>
<li class=<%= current_page?(static_faq_path) ? "active" : "" %>> <%= link_to "FAQ", static_faq_path%></li>
<li class=<%= current_page?(static_contact_path) ? "active" : "" %>> <%= link_to (t "navbar.contact"), static_contact_path%></li>
<!-- <li class="active"><a href="index.html">Home</a></li> -->
</ul>
<ul class="nav pull-right">
<li><%= link_to "English", static_english_path%></li>
<li><%= link_to "Español", static_spanish_path%></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!--/.container-->
</div><!-- /navbar-inner -->
</div>
</header><!--/header-->
Đó là chỉ dành cho các thanh điều hướng, bây giờ bạn cần phải làm phần còn lại, thêm đánh dấu mẫu của bạn cho thấy bạn làm, với tất cả các ứng dụng của bạn, không phải là một công việc dễ dàng của nó, nhưng thats cách thực hiện nó.
Tôi đã thực hiện tất cả mọi thứ ngoại trừ dòng cuối cùng của bạn: "sau đó thêm đánh dấu và phân đoạn cần thiết vào ứng dụng của bạn" bạn có thể giải thích một chút không? –
xong, tôi đã chỉnh sửa trả lời của tôi –
cảm ơn rất nhiều vì câu trả lời của bạn. Để chắc chắn, tôi có cần thực hiện việc này sau khi sao chép tất cả nội dung từ chủ đề sang ứng dụng/nội dung của mình không? –