如何在 Rails 5 应用程序中使用 Bootstrap 4 Gem 修改默认外观

Question

我在 Rails 5 应用程序中使用 Bootstrap 4。我是 web 开发的新手，正在尝试覆盖默认的视觉属性、第一个背景颜色和背景图像。

我知道在 StackOverflow 等上有几个类似的问题，但我查看了它们并没有找到针对我的特定问题的解决方案。

根据我的阅读，Bootstrap 有一个可以编辑的默认文件，但是因为我使用的是包含 Bootstrap 代码的 Ruby bootstrap gem，并且该 gem 可以随时更新，它会直接修改该文件不是一个好主意。

谁能建议我如何做到这一点？源代码位于https://github.com/keithrbennett/our_airports。如果您回答，请假设我对 CSS、Rails 等知之甚少。

Answer 1

我想我可以帮助你。 因此，无需覆盖默认引导代码。这将是不可行的。 让我们走一条更通用的路径。

对于每个布局文件，在资产中为样式表和 javascripts 生成了一个相似的名称文件。在您的情况下，您使用 application.html.erb 作为布局文件。因此，rails 生成了两个文件 application.css（您后来将其重命名为 .scss 以使其与引导 gem 兼容）和 application.js。

因此，您可能会为自定义设计编写不同的 css 文件或 js 文件。要使用这些 css 文件，您必须告诉布局文件使用哪些 css 文件或 js 文件。

您可以通过在布局的 css 和 js 文件中提及它们来告诉布局。

这是您可以遵循的过程：

第 1 步： 在 app/assets/stylesheets 中创建一个 style.css 文件

第 2 步： 在@import 'bootstrap'之后将这个文件导入到application.scss中

@import 'style'

第 3 步： 让我们选择这个文件： app/views/airports/index.html.erb

你在这里定义

<th style="width:8em;"><%= sort_link "iata_code" %></th>

将此代码粘贴到您的 style.css 中

.iata-code{
  color: #999;
  width: 8em;
}

现在将您的代码修改为：

<th class="iata-code"><%= sort_link "iata_code" %></th>

刷新页面，看看是否有任何变化。

用于背景图像或颜色 在 style.css 中添加这段代码

#for image
body { 
  background-image: image-url('pictureTitle.png'); 
}

#for color
body { 
  background: #eee; 
}

you can see different ways of adding background here.