将 Bootstrap-Material-Design 的 LESS 版本集成到 Rails 项目

Question

我正在使用这个 gem bootstrap-material-design which is a sass version of https://github.com/FezVrasta/bootstrap-material-design 库，但最近我注意到 sass 版本不再维护。

我面临的问题 gem 是它不会将按钮和 flash 消息转换为 material 样式。

一个 解决方案 如这里所建议： https://github.com/FezVrasta/bootstrap-material-design/issues/535 是使用 LESS 版本，但我不知道如何集成此库的 LESS 版本。有人已经这样做了吗？

更新:

如果有人希望在不使用任何框架或服务器端语言（如 Ruby、PHP 等）的情况下将 Bootstrap-Material-Design 添加到他们的网站。 ..，仅使用 HTML5、CSS3 和 JS。他们可以按照以下说明操作：

安装下载bootstrap-material文件夹

bower install bootstrap-material-design

Link bootstrap css 和 material css head 标签下的缩小文件

<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">

Link 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>

最后，您必须使用 body 底部的此脚本初始化一些 material 组件

<script>
$(document).ready(function() {
  $.material.init();
});
</script>

Answer 1

先安装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。现在的结果应该如下图所示：

Answer 2

如果你打算使用this gem by Aufree，那么按照文档其实很简单。

将 gem 添加到您的 gem 文件中，同时少添加 rails

gem 'less-rails' 

gem 'bootstrap-material-design'

然后捆绑。

现在，转到您的 application.js 文件并添加

//= require bootstrap-material-design

然后继续 application.css 文件并添加

*= require bootstrap-material-design

之后重新启动您的服务器。应该可以了

将 Bootstrap-Material-Design 的 LESS 版本集成到 Rails 项目

Integrate LESS version of Bootstrap-Material-Design to Rails Project

css

ruby-on-rails

twitter-bootstrap-3

less

bootstrap-material-design