Najpierw sprawdź to screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
następnie dodam bootstrap gem jak bootstrap-Sass, następnie dodać pliki JS przez gem dodając je do oczywistego, coś takiego:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
następnie chciałbym uzyskać pliki css, które kupili od wrapboostrap i umieścić je w tobie folderu aktywa/arkuszy stylów, a następnie dodać necesary znaczników i clases do aplikacji to jak ive zrobić to wcześniej.
nadzieję, że pomoże
EDIT:
Markup:
Sprawdź szablon został pobrany, zacznijmy z paska nawigacyjnego na przykład
kod z szablonu:
<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-->
Teraz musisz umieścić się w swojej aplikacji, jeśli navbar pokazuje w każdym widoku w aplikacji, należy wspomnieć o tym na układach/application.html.erb coś takiego:
<!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>
i wreszcie zrobić navbar częściowy
_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-->
To był tylko na pasku nawigacyjnym, teraz trzeba zrobić resztę, dodawanie znaczników szablon pokazuje Ci zrobić, całą swoją aplikację, to nie jest to łatwe zadanie, ale to jak jej dokonać.
mam zrobić wszystkie rzeczy, z wyjątkiem ostatniego wiersza: „następnie dodać necesary znaczników i clases do aplikacji” czy mógłbyś rozwinąć to nieco? –
zrobione, edytowałem mój answerert –
wielkie dzięki za odpowiedź. Po prostu, czy muszę to zrobić po skopiowaniu wszystkich zasobów z tematu do mojej aplikacji/zasobu? –