如何将 Wrap Bootstrap 主题集成到 Rails 应用程序中? [英] How to integrate a Wrap Bootstrap theme into an Rails application?

本文介绍了如何将 Wrap Bootstrap 主题集成到 Rails 应用程序中?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

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

推荐答案

首先检查这个截屏视频:

解决方案

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

然后我会添加一个 bootstrap gem,比如 bootstrap-sass,然后通过 gem 添加 JS 文件,将它们添加到清单中,就像这样:

First check this screencast:

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

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

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:

希望能帮到你

标记:

检查您下载的模板,以导航栏为例

来自模板的代码:

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

</header><!--/header-->

Code from template:

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

_navbar.html.erb:

and last, do your navbar partial

_navbar.html.erb:

</header><!--/header-->

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

这篇关于如何将 Wrap Bootstrap 主题集成到 Rails 应用程序中?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆