[英]Integrate LESS version of Bootstrap-Material-Design to Rails Project
我正在使用这个gem bootstrap-material-design ,它是https://github.com/FezVrasta/bootstrap-material-design库的sass版本,但最近我注意到不再维护sass版本。
问题我用这种宝石所面临的是,它不转按钮和闪光灯消息风格的材料。
这里建议的一种解决方案 : https : //github.com/FezVrasta/bootstrap-material-design/issues/535使用LESS版本,但是我不知道如何集成该库的LESS版本。 有人已经这样做了吗?
更新 :
如果有人希望将Bootstrap-Material-Design添加到他们的站点,而无需使用任何框架或服务器端语言(如Ruby,PHP等),仅使用HTML5,CSS3和JS。 他们可以按照以下说明进行操作:
安装和下载引导材料文件夹
bower install bootstrap-material-design
在head标签下链接引导CSS和材质CSS缩小文件
<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.html 。 然后,您可以通过在控制台中运行以下命令来创建新的Rails应用程序:
>> rails new material
上面的命令将创建一个新的material
目录,导航到该目录( >> cd material
)。 现在打开Gemfile
并删除Sass捆绑包和Less捆绑包:
#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby
然后再次运行bundle install
。 现在,导航到您的public
目录( >> cd public
)并运行以下命令:
>> bower install bootstrap-material-design
现在,您可以通过运行以下命令来创建一个名为“ welcome”的控制器以及一个名为“ index”的操作:
>> bin/rails generate controller welcome index
除其他外,上述命令创建app/views/welcome/index.html.erb
文件。 打开app/views/welcome/index.html.erb
文件并写出下面显示的内容(根据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
文件的内容如下所示:
<!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
并将以下内容写下来:
@import "../../../public/bower_components/bootstrap-material-design/less/material-fullpalette.less";
@color: red;
h1 {
color: @color;
}
现在,您可以运行>> bin/rails server
并在浏览器中打开http://localhost:3000/welcome/index
。 现在,结果应如下图所示:
如果您打算使用Aufree的这款gem ,那么按照文档进行操作实际上非常简单。
将宝石添加到您的宝石文件中,并添加更少的轨道
gem 'less-rails'
gem 'bootstrap-material-design'
然后捆绑。
现在,转到您的application.js文件并添加
//= require bootstrap-material-design
然后进入application.css文件并添加
*= require bootstrap-material-design
之后,重新启动服务器。 应该很好走
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.