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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


validates:conclusion,:presence=>true,:inclusion=>{:in=>[0,1]}validates:email,:presence=>true,:length=>{:minimum=>3,:maximum=>254},:uniqueness=>true,:email=>truevalidates:ending_order,
一、redis集群搭建redis3.0以前,提供了Sentinel工具来监控各Master的状态,如果Master异常,则会做主从切换,将Slave作为master,将master做为slave。其配置也较复杂,且表现一般。redis3.0以后已经支持集群容错功能,并且非常简单1.1素材准备centos7(集群搭建,至少三个master。需
分享一下我老师大神的人工智能教程。零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!https://blog.csdn.net/jiangjunshow                 不知道大家是否注意到,全新安装ruby之后,无论是在windows或是linux还是macosX下使用rix
上一篇博文 ruby传参之引用类型 里边定义了一个方法名 modify_my_object!,这个方法名是以!结尾,在ruby的对象里边是用于表达修改本身的意思。比如String#gsub,返回的是一个新的字符串对象;而String#gsub!,返回的是自身已经被修改的对象。不止!这样的特殊字符可以命名,ruby
一编程与编程语言 什么是编程语言? 能够被计算机所识别的表达方式即编程语言,语言是沟通的介质,而编程语言是程序员与计算机沟通的介质。 什么是编程? 编程即程序员根据需求把自己的思想流程按照某种编程语言的语法风格编写下来,产出的结果就是包含一堆字符的文件。二编程语言分
Ruby类和对象Ruby是一种完美的面向对象编程语言。面向对象编程语言的特性包括:数据封装数据抽象多态性继承这些特性将在面向对象的Ruby中进行讨论。一个面向对象的程序,涉及到的类和对象。类是个别对象创建的蓝图。在面向对象的术语中,您
1.ruby的标签<ruby>漢<rp>(<p><rt>han<t><rp>)<p>字<rp>(<p><rt>zi<t><rp>)<p><uby> 
1、软件安装1.安装包是个压缩包-->解压到/homeedis_tar下命令如下: tar-zxvf./../-C/homeedis_tar2.安装c++环境yum-yinstallgcc-c++(注:redis底层源码是c++)3.解压后需要源码编译进入到redis-3.0.0后执行make4.编译完后开始安装需要指定一个安装路径
1.sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。安装过程中请注意勾选AddRubyexecutablestoyourPATH添加到系统环境变量。ruby官网:https:/ubyinstaller.org/downloa
本节对我们项目实现的功能和知识点做一个简单的介绍,因为是RESTfulAPI项目,所以对于后端来说基本上没有什么UI界面可展示,那我们就在关键的点,使用客户端(Android)实现的效果图。课程简介这是一门企业级项目实战课程,目的是从0使用Rails开发一个企业级RESTfulAPI项目;他不能让你年薪30
注意点:1.redis集群至少需要6个节点。2.redis集群至少部署在3台服务器上。3.redis的版本需要在3.0以上。4.需要ruby的支持。步骤:1.安装依赖环境:yuminstallgcc-c++2.下载ruby-2.4.6,编译安装https://cache.ruby-lang.org/pububy/2.4uby-2.4.6.tar.gztarzxf ruby-2.4.6.
在我的客户项目中,我看到很多睡眠用法0.代码看起来像这样.whiletrue......sleep0end通过阅读SO的一些答案,如this,似乎睡眠0具有一定的意义.我现在想知道的是,在时间片0期间调度其他线程运行(如果它们正在等待运行)是像ruby或python这样的langVM的工作,或者它
前情提要:第11天开始,要更深入Ruby的精髓!Ruby经典面试题目#11Ruby的block,proc,lamdba方法比较?What’sdifferencebetweenblocks,procsandlambdas?block代码内存块代码内存块是用do…end围起来,围出特定一个区域、放代码的地方。就好像跑马拉松一样,道路上会进行交通管制,把参赛者
安装环境及工具系统:RedHatEnterpriseLinuxServer工具:XShell5及Xftp5等远程工具安装包:Ruby-2.4.1及以上       Rubygems-2.6.12及以上       Redis-3.2.8及以上(3.x版本才开始支持集群功能)       Redis-3.0.0-gem及以上(该版本不一定要和red
 今天在做Redis的Cluster集群的时候,在执行geminstallredis时,提示如下错误:geminstallredisERROR:Errorinstallingredis:redisrequiresRubyversion>=2.2.2.CentOS7yum库中ruby的版本支持到2.0.0,可gem安装redis需要最低是2.2.2,采用rvm来更新ruby:1
我试图在Rails4中制作应用程序.我正在挣扎.我正在尝试合并一个bootstrap主题,我遇到了供应商javascripts和其余代码的问题.我认为问题可能与在我的application.js中使用jQuery然后使用以’$’符号开头的供应商.js文件有关:$.circleProgress={我刚看过这个:https://learn.jqu
该内容全部为搬运,感谢作者的分享~,附有原文链接。使用ruby环境SASS学习系列之(一)---------SASS,SCSS环境搭建(Ruby) 使用node-sassSASS学习系列之(二)---------SASS,SCSS环境搭建(node-sass)通过命令编译:npmrunsassinput.scssoutput.csssass-loader在webpack打包里
我如何使用PHP5.3Closures,比如我们在Ruby中使用Blocks.我从来没有在Ruby中使用’for’循环,因为使用带有’each”read_all”inject’方法的块.我如何使用像Ruby块这样的PHP5.3闭包,并说再见’for’Loops
一、说明:搭建Redis集群时,安装geminstallredis报错: redisrequiresRubyversion>=2.2.2的报错,查了资料发现是Centos默认支持ruby到2.0.0,可gem安装redis需要最低是2.2.2二、解决办法:解决办法是先安装rvm,再把ruby版本提升至2.3.31.安装curlsudoyuminstal
compass.app是集成了sass的工具,安装完Compass就能够使用sass。首先,上官网 可以看到官网上推荐的两种sass使用方式,application&commandlineapplication里不仅仅只有Compass,不过现在点击Compass.app进行下载。虽然通常我们说sass运行在Ruby环境下,但Compass.app安装使用并不需要