如何将Wrap Bootstrap主题集成到Rails应用程序中? [英] How to integrate a Wrap Bootstrap theme into an Rails application?
问题描述
我从 wrapbootstrap 购买了Twitter引导主题. 我已经有一个功能性的Rails应用程序.现在，我想通过将bootstrap主题集成到我的应用程序中来设计我的应用程序. 我对此并不陌生，我也不知道该怎么做.在对此进行了大量研究之后，我发现关于该问题的讨论很少.例如，我发现了这篇文章:将WrapBootstrap主题实现到Rails应用中
但是，我不太确定主题资产如何应用于我的应用程序.我已经从主题的相应文件夹中复制了项目的app/assets/images，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文件，并将它们放在资产/样式表文件夹中，然后将必要的标记和小节添加到您的应用程序中，这是我以前做的.
希望有帮助
标记:
检查您下载的模板，以导航栏为例
模板中的代码
<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.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-->
这仅用于导航栏，现在您需要做剩下的事情，添加模板显示给您的标记以及所有应用程序，这并不是一件容易的事，但这就是它的完成方式.
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
But, I am not totally sure how the assets from the theme will be applied to my application. I have copied all the assets under my project's app/assets/images, app/assets/javascripts and app/assets/stylesheets folders from the theme's corresponding folders. Then, I got several error when I tried to run my app locally. I deleted my application.css file, after that it started working. But, I can not see any design from the theme being applied yet. What should I do to make this theme work into my rails app?
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.
这篇关于如何将Wrap Bootstrap主题集成到Rails应用程序中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
