Ruby-on-rails 如何将 Wrap Bootstrap 主题集成到 Rails 应用程序中？

How to integrate a Wrap Bootstrap theme into an Rails application?

提问by K M Rakibul Islam

I have bought a twitter bootstrap theme from wrapbootstrap. I already have a functional rails application. Now, I want to design my application by integrating the bootstrap theme into my application. I am new to this and I have no idea how to do it. After doing a lot of research on this, I found only a very few discussion regarding this issue. As for example I found this post: Implementing WrapBootstrap theme into Rails App

我从wrapbootstrap购买了一个 twitter bootstrap 主题。我已经有一个功能性的 rails 应用程序。现在，我想通过将引导程序主题集成到我的应用程序中来设计我的应用程序。我是新手，我不知道该怎么做。在对此做了大量研究之后，我发现关于这个问题的讨论很少。例如，我发现了这篇文章：将WrapBootstrap 主题实现到 Rails App 中

But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascriptsand app/assets/stylesheetsfolders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.cssfile, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?

但是，我不完全确定如何将主题中的资产应用于我的应用程序。我复制所有在我的项目的资产app/assets/images，app/assets/javascripts以及app/assets/stylesheets文件夹从主题的相应文件夹中。然后，当我尝试在本地运行我的应用程序时遇到了几个错误。我删除了我的application.css文件，之后它开始工作。但是，我还看不到正在应用的主题中的任何设计。我应该怎么做才能使这个主题在我的 rails 应用程序中工作？

回答by Rodrigo Zurek

First check this screencast:

首先检查这个截屏视频：

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

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

then I would add a bootstrap gem like bootstrap-sass, then add the JS files through the gem by adding them to the manifest, something like this:

然后我会添加一个 bootstrap gem，比如 bootstrap-sass，然后通过 gem 添加 JS 文件，将它们添加到清单中，如下所示：

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

then i would get the css files that you bought from wrapboostrap and place them in you assets/stylesheets folder, then add the necesary markup and clases to your app this is how ive done it before.

然后我将获取您从 wrapboostrap 购买的 css 文件并将它们放在您的资产/样式表文件夹中，然后将必要的标记和类添加到您的应用程序中，这就是我以前所做的。

hope it helps

希望能帮助到你

EDIT:

编辑：

Markup:

标记：

Check the template you downloaded, lets start with the navbar for example

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

Code from template:

模板中的代码：

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

Now you need to place yourself in your app, if the navbar shows in every view on your app, you should mention it on the layouts/application.html.erb something like this:

现在您需要将自己置于您的应用程序中，如果导航栏显示在您应用程序的每个视图中，您应该在 layouts/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>

and last, do your navbar partial

最后，做你的导航栏部分

_navbar.html.erb:

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

That was only for the navbar, now you need to do the rest, add the markup your template shows you to do, with all your app, its not an easy job, but thats how its done.

这仅适用于导航栏，现在您需要做其余的工作，添加模板显示您要做的标记，对于您的所有应用程序，这不是一件容易的事，但这就是它的完成方式。

回答by Muhammad Suleman

make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"

确保在安装 twitter bootstrap 时，您应该将以下 gem 添加到“group :assets”下的 Gemfile 中

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

then run bundle command.

然后运行 ​​bundle 命令。

Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets

现在，您下载的主题“file_name.css”（file_name 可以是任何）只需将其添加到 app->assests->stylesheets 下的“stylesheets”文件夹中

then open your application.css file in same folder there you will see

然后在同一文件夹中打开您的 application.css 文件，您将看到

*= require_tree.

replace this line with

将此行替换为

*= require "file_name.css"

NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.

注意：不要忘记重新编译您的资产或简单地删除 tmp/cache 文件夹的内容。

save it and reboot your server. it will apply your new theme.

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