ruby-on-rails – 使用rails app安装bootstrap的最佳方法是什么

由于rails使用asset pipeline来缩小和压缩样式表,javascripts和图像,使用sass版本的bootstrap是包含引导程序而不是简单地在应用程序布局视图中包含引导程序的首选方法.另外,如果你只是在头文件中包含bootstrap,那么包含文件必须是bootstrap的编译版本(它只是一个css文件).但是,由于我们将在您的应用程序中包含sass版本的bootstrap,您将可以访问bootstrap的sass变量,mixins和其他与sass相关的非常棒的内容.您无法通过在应用程序布局视图中包含已编译的资产来获得该功能.通过在application.scss文件中导入sass,rails将动态编译您的引导程序和资产,并使您在设计应用程序时更加灵活.

将Bootstrap添加到rails应用程序

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

'gem 'bootstrap-sass'

到您的Gemfile然后运行

bundle install

接下来,您将要在应用程序css清单文件中导入引导程序样式表.但是,默认情况下,清单文件的名称为：

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 .