如何将Boostrap模板实现到Rails中

Question

我是一个相对较新的ruby程序员，我正在寻求实现此boostrap模板：

https://github.com/almasaeed2010/AdminLTE/

进入Rails应用程序，但我不确定该如何去做。 我注意到它使用了LESS，但我相信Rails使用了SASS，所以即时通讯必须进行一些转换吗？ 如果有人能给我简短的步骤来完成这项工作，那将是很好的。

Answer 1

今天早上我只需要自己解决这个问题。 Admin LTE很棒，请享受：

安装宝石：

（摘自GitHub上的项目文档 ）

将gem添加到应用程序的Gemfile ：

gem 'adminlte-rails'

然后运行bundle安装Gem：

$ bundle

另外，您可以使用gem命令安装它：

$ gem install adminlte-rails

---

集成到您的项目中：

最后，为了将主题与项目的其他样式表集成在一起，请将以下内容添加到app/assets/javascripts/application.js ：

//= require bootstrap.min
//= require admin-lte

并将以下内容添加到您的app/assets/stylesheets/application.css ：

*= require bootstrap
*= require font-awesome
*= require ionicons
*= require admin-lte

之后，您应该能够使用通过AdminLTE模板安装的所有类来为Project设置样式。 让我知道，如果您遇到其他障碍，我将广泛使用该主题，同时将仪表板应用程序集成为大型项目的前端。

Answer 2

如果您希望通过Bower安装AdminLTE（和Font Awesome），请按照以下说明进行操作：

我假设您已经安装了Bower。 否则，请参阅安装Bower 。

创建.bowerrc ，如下所示：

{
  "directory": "vendor/assets/bower_components"
}

运行bower init命令创建bower.json 。 您可以按Enter键回答每个问题。

如果您使用Git管理源代码，则将vendor/assets/bower_components添加到.gitignore 。

安装AdminLTE和Awesome字体：

$ bower install admin-lte font-awesome --save

app/assets/javascripts/application.js添加到app/assets/javascripts/application.js ：

//= require admin-lte/bootstrap/js/bootstrap
//= require admin-lte

将以下几行插入到最后一行之前的app/assets/stylesheets/application.css ：

 *= require admin-lte/bootstrap/css/bootstrap
 *= require admin-lte
 *= require font-awesome

[UPDATE]

您需要阅读以下文章，才能在生产模式下使用Bower安装的font-awesome。

https://github.com/platanus/guides/blob/master/setup/fontawesome-bower-rails.md

Answer 3

一般来说，根据Ivan Storck的这篇文章，您可以使用以下方法之一

1. 从源下载
2. 使用包含Rails引擎的Ruby Gem （由@devynspencer描述）
3. 使用Bower并配置Rails （由@Tsutomo描述）
4. 使用Bower-Rails宝石（耙形）
5. 使用Rails-Assets.org （捆绑器样式）

方法4和5是更先进的日期比宝石版本（第2号），也比使用两个系统 （第3号）来管理的依赖吸尘器 。 （在下面的评论中，我的观点和@ 1.44mb有不同的观点 。）

我从gem版本更改为Rails-Assets.org，并且需要对application.js和application.css.scss进行最小的更改。 但是，我需要将skin-blue.css添加到我的资产路径和application.css.scss文件之一。

请阅读Ivan Storck的文章，并查看相应的链接以了解更多信息。

• 轨资产
• 凉亭护栏

Answer 4

如果您使用的是Twitter Bootstrap 3.1+，则该项目现在有一个官方的sass端口。 参见： https : //github.com/twbs/bootstrap-sass