将LESS版本的Bootstrap-Material-Design集成到Rails项目中 [英] Integrate LESS version of Bootstrap-Material-Design to Rails Project
问题描述
我使用这个gem bootstrap-material-design 这是一个sass版本的 https://github.com/FezVrasta/bootstrap-material-design 库,但最近我注意到sass版本已不再保留。
I am using this gem bootstrap-material-design which is a sass version of https://github.com/FezVrasta/bootstrap-material-design library but recently I have noticed that sass version is no longer maintained.
问题我面对这个宝石是它不会打开按钮和闪光灯
Problem i am facing with this gem is that it doesn't turn buttons and flash messages to material styled.
一个解决方案: https://github.com/FezVrasta/bootstrap-material-design/issues/535 是使用LESS版本,但我不知道如何集成LESS本图书馆的版本。
已经有人这样做了?
One solution as suggested here: https://github.com/FezVrasta/bootstrap-material-design/issues/535 is to use LESS version but I dont know how to Integrate the LESS version of this Library. anyone has done this already ?
UPDATE :
case任何人都希望添加Bootstrap-Material-Design到他们的网站,而不使用任何框架或服务器端语言,如Ruby,PHP等...,只是与HTML5,CSS3和JS。他们可以按照以下说明操作:
In case anyone is looking to add Bootstrap-Material-Design to their site without using any framework or server side language like Ruby, PHP etc..., just with HTML5, CSS3 and JS. they can follow these instructions below:
安装和下载bootstrap-material文件夹
bower install bootstrap-material-design
链接bootstrap css和材料css缩小文件
Link bootstrap css and material css minified file under head tag
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="./bower_components/bootstrap-material-design/dist/css/material-fullpalette.min.css">
链接Javascript文件
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
最后,您必须使用此脚本在您的身体底部初始化一些材质组件
<script>
$(document).ready(function() {
$.material.init();
});
</script>
推荐答案
首先安装Rails, http://guides.rubyonrails.org/getting_started.htmlrel =nofollow noreferrer> http://guides.rubyonrails.org/getting_started.html 。然后,您可以通过在控制台中运行以下命令来创建新的Rails应用程序:
First install Rails, see: http://guides.rubyonrails.org/getting_started.html. Then you can create a new Rails app by running the following command in your console:
>> rails new material
上述命令将创建一个新的 $ c>目录,导航到此目录(
>> cd material
)。现在打开 Gemfile
并删除Sass捆绑包和在Less捆绑包:
The above command will create a new material
directory, navigate to this directory (>> cd material
). Now open the Gemfile
and remove the Sass bundle and at the Less bundle(s):
#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby
然后再次运行 bundle install
。现在转到 public
目录(>> cd public
),然后运行以下命令:
Then run bundle install
again. Now navigate to your public
directory (>> cd public
) and run the following command:
>> bower install bootstrap-material-design
现在你可以创建一个名为welcome index,通过运行以下命令:
Now you can create a controller called "welcome" with an action called "index", by running the following command:
>> bin/rails generate controller welcome index
上述命令创建了 /views/welcome/index.html.erb
文件。打开 app / views / welcome / index.html.erb
文件,并写出如下所示的内容(根据 https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/ test.html ):
The preceding command create among others the app/views/welcome/index.html.erb
file. Open the app/views/welcome/index.html.erb
file and write out the content like that shown beneath into it (according https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test.html):
<!-- Your site -->
<h1>You can add your site here.</h1>
<h2>To ensure that material-design theme is working, check out the buttons below.</h2>
<h3 class="text-muted">If you can see the ripple effect on clicking them, then you are good to go!</h3>
<p class="bs-component">
<a href="javascript:void(0)" class="btn btn-default">Default</a>
<a href="javascript:void(0)" class="btn btn-primary">Primary</a>
<a href="javascript:void(0)" class="btn btn-success">Success</a>
<a href="javascript:void(0)" class="btn btn-info">Info</a>
<a href="javascript:void(0)" class="btn btn-warning">Warning</a>
<a href="javascript:void(0)" class="btn btn-danger">Danger</a>
<a href="javascript:void(0)" class="btn btn-link">Link</a>
</p>
<!-- Your site ends -->
然后确保 ./ app / views /layouts/application.html.erb
文件如下所示:
And after that make sure that the content of the ./app/views/layouts/application.html.erb
file look like that shown beneath:
<!DOCTYPE html>
<html>
<head>
<title>Material</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
<!-- Your site ends -->
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/ripples.min.js"></script>
<script src="/bower_components/bootstrap-material-design/dist/js/material.min.js"></script>
<script>
$(document).ready(function() {
// This command is used to initialize some elements and make them work properly
$.material.init();
});
</script>
</body>
</html>
最后重命名 app / assets / stylesheets / application.css
到 app / assets / stylesheets / application.css.less
,并将以下内容写入其中:
Finally rename app/assets/stylesheets/application.css
to app/assets/stylesheets/application.css.less
and write down the following content into it:
@import "../../../public/bower_components/bootstrap-material-design/less/material-fullpalette.less";
@color: red;
h1 {
color: @color;
}
现在您可以运行> bin / rails server
并在浏览器中打开 http:// localhost:3000 / welcome / index
。现在的结果应该如下图所示:
Now you can run >> bin/rails server
and open http://localhost:3000/welcome/index
in your browser. The result now should look like that shown in the figure beneath:
这篇关于将LESS版本的Bootstrap-Material-Design集成到Rails项目中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!