i have bought twitter bootstrap theme wrapbootstrap. have functional rails application. now, want design application integrating bootstrap theme application. new , have no idea how it. after doing lot of research on this, found few discussion regarding issue. example found post: implementing wrapbootstrap theme rails app
but, not totally sure how assets theme applied application. have copied assets under project's app/assets/images, app/assets/javascripts , app/assets/stylesheets folders theme's corresponding folders. then, got several error when tried run app locally. deleted application.css file, after started working. but, can not see design theme being applied yet. should make theme work rails app?
first check screencast:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
then add bootstrap gem bootstrap-sass, add js files through gem adding them manifest, this:
//= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . then css files bought wrapboostrap , place them in assets/stylesheets folder, add necesary markup , clases app how ive done before.
hope helps
edit:
markup:
check template downloaded, lets start navbar example
code template:
<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--> now need place in app, if navbar shows in every view on app, should mention on layouts/application.html.erb this:
<!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> and last, navbar partial
_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--> that navbar, need rest, add markup template shows do, app, not easy job, thats how done.
Comments
Post a Comment