Question

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

Answer 1

您正在使用许多Rails开发人员首选的bootstrap-sass gem。所以Twitter Bootstrap CSS文件在gem中（在 vendor / assets / stylesheets / 中）。

开发人员使用gem来包含Bootstrap文件，因为通过简单地更新gem来释放新的Bootstrap版本会更容易更新（加上gems是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 Flash消息和表单构建器。如果您想了解更多信息，本文可能会有所帮助。

Answer 2

不幸的是，如果您使用gem，则会隐藏css文件。如果你做bundle show bootstrap-sass，你会看到gem的文件在哪里，你可以看到那里使用的样式表。

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

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

Answer 3

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

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

并包含bootstrap源，并覆盖。

@include "bootstrap"; 

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

@include "bootstrap-responsive";

并确保bootstrap_overrides.css.scss文件中包含application.css。

我的Rails应用程序中的Bootstrap CSS在哪里？

3 个答案: