gpt4 book ai didi

css - 将Wrap Bootstrap主题与Ruby on Rails集成

转载 作者:数据小太阳 更新时间:2023-10-29 07:17:03 25 4
gpt4 key购买 nike

我需要在Rails中集成自动换行Bootstrap主题的帮助。如果它不要求太多,一步一步深入,那就太好了。我总是觉得只剩下一些小细节。

我购买了http://wrapbootstrap.com/preview/WB02634G3,但无法使某些样式/JavaScript正常工作。

  • 我已将所有文件添加到相应的Assets文件夹中,并尝试在application.js/application.css文件中要求每个文件名。像下面的例子一样。

  • //= require theme


  • 对于图像,我已将其重命名为“/assets/showcase1.png”。在某些情况下,我发现这种格式也可以使用“../images/showcase.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>

    我已将它们添加到我的gem文件中。
    gem 'libv8'
    gem 'twitter-bootstrap-rails'
    gem 'bootswatch-rails'

    最佳答案

    有一篇很有帮助的博客文章here,其中应详细说明将主题集成到 Assets 管道中时应采取的一般方向。我不得不做几次,总的来说,这就是我学到的东西:



    在应用程序/供应商目录中保留一个文件夹,您可以完全保留整个主题。就像app/vendor/templates/theme之类的东西。 (不过,请不要忘记在.gitignore文件中包含vendor/template/* -仅供引用。)这样,无论发生什么情况,您都可以掌握整个主题。复制文件而不是将文件实际移动到应用程序的 Assets 路径中。



    不要将主题 Assets 存储在应用程序/ Assets 中。将它们存储在供应商 Assets 中。如果您还可以在供应商目录中创建 list 文件,则可以帮助您保持井井有条,例如:

    + vendor
    - assets
    - stylesheets
    - vendor_sheets.css

    然后在vendor_sheets.css中:
    /*
    *= require vendor stylesheets
    */

    然后在assets/stylesheets/applications.css中:
    /*
    * ...
    *= require vendor_sheets
    */

    Rails将知道寻找供应商。然后,您向自己保证除非绝对必要,否则不要编辑任何供应商文件-只要您在需要任何自己的样式表之前在application.css中使用 require vendor_sheets,您就可以使用自己的样式来覆盖主题的样式。



    首先翻译一个html页面。不要只是将所有内容从主题移到 Assets 管道中并假设它会起作用。取而代之的是,例如,使用index.html文件,然后将index.html文件中 link ed的每个样式表复制到vendor/assets/stylesheets中,并以完全相同的顺序在他们的vendor_sheets.css文件 中对它们进行*=require在index.html文件中指定。

    不要做 require_tree。明确要求文件。这保证了正确的顺序。

    四个

    检查元素是您最好的 friend 。看你的资料。确保已加载它们,并以正确的顺序加载它们。经常检查控制台是否有错误。如果您专注于正确加载样式表,请忽略图像警告和javascript警告。一心一意。



    对待JavaScript文件的方式与对待样式表的方式相同。在vendor/assets/javascripts中执行一个vendor_scripts.js list 文件,然后将该 list 文件包含在assets/application.js中。确保在Rails默认值之后包含该文件,例如jQuery和Turbolinks(我将在稍后介绍),但在您自己的任何自定义脚本之前。同样,检查元素以确保以正确的顺序包含所有JavaScript文件。



    图像可能很棘手。将您需要的图像复制到供应商/ Assets /图像中。您需要进入config/application.rb并在您的 Assets 路径中添加供应商/ Assets /图像,如下所示:
    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可以使用许多帮助程序来查找 Assets 。使用它们,否则您最终可能会在localhost中运行所有内容,然后在部署后完全崩溃。

    Here是有关在Rails 4中引用图像的一些讨论,您可能会觉得有帮助。



    尽可能从模板.html文件复制和粘贴HTML。这样可以最大程度地减少错别字。但是,也请通读它,并尽力掌握如何使用现有功能。



    Turbolinks:如果您的JavaScript仍然无法正常工作,则Turbolinks可能会造成麻烦。您可以禁用Turbolinks,但是...您实际上不必这样做,Turbolinks可以加快您网站的感觉,因此没有理由摆脱它。但是您确实需要稍微修改JavaScript。任何以以下内容开头的JavaScript文件:
    $(document).on('ready', function() {

    需要更改为
    $(document).ready(function() {

    Here是有关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

    最重要的是,不要在标题中包含指向内部样式表的链接。如果您在application.css中正确要求文件,则将其包括在内。唯一的异常(exception)是Google字体。

    我还看到您确实删除了Turbolinks。这不是必需的,甚至不是真正可取的。

    祝您主题好运。

    关于css - 将Wrap Bootstrap主题与Ruby on Rails集成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16162356/

    25 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com