9

The website https://wrapbootstrap.com/ has themes which were made using Twitter Bootstrap. Each of these themes include different versions of Twitter Bootstrap along with other various libraries and versions (jquery, fontawesome, etc...)

How do I add these themes to my existing Rails app? What are the steps?

I'm especially curious about the conflicts that may arrise if I'm already using a different version of jquery, twitter bootstrap, fontawesome, and others (as declared in the Gemfile).

Thank you

4

5 回答 5

6

您可以将您从 wrapbootstrap 购买的主题中的 css 添加到您的 assets > application.css.scss 文件中。并在 Rails 应用程序视图中使用主题附带的 html 标签，以便应用 css 样式。

另外，我建议使用gem 'sass-rails'导入标准引导样式。

这是一个教程，可帮助您开始将引导程序添加到 Rails 应用程序。添加主题 css 和 html 标签由您决定。

http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast

于 2012-11-28T21:23:05.880 回答
3

我为几个项目做了这个，我主要同意迈克上面的回答。这是我看到的一些问题。

我们从 Rails 上的一个标准项目开始，我们所有的动态（Ember）/静态视图都基于 Bootstrap CSS。当主要的内部页面启动并展示功能时，我们专注于登录页面。到这个时候，我们已经有了 bootstrap 的 gem，fontawesome 添加到我们的 Gemfile 中。

所以其中一件事是从 Gemfile 中删除这些宝石“bootstrap”、“fontawesome”。将这些作为 wrapbootstrap 转储的一部分包括在内。

此外，随着集成的进展，您可能会意识到许多通用代码正在重复，拆分页面组件最符合您的利益：页眉、页脚以及部分 Rails 视图。它大大节省了编辑工作。

我发现在您仍处于集成阶段时保持所有事情都非常有用的另一件事是将您的 CSS/JS 包含拆分为从 wrap bootstrap 导入的页面和您已经拥有的页面。因此，如果您打算将所有现有页面迁移到新主题中抓取您的 CSS，则可以分阶段合并，否则可以让它们共存。

您必须在 routes.rb 中添加新条目，如果您还没有它们，控制器调用来支持这些页面。about、contactus、team 等点赞

如果你使用 Ember/Backbone 之类的东西，那么你必须在某些页面中管理单个寻呼机应用程序的共存，这些页面可能链接到 Wrapbootstrap 页面，也可能不链接到 Wrapbootstrap 页面。

当我将 wrapbootstrap 主题集成到 Rails-EmberJS 应用程序之上时，这就是我必须注意的所有事情。

于 2013-05-29T12:23:49.967 回答
2

有趣的时机，因为我只需要自己做这件事。我对 Rails 还很陌生，所以这可能不是最好的解决方案，但这就是我如何让它工作的......

注意：每个主题都不同，因此这可能不是一种适合所有方法的方法。

1）我的主题是用Middleman构建的，它期望独立运行或在Sinatra实例上运行。

2) 为了在 Rails 上获得主题，我必须添加 compass gem、sass gem、sass-rails gem 和 compass-rails gem 才能正常工作。我假设您可以安装这些（如果您的主题需要）。

3) 假设您有一个 Rails 应用程序准备好运行，进入您的资产目录并备份您的 .js、.css 以及所有字体和图像。将您的主题资产文件放在适当的位置。

4) 现在对你的视图层做同样的事情。您可能有一个 partials 和/或 pages 文件夹，您可以将其放置在 views 目录中。您需要将 application.erb.html 和任何导航文件放在 views 目录下的 layouts 文件夹中。同样，请确保先备份原始文件。

5) 如果您的主题是为 Sinatra 设计的，您可能有一个 Config.rb 文件。我将这个文件中的逻辑移到了我的 config/environment.rb 文件中。我对这一步最没有信心。如果有更好的位置，其他 Rails 开发人员可以加入。

6）启动你的服务器。您可能会遇到一些例外情况，但这是意料之中的。

7) 查看您的旧 app/assets/javascripts/application.js 文件并将其与新文件进行比较。确保新文件包含 jquery ujs 库//= require jquery_ujs。如果没有这个魔法，您的 PUT 和 DELETE HTTP 动词将无法正常工作。

8) 路径调整。我的主题包含 Font Awesome 库。为了让它工作，我不得不调整 font-awesome.scss 文件顶部的参考路径。

9) 最后，您需要在 environment.rb 文件中调试新添加的代码。Sinatra 开发人员做了很多 Route 魔术来调整导航显示。这不能很好地移植到我的环境中。我从导航模板文件中删除了许多这样的调用。完成后，我的新皮肤应用程序就启动并运行了！祝你好运。

于 2013-05-20T13:26:01.013 回答
0

确保在安装 twitter bootstrap 时，您应该在“group :assets”下将以下 gem 添加到您的 Gemfile 中

gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'

然后运行捆绑命令。

现在，您下载的主题“file_name.css”（file_name 可以是任何名称）只需将其添加到 app->assets->stylesheets 下的“stylesheets”文件夹中

然后在同一个文件夹中打开你的 application.css 文件，你会看到

*= require_tree.

将此行替换为

*= require "file_name.css"

注意：不要忘记重新编译您的资产或简单地删除 tmp/cache 文件夹的内容。

保存并重新启动服务器。它将应用你新的主题。

于 2013-06-06T07:25:22.047 回答
-1

观看本培训课程，指导您从头开始详细操作。

http://pluralsight.com/training/courses/TableOfContents?courseName=getting-started-aspdotnet-mvcservice-stack-bootstrap

于 2014-01-14T11:13:15.963 回答