Bootstrap CSS 在我的 Rails 应用程序中的什么位置？答案

【问题标题】：Where in my Rails app is the Bootstrap CSS?Bootstrap CSS 在我的 Rails 应用程序中的什么位置？
【发布时间】：2013-08-08 12:36:51
【问题描述】：

学习 rails...所以我使用 bootstrap-sass gem...实际的 bootstrap CSS 文件在哪里？似乎有某种魔法正在将它们包括在内。如果我想调整 CSS 的属性怎么办......

【问题讨论】：

标签： ruby-on-rails ruby-on-rails-3 twitter-bootstrap

【解决方案1】：

您正在使用bootstrap-sass gem，这是许多 Rails 开发人员的首选。因此 Twitter Bootstrap CSS 文件位于 gem 中（在 vendor/assets/stylesheets/ 中）。

开发人员使用 gem 来包含 Bootstrap 文件，因为当发布新的 Bootstrap 版本时，只需更新 gem 就可以更轻松地进行更新（加上 gem 是 Rails 的方式，嗯？）。 bootstrap-sass gem 很受欢迎，因为 Sass 是 Rails 中样式表的默认格式。一种替代方法是 twitter-bootstrap-rails gem，它使用原生 Bootstrap LESS 格式作为样式表。

使用gem，需要修改文件app/assets/javascripts/application.js：

#app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .

最佳做法是添加一个名为 app/assets/stylesheets/bootstrap_and_overrides.css.scss 的文件：

# app/assets/stylesheets/bootstrap_and_overrides.css.scss
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";

这显示了一个覆盖 Bootstrap 主体样式以添加填充以适应 Bootstrap 导航栏的示例。然后只需在 app/assets/stylesheets/ 的附加文件中添加应用程序特定的 CSS（或 Sass）。

我写了一篇深入的文章：

Twitter Bootstrap and Rails

更详细地介绍了如何为 Twitter Bootstrap 设置应用程序布局、导航链接、Rails 闪存消息和表单构建器。如果您想了解更多，这篇文章可能会有所帮助。

【讨论】：

(at)import "bootstrap";我需要这个，因为我在顶部有“//= 需要引导程序”吗？我目前没有 (at)import "bootstrap"；一切似乎都很好。

【解决方案2】：

不幸的是，如果您使用 gem，css 文件对您是隐藏的。如果您执行bundle show bootstrap-sass，您将看到 gem 的文件在哪里，并且您可以看到其中使用的样式表。

如果您查看 gem 的文件，您会看到 vendor/assets/stylesheets/ 中使用的样式表。

我建议不要使用 gem，而是获取自己的 Bootstrap 样式表并将它们放入应用程序的 vendor/assets/stylesheets/。

【讨论】：

@slindsey3000 - 你应该听从 varatis 的建议，因为我注意到在从开发模式切换到生产模式时会遇到很多麻烦。

【解决方案3】：

CSS 文件位于 gem 中。要将它们包含在您的应用程序中，

在app/assets/stylesheets/ 中，您可以创建您选择的文件。（我称之为 bootstrap_overrides.css.scss）

并包含引导源，并覆盖。

@include "bootstrap"; 

/* here are the overrides if you want to override the styles */

@include "bootstrap-responsive";

并确保 bootstrap_overrides.css.scss 包含在您的全局 application.css 文件中。

【讨论】：