How to integrate a Wrap Bootstrap theme into an Rails application?

First check this screencast:

http://railscasts.com/episodes/328-twitter-bootstrap-basics

then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.

hope it helps

EDIT:

Markup:

Check the template you downloaded, lets start with the navbar for example

Code from 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="https://stackoverflow.com/questions/15650627/index.html">Gaia Business</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="https://stackoverflow.com/questions/15650627/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 you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like 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, do your 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="https://stackoverflow.com/questions/15650627/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 was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.

More Related Contents:

Leave a Comment Cancel reply