14

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

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

4

2 回答 2

22

First check this screencast:

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:

//= 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.

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:

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

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

于 2013-03-27T03:05:01.190 回答
7

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

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

然后运行捆绑命令。

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

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

*= require_tree.

将此行替换为

*= require "file_name.css"

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

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

于 2013-06-06T07:19:07.113 回答