K M*_*lam 14 ruby-on-rails ruby-on-rails-3 twitter-bootstrap twitter-bootstrap-rails ruby-on-rails-4
我从wrapbootstrap购买了一个twitter bootstrap主题.我已经有了一个功能轨道应用程序.现在,我想通过将引导主题集成到我的应用程序中来设计我的应用程序.我是新手,我不知道该怎么做.在对此进行了大量研究后,我发现只有很少有关于这个问题的讨论.例如,我发现这篇文章:在Rails App中实现WrapBootstrap主题
但是,我不完全确定主题中的资产将如何应用于我的应用程序.我已经复制了项目中的所有资源app/assets/images,app/assets/javascripts以及app/assets/stylesheets主题相应文件夹中的文件夹.然后,当我尝试在本地运行我的应用程序时,我收到了一些错误.我删除了我的application.css文件,之后就开始工作了.但是,我还看不到主题的任何设计.我应该怎么做才能使这个主题适用于我的rails应用程序？
Rod*_*rek 22
首先检查这个截屏视频:
http://railscasts.com/episodes/328-twitter-bootstrap-basics
然后我会添加一个像bootstrap-sass这样的bootstrap 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-->
现在你需要把自己放在你的应用程序中,如果导航栏显示在你的应用程序的每个视图中,你应该在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-->
这仅适用于导航栏,现在您需要完成剩下的工作,添加模板显示您要执行的标记,使用您的所有应用程序,这不是一件容易的事,但这就是它的完成方式.
确保在安装twitter bootstrap时你应该在你的Gemfile中添加以下gem:"group:assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
然后运行bundle命令.
现在,主题为"file_name.css"(FILE_NAME可以是任何),美已在APP-> assests->样式表下载只需将其添加到"样式"文件夹
然后在您将看到的同一文件夹中打开您的application.css文件
*= require_tree.
用这个替换
*= require "file_name.css"
注意:不要忘记重新编译资产或只删除tmp/cache文件夹的内容.
保存并重启服务器.它将应用您的新主题.
| 归档时间： |
|
| 查看次数： |
34150 次 |
| 最近记录： |