ruby-on-rails - 使用 rails 应用程序安装 Bootstrap 的最佳方法是什么？

Question

我是rails的新手，所以我想问一下如何在rails中使用bootstrap？
在学习后端开发之前，我曾经简单地在 html 文件的 html 标记的头部调用它，如下所示:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

所以我想知道在rails中做这件事的正确方法是什么？我是否应该这样做并将这些调用放在应用程序布局 View 文件的 html 标记的头部(jQuery 除外，因为它已经实现了)？

因为如果就这么简单，那为什么人们要为 bootstrap 制作特殊的 gem 呢？

我很确定有很多我遗漏或不知道的点，所以我希望得到一些澄清和指导。

PS:rails 应用程序已经存在，我只是想使用 Bootstrap 来调整设计..

Answer 1

为什么要安装 Bootstrap gem？

由于 rails 使用 asset pipeline要缩小和压缩样式表、javascript 和图像，使用 sass 版本的 bootstrap 是包含 bootstrap 的首选方法，而不是简单地将 bootstrap 包含在应用程序布局 View 中。此外，如果您只是在头文件中包含 bootstrap，则包含的文件必须是 bootstrap 的编译版本(它只是一个 css 文件)。但是，由于我们将在您的应用程序中包含 sass 版本的 bootstrap，您将可以访问 bootstrap 的 sass 变量、mixin 和其他与 sass 相关的出色功能。您无法通过在应用程序布局 View 中包含已编译 Assets 来获得该功能。通过在您的 application.scss 文件中导入 sass，rails 将即时编译您的 Bootstrap 和 Assets ，并允许您在设计应用程序时更加灵活。

将 Bootstrap 添加到您的 Rails 应用程序

根据bootstrap-sass gem , 你需要添加

'gem 'bootstrap-sass'

到你的 Gemfile 然后运行

bundle install

接下来，您需要在应用程序 css list 文件中导入 Bootstrap 样式表。但是，默认情况下， list 文件被命名为:

app/assets/stylesheets/application.css

但是您应该将其重命名为使用 .scss 扩展名(或 .sass 扩展名)，如下所示:

app/assets/stylesheets/application.scss

现在，删除 application.scss 文件中的所有内容并添加以下两行:

@import "bootstrap-sprockets";
@import "bootstrap";

从现在开始，您需要手动处理 scss 文件的导入。

接下来，要使 Bootstrap 的 javascript 帮助程序可用，您需要添加以下行:

//= require bootstrap-sprockets

给你的

app/assets/javascripts/application.js

您需要添加该行，使您的 application.js 文件如下所示:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory,   lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .