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

Question

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

我知道在StackOverflow等上有几个类似的问题，但是我已经看过它们而没有找到解决我特定问题的方法。

从我读过的内容来看，Bootstrap有一个可以编辑的默认文件，但由于我使用的是包含Bootstrap代码的Ruby bootstrap gem，并且该gem可以随时更新，这不是一个好主意直接修改该文件。

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

Answer 1

我想我可以帮助你。因此，不需要覆盖默认的引导代码。这是不可行的。让我们采取更广泛的路径。

对于每个布局文件，都有一个类似的名称文件，它在资产中为样式表和javascripts生成。在您的情况下，您使用application.html.erb作为布局文件。因此，rails生成了2个文件application.css（后来你将其重命名为.scss以使其与bootstrap 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.