如何将包裹引导主题集成到Rails应用程序？如何将包裹引导主题集成到Rails应用程序？(How t

我已经买了从Twitter的引导主题wrapbootstrap 。我已经有一个功能Rails应用程序。现在，我想通过引导主题融入我的应用程序来设计我的应用程序。我是新来这个，我不知道该怎么做。在此做了很多的研究，我发现只有在这个问题极少数的讨论。至于例如我发现这个职位：实施WrapBootstrap主题为Rails应用程序

但是，我不完全知道如何从主题的资产将被应用到我的应用程序。我已经在我的项目的复制全部资产app/assets/images ， app/assets/javascripts和app/assets/stylesheets从主题的相应的文件夹的文件夹。然后，我得到了一些错误，当我试图在本地运行我的应用程序。我删除了我application.css文件，之后它开始工作。但是，我无法看到尚未被应用于从主题的任何设计。我应该怎么做才能让这个主题工作纳入我的Rails应用程序？

Answer 1:

首先检查这个截屏：

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

那么我想补充的自举宝石一样引导，青菜，然后将它们添加到清单中，像这样通过宝石加上JS文件：

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

然后我会得到你从wrapboostrap买了css文件并将其放置在你的资产/样式表文件夹，然后添加necesary标记和clases到您的应用程序，这是多么香港专业教育学院之前完成它。

希望能帮助到你

编辑：

标记：

检查您下载的模板，让我们开始与导航栏例如

从模板代码：

<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="index.html">Gaia Business</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="active"><a href="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-->

现在，你需要把自己放置在您的应用程序，如果导航栏显示在您的应用程序的每个视图，你必须提到它的布局/ application.html.erb是这样的：

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

和去年，做你的导航栏部分

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

这是只为导航栏，现在你需要做的休息，补充你的模板显示你做，你所有的应用程序，它不是一件容易的事了标记，但多数民众赞成如何做。

Answer 2:

确保在安装Twitter的引导，你应该在添加以下的宝石到你的Gemfile“组：资产”

gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

然后运行bundle命令。

现在，主题为“file_name.css”（FILE_NAME可以是任何），美已在APP-> assests->样式表下载只需将其添加到“样式”文件夹

然后打开在同一文件夹中的文件application.css那里你会看到

*= require_tree.

替换该行

*= require "file_name.css"

注意：不要忘记重新编译你的资产中或者干脆删除您的TMP /缓存文件夹的内容。

保存并重新启动服务器。它将应用新主题。