use*_*018 6 css ruby ruby-on-rails twitter-bootstrap
我需要帮助在rails中集成一个wrap bootstrap主题.如果它不是一步一步地要求得太多,那就太好了.我总觉得留下小细节.
我购买了http://wrapbootstrap.com/preview/WB02634G3并且无法使某些样式/ javascript正常工作.
// =需要主题
这是我的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>
我已将这些添加到我的gem文件中.
gem 'libv8'
gem 'twitter-bootstrap-rails'
gem 'bootswatch-rails'
我认为这总结了我添加/尝试过的内容.谢谢您的帮助!
小智 5
这里有一篇有用的博客文章，其中应详细介绍将主题集成到资产管道中时应采取的一般方向。我必须做几次，总的来说，这是我学到的：
在您的app / vendor目录中保留一个文件夹，您可以完全保留整个主题。就像app / vendor / templates / theme一样。（不过，请不要忘记在.gitignore文件中包含vendor / template / * －仅供参考。）这样，无论发生什么情况，您都可以掌握整个主题。而不是实际的文件移动到应用程序的资源路径，复制它们。
不要将主题资产存储在应用程序/资产中。将它们存储在供应商资产中。如果您还可以在供应商目录中创建清单文件，则可以帮助您保持井井有条，例如：
+ vendor
- assets
- stylesheets
- vendor_sheets.css
然后在vendor_sheets.css中：
/*
*= require vendor stylesheets
*/
然后在asset / stylesheets / applications.css中：
/*
* ...
*= require vendor_sheets
*/
Rails将知道寻找供应商。然后，您向自己保证除非绝对必要，否则不要编辑任何供应商文件-只要您require vendor_sheets在需要任何自己的样式表之前进入application.css，您就可以使用自己的主题样式简单地覆盖它们。
首先翻译一个html页面。不要只是将所有内容从主题移到资产管道中并假设它会起作用。相反，以index.html文件为例，然后将index.html文件中link编辑的每个样式表都以与指定顺序完全相同的顺序复制到vendor / assets / stylesheets中，并将它们复制到vendor_sheets.css文件中。在index.html文件中。*=require
不要做require_tree。明确要求文件。这保证了正确的顺序。
检查元素是您最好的朋友。看你的资料。确保已加载它们，并且它们以正确的顺序加载。经常检查控制台是否有错误。如果您专注于正确加载样式表，请忽略图像警告和javascript警告。一心一意。
以与对待样式表相同的方式对待JavaScript文件。在vendor / assets / javascripts中执行vendor_scripts.js清单文件，然后将该清单文件包含在asset / application.js中。确保在Rails默认设置之后包含该文件，例如jQuery和Turbolinks（我将在稍后介绍），但在您自己的任何自定义脚本之前。再次，检查元素以确保以正确的顺序包含所有JavaScript文件。
图像可能很棘手。将您需要的图像复制到vendor / assets / images中。您需要进入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。
尽管您的负载路径将在生产中发生变化，但默认情况下Rails附带的sass-rails gem 可以使用许多帮助程序来查找资产。使用它们，否则您最终可能会在localhost中运行所有内容，然后在部署后完全崩溃。
这是有关在Rails 4中引用图像的一些讨论，您可能会有所帮助。
尽可能从模板.html文件复制和粘贴HTML 。这样可以最大程度地减少错别字。但是，也请通读它，并尽力掌握如何使用现有功能。
Turbolinks：如果您的JavaScript仍然无法正常工作，则Turbolinks可能会造成麻烦。您可以禁用Turbolinks，但是...您确实不必这样做，Turbolinks可以加快您网站的速度，因此没有理由摆脱它。但是您确实需要稍微修改JavaScript。任何以以下内容开头的JavaScript文件：
$(document).on('ready', function() {
需要更改为
$(document).ready(function() {
这是有关Turbolink及其解决方案的有用讨论。
好的，除此之外，我还注意到您的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分别在这里。
最重要的是，不要在header中包含指向内部样式表的链接。如果您在application.css中正确要求文件，则将其包括在内。唯一的例外是Google字体。
我还看到您确实删除了Turbolinks。这不是必需的，甚至不是真正可取的。
祝您主题好运。
| 归档时间： |
|
| 查看次数： |
6773 次 |
| 最近记录： |