Css 将Wrap引导主题与Ruby on Rails集成_Css_Ruby On Rails_Ruby_Twitter Bootstrap

Css 将Wrap引导主题与Ruby on Rails集成

css ruby-on-rails ruby twitter-bootstrap

Css 将Wrap引导主题与Ruby on Rails集成,css,ruby-on-rails,ruby,twitter-bootstrap,Css,Ruby On Rails,Ruby,Twitter Bootstrap,我需要帮助在Rails中集成包装引导主题。如果不是要求太多，一步一步深入就好了。我总是觉得小细节被留下了我购买了一些样式/JavaScript，但无法正常工作我已将所有文件添加到相应的资产文件夹中，并尝试在application.js/application.css文件中要求每个文件名。就像下面这个例子 //=需要主题对于我将其重命名为“/assets/showcase1.png”的图像，在某些情况下，我发现这种格式也适用于“./images/showcase1.png” 下面是我

我需要帮助在Rails中集成包装引导主题。如果不是要求太多，一步一步深入就好了。我总是觉得小细节被留下了

我购买了一些样式/JavaScript，但无法正常工作

我已将所有文件添加到相应的资产文件夹中，并尝试在application.js/application.css文件中要求每个文件名。就像下面这个例子

//=需要主题

对于我将其重命名为“/assets/showcase1.png”的图像，在某些情况下，我发现这种格式也适用于“./images/showcase1.png”

下面是我的application.html.erb文件的外观

<!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>

这里有一篇有用的博客文章，详细说明了在将主题集成到资产管道中时应采取的总体方向。我已经做过几次了，总的来说，这就是我学到的：

一个在应用程序/供应商目录中保留一个文件夹，使整个主题完全保持不变。就像应用程序/供应商/模板/主题一样。（不过，别忘了在.gitignore文件中包含vendor/template/*这只是供参考。）这样，无论发生什么情况，您都可以看到整个主题。复制文件，而不是将文件实际移动到应用程序的资产路径中

两个不要将你的主题资产存储在app/assets中。将它们存储在供应商资产中。如果您还在供应商目录中创建清单文件，它可能会帮助您保持更有序，例如：

+ vendor
  - assets
    - stylesheets
      - vendor_sheets.css

然后在vendor_sheets.css中：

然后在assets/stylesheets/applications.css中：

Rails将知道如何查找供应商。然后，您向自己承诺，除非绝对必要，否则不会编辑任何供应商文件-只要您

需要application.css中的供应商工作表

，在需要任何自己的样式表之前，您可以简单地用自己的样式表覆盖主题的样式

三从翻译一个html页面开始。不要把所有的东西都从主题转移到资产管道中，并假设它会工作。相反，以index.html文件为例，然后将index.html文件中

链接的每个样式表复制到vendor/assets/stylesheets中，并在vendor\u sheets.css文件中*=require
它们的顺序与index.html文件中指定的顺序完全相同
不要做需要\u树。明确要求这些文件。这保证了适当的秩序
四
Inspect Element是您最好的朋友。看看你的消息来源。确保它们已加载，并且加载顺序正确。经常检查控制台中的错误。如果您专注于正确加载样式表，请忽略图像警告和javascript警告。一次只做一件事
五
对待JavaScript文件的方式与对待样式表的方式相同。在vendor/assets/javascripts中创建vendor_scripts.js清单文件，然后在assets/application.js中包含该清单文件。请确保在Rails默认值（例如jQuery和Turbolinks，我将在一分钟后介绍）之后，但在您自己的任何自定义脚本之前包含此文件。同样，检查元素以确保所有JavaScript文件都包含在内，并且顺序正确
六
图像可能很棘手。将需要的图像复制到供应商/资产/图像中。您需要进入config/application.rb并将addvendor/assets/images添加到资产路径中，如下所示：
config.assets.paths << Rails.root.join("app", "assets", "vendor/assets/images")

需要改成
$(document).ready(function() {

这是一个关于Turbolinks的有益讨论，并绕开它

好的，除此之外，我还注意到您的application.html.erb文件存在一些问题：
“全部”%>

具体地说，您能更具体地说明您有哪些问题吗？另外，你能提供你从WrapBotstrap（CSS、LESS文件、修改过的引导主题…）购买给那些从未在该网站购买过主题的人吗？你检查过控制台上的javascript错误吗？嘿，你能澄清问题的确切性质吗？什么是你期望的，而没有得到的？
/*
 * ...
 *= require vendor_sheets
 */

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

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

$(document).ready(function() {

 <%=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">