[英]How to implement a boostrap template into rails
I'm a relatively new ruby programmer and i'm looking to implement this boostrap template: 我是一个相对较新的ruby程序员,我正在寻求实现此boostrap模板:
https://github.com/almasaeed2010/AdminLTE/ https://github.com/almasaeed2010/AdminLTE/
into a rails application but im not exactly sure how to go about it. 进入Rails应用程序,但我不确定该如何去做。 I noticed it uses LESS but i believe rails uses SASS so are there some conversions im going to have to do? 我注意到它使用了LESS,但我相信Rails使用了SASS,所以即时通讯必须进行一些转换吗? It'd be nice if someone could give me a brief number of steps on how to make this work in rails. 如果有人能给我简短的步骤来完成这项工作,那将是很好的。
I just had to solve this problem myself this morning. 今天早上我只需要自己解决这个问题。 Admin LTE is awesome, enjoy: Admin LTE很棒,请享受:
(From the project documentation on GitHub) (摘自GitHub上的项目文档 )
Add the gem to your application's Gemfile
: 将gem添加到应用程序的Gemfile
:
gem 'adminlte-rails'
Then run bundle
to install the Gem: 然后运行bundle
安装Gem:
$ bundle
Alternatively, you can install it with the gem
command: 另外,您可以使用gem
命令安装它:
$ gem install adminlte-rails
Finally, in order to integrate the theme with the other stylesheets of your project, add the following to your app/assets/javascripts/application.js
: 最后,为了将主题与项目的其他样式表集成在一起,请将以下内容添加到app/assets/javascripts/application.js
:
//= require bootstrap.min
//= require admin-lte
And add the following to your app/assets/stylesheets/application.css
: 并将以下内容添加到您的app/assets/stylesheets/application.css
:
*= require bootstrap
*= require font-awesome
*= require ionicons
*= require admin-lte
After that, you should be able to style your Project using all of the classes installed via the AdminLTE template. 之后,您应该能够使用通过AdminLTE模板安装的所有类来为Project设置样式。 Let me know if you run into any other snags, I'll be working with the theme extensively while putting together a dashboard app as a front-end for a larger project. 让我知道,如果您遇到其他障碍,我将广泛使用该主题,同时将仪表板应用程序集成为大型项目的前端。
If you prefer to install AdminLTE (and Font Awesome) via Bower , follow the instructions below: 如果您希望通过Bower安装AdminLTE(和Font Awesome),请按照以下说明进行操作:
I assume you have installed Bower. 我假设您已经安装了Bower。 Otherwise, see Install Bower . 否则,请参阅安装Bower 。
Create .bowerrc
as follows: 创建.bowerrc
,如下所示:
{
"directory": "vendor/assets/bower_components"
}
Run bower init
command to create bower.json
. 运行bower init
命令创建bower.json
。 You can hit the Enter key to every questions. 您可以按Enter键回答每个问题。
Add vendor/assets/bower_components
to your .gitignore
if you manage your source code with Git. 如果您使用Git管理源代码,则将vendor/assets/bower_components
添加到.gitignore
。
Install AdminLTE and Font Awesome: 安装AdminLTE和Awesome字体:
$ bower install admin-lte font-awesome --save
Add following lines to app/assets/javascripts/application.js
: app/assets/javascripts/application.js
添加到app/assets/javascripts/application.js
:
//= require admin-lte/bootstrap/js/bootstrap
//= require admin-lte
Insert following lines into app/assets/stylesheets/application.css
before the last line: 将以下几行插入到最后一行之前的app/assets/stylesheets/application.css
:
*= require admin-lte/bootstrap/css/bootstrap
*= require admin-lte
*= require font-awesome
[UPDATE] [UPDATE]
You need to read the following article in order to use font-awesome installed by Bower in production mode. 您需要阅读以下文章,才能在生产模式下使用Bower安装的font-awesome。
https://github.com/platanus/guides/blob/master/setup/fontawesome-bower-rails.md https://github.com/platanus/guides/blob/master/setup/fontawesome-bower-rails.md
In general, according to this post by Ivan Storck you could use one of the following appraoches 一般来说,根据Ivan Storck的这篇文章,您可以使用以下方法之一
Bower-Rails
gem (rake style) 使用Bower-Rails
宝石(耙形) Approach 4 and 5 are more up-to-date than Gem version (No. 2) and cleaner than using two systems (No. 3) to manage dependencies. 方法4和5是更先进的日期比宝石版本(第2号),也比使用两个系统 (第3号)来管理的依赖吸尘器 。 (Just my opinion and @1.44mb has different opinion in the following comment.) (在下面的评论中,我的观点和@ 1.44mb有不同的观点 。)
I changed from gem version to Rails-Assets.org and needed minimum changes in application.js
and application.css.scss
. 我从gem版本更改为Rails-Assets.org,并且需要对application.js
和application.css.scss
进行最小的更改。 However, I needed to add skin-blue.css
to one of my assets path and application.css.scss
file. 但是,我需要将skin-blue.css
添加到我的资产路径和application.css.scss
文件之一。
Please do read the post by Ivan Storck and see the respective links to learn more. 请阅读Ivan Storck的文章,并查看相应的链接以了解更多信息。
If you are using Twitter Bootstrap 3.1+, there is now an offical sass port of the project. 如果您使用的是Twitter Bootstrap 3.1+,则该项目现在有一个官方的sass端口。 See: https://github.com/twbs/bootstrap-sass 参见: https : //github.com/twbs/bootstrap-sass
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.