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

发布时间：2020-12-16 20:01:16 所属栏目：百科来源：网络整理

导读：我从 wrapbootstrap买了一个twitter引导主题. 我已经有一个功能轨道应用程序.现在,我想通过将引导主题集成到我的应用程序中来设计我的应用程序. 我是新来的,我不知道该怎么做.在做了大量的研究之后,我发现只有很少的关于这个问题的讨论.例如我发现这个帖子：

我从 wrapbootstrap买了一个twitter引导主题.
我已经有一个功能轨道应用程序.现在,我想通过将引导主题集成到我的应用程序中来设计我的应用程序.
我是新来的,我不知道该怎么做.在做了大量的研究之后,我发现只有很少的关于这个问题的讨论.例如我发现这个帖子： Implementing WrapBootstrap theme into Rails App

但是,我不太清楚主题的资产将如何应用于我的应用程序.我已经从主题的相应文件夹中复制了我项目的应用程序/资源/图像,app / assets / javascripts和app / assets / stylesheets文件夹下的所有资源.然后,当我尝试在本地运行我的应用程序时,我有几个错误.我删除了我的application.css文件,之后它开始工作.但是,我看不到任何正在应用的主题的设计.我应该怎么做,使这个主题工作在我的rails应用程序？

解决方法

首先检查这个屏幕录像：

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

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

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

然后我会得到你从wrapboostrap购买的css文件,并将它们放在你的素材资源/样式表文件夹中,然后添加必要的标记和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部分

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

那只是导航栏,现在你需要做其他的,添加您的模板显示你要做的标记,所有的应用程序,它不是一件容易的工作,但它是如何完成的.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!