Geek asks and answers

Integrating Wrap Bootstrap Themes with Ruby on Rails

I need help integrating Bootstrap theme into Rails. If not too much detail was required, step by step would be great. I always feel that small details remain.

I bought http://wrapbootstrap.com/preview/WB02634G3 and cannot get some styles and JavaScript to work correctly.

  • I added all my files to the corresponding resource folder and tried to specify each file name in the application.js / application.css file. Like this example below.

// = theme required

  • For images, I renamed them mostly to "/assets/showcase1.png". In some cases, I found that this format also works "../images/showcase.png"

This is what my application.html.erb file looks like.

<!DOCTYPE html>

<html>

 <head>
  <title>DPL</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <%=s tylesheet_link_tag "application", :media=>"all" %>
      <%=j avascript_include_tag "application" %>
      <%=c srf_meta_tags %>
      <!-- Styles -->
       <link href="css/bootstrap.css" rel="stylesheet">
       <link rel="stylesheet" type="text/css" href="css/theme.css">
       <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
       <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
       <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">
 </head>

 <body>

   <body class="pull_top">
     <div class="navbar transparent navbar-inverse navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
         <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>
         <a class="brand" href="index.html">
         <strong>DPL</strong>
         </a>

       <div class="nav-collapse collapse">
         <ul class="nav pull-right">
            <li><a href="index.html" class="active">HOME</a></li>
            <li><a href="about-us.html">ABOUT US</a></li>
            <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
            PAGES
            <b class="caret"></b>
            </a>

         <ul class="dropdown-menu">
            <li><a href="features.html">Features</a></li>
            <li><a href="services.html">Services</a></li>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="portfolio-item.html">Portfolio Item</a></li>
            <li><a href="coming-soon.html">Coming Soon</a></li>
            <li><a href="sign-in.html">Sign in</a></li>
            <li><a href="sign-up.html">Sign up</a></li>
            <li><a href="backgrounds.html">Backgrounds</a></li>
         </ul>
            </li>
            <li><a href="pricing.html">PRICING</a></li>
            <li><a href="contact.html">CONTACT US</a></li>
            <li><a href="blog.html">BLOG</a></li>
            <li><a class="btn-header" href="sign-up.html">Sign up</a></li>
            <li><a class="btn-header" href="sign-in.html">Sign in</a></li>
         </ul>
          </div>
      </div>
     </div>
    </div>
    <div class="container">
                <%=y ield %>
            </div>
        </body>

</html>

.

gem 'libv8'
gem 'twitter-bootstrap-rails'
gem 'bootswatch-rails'
+5
1

, , . , , , :

/, . - app/vendor/templates/theme. ( //* .gitignore, - .) , , , . , , .

/. . , , :

+ vendor
  - assets
    - stylesheets
      - vendor_sheets.css

vendor_sheets.css:

/*
 *= require vendor stylesheets
 */

/stylesheets/applications.css:

/*
 * ...
 *= require vendor_sheets
 */

Rails , . - , - , require vendor_sheets application.css, - , .

html-. , . , , index.html, , link ed index.html, vendor/assets/stylesheets *=require vendor_sheets.css , index.html.

require_tree. . .

- . . , . . , javascript. .

JavaScript , . vendor_scripts.js //javascripts, assets/application.js. Rails , jQuery Turbolinks ( ), . , " ", JavaScript .

. , //. config/application.rb // :

config.assets.paths << Rails.root.join("app", "assets", "vendor/assets/images")

.

/ , , url('. url('path/to/image/file_name.ext') image_path('file_name'). 6 7 , vendor/assets/fonts image_path `asset_path ('file_name.ext'). , , "scss" , styles.css, styles.css.scss.

, gem, Rails , , , . , , , .

Rails 4, .

HTML .html . . , .

Turbolinks: JavaScript , Turbolinks . Turbolinks, ... , Turbolinks , . JavaScript. JavaScript, :

$(document).on('ready', function() {


$(document).ready(function() {

- Turbolinks .

, , , application.html.erb:

 <%=s tylesheet_link_tag "application", :media=>"all" %>
  <%=j avascript_include_tag "application" %>
  <%=c srf_meta_tags %>
  <!-- Styles -->
   <link href="css/bootstrap.css" rel="stylesheet">
   <link rel="stylesheet" type="text/css" href="css/theme.css">
   <link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
   <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
   <link rel="stylesheet" type="text/css" href="css/lib/animate.css" media="screen, projection">

<%=s tylesheet, <%=j avascript <%=c srf . <%= stylesheet, <%= javascript <%= csrf.

, . application.css, . Google Font.

, Turbolinks. .

.

+4

More articles:


All Articles