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