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

标签 ruby-on-rails twitter-bootstrap ruby-on-rails-3 ruby-on-rails-4 twitter-bootstrap-rails

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

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

最佳答案

首先查看此截屏视频:

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

然后我会添加一个像 bootstrap-sass 这样的 Bootstrap gem,然后通过 gem 将 JS 文件添加到 list 中,如下所示:

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

然后我会得到你从 wrapboostrap 购买的 css 文件并将它们放在你的 assets/stylesheets 文件夹中,然后将必要的标记和类添加到你的应用程序中,这就是我之前所做的。

希望能帮助到你

编辑:

标记:

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

来自模板的代码:
<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-->

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

最后,做你的导航栏部分

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

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

关于ruby-on-rails - 如何将 Wrap Bootstrap 主题集成到 Rails 应用程序中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15650627/

相关文章:

html - 使用具有不同高度的 div 的 Bootstrap 列类

javascript - Bootstrap 弹出窗口停留在内容上

mysql - 将 SQL 查询转换为 Rails Active Record 查询

ruby-on-rails - 以沙盒模式打开 pry 动控制台

ruby-on-rails - AWS 中的私钥管理是否有推荐的解决方案?

css - Bootstrap 导航栏显示垂直而不是水平

ruby-on-rails-3 - 尝试在 rake 任务中启动 redis 和 resque 调度程序

ruby-on-rails-3 - 如何在设计 "safely"中更改用户的电子邮件地址?

css - 在 Rails 4.2.4 中使用字体

ruby-on-rails - 为什么在测试 Rails 3 时不能更改当前语言环境?