集成较少版本的引导-材料-设计到Rails项目
我正在使用这个gem 鞋带.材料.设计，它是https://github.com/FezVrasta/bootstrap-material-design库的sass版本，但是最近我注意到sass版本已经不再被维护了。
问题，我面临的这个创业板是，它不把按钮和闪光灯的信息，以材料样式。
这里建议的一个解决方案：https://github.com/FezVrasta/bootstrap-material-design/issues/535是使用更少的版本，但我不知道如何集成这个库的较少版本。有人做过这种事吗？
更新
如果有人想在他们的站点上添加引导-材料-设计，而不使用任何框架或服务器端语言，如Ruby等.，只需使用HTML5、CSS3和JS。他们可以按照以下指示行事：
安装和下载引导材料文件夹
bower install bootstrap-material-design
链接引导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>回答 2
Stack Overflow用户
发布于 2015-03-30 11:35:46
首先安装Rails，参见：started.html。然后，通过在控制台中运行以下命令，可以创建一个新的Rails应用程序：
>> rails new material上面的命令将创建一个新的material目录，导航到这个目录(>> cd material)。现在，打开Gemfile并移除Sass包和较少的包：
#gem 'sass-rails', '~> 5.0'
gem 'less-rails' # Less
gem 'therubyracer' # Ruby然后再次运行bundle install。现在导航到您的public目录(>> cd public)并运行以下命令：
>> bower install bootstrap-material-design现在，您可以使用名为"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。现在的结果应该如下图所示：
Stack Overflow用户
发布于 2016-04-18 18:22:07
如果您打算使用这颗宝石是Aufree的，那么实际上它在文档之后非常简单。
将gem添加到您的gem文件中，并添加更少的rails。
gem 'less-rails'
gem 'bootstrap-material-design'然后捆起来。
现在，转到您的application.js文件并添加
//= require bootstrap-material-design然后继续到application.css文件并添加
*= require bootstrap-material-design在此之后，重新启动服务器。该走了
https://stackoverflow.com/questions/29340248
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号