如何将Wrap Bootstrap主题集成到Rails应用程序中



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

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

首先检查这个截屏:

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

然后我将添加一个引导gem,如bootstrap-sass,然后通过将它们添加到清单中来添加JS文件,如下所示:

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

然后我会得到你从wrapboostrap购买的CSS文件,并将它们放在你的资产/样式表文件夹中,然后添加必要的标记和类到你的应用程序,这是我以前做过的。

希望能有所帮助

编辑:

标记:

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

模板代码:

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

现在你需要把自己放在你的应用中,如果导航条显示在你的应用中的每个视图中,你应该在layouts/application.html中提到它。像这样的动词:

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

这只是导航栏,现在你需要做剩下的,添加标记你的模板显示你做的,所有的应用程序,这不是一个简单的工作,但这就是它的方式。

确保在安装twitter bootstrap时,您应该将以下gem添加到您的Gemfile "group:assets"下

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

然后运行bundle命令。

现在,你下载的主题"file_name.css" (file_name可以是任何)只要把它添加到"stylesheets"文件夹下的app-> assets ->stylesheets

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

*= require_tree.

替换这一行
*= require "file_name.css"

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

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

最新更新