Question

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

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

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

有人可以建议我如何做到这一点吗？源代码位于https://github.com/keithrbennett/our_airports。如果回答，请假设我对CSS，Rails等一无所知。

Answer 1

我想我可以帮助您。因此，无需覆盖默认的引导程序代码。这是不可行的。让我们采取更通用的路径。

对于每个布局文件，都有一个相似的名称文件，该文件在资产中为样式表和JavaScript生成。就您而言，您正在使用application.html.erb作为布局文件。因此，rails生成了两个文件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.

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

1 个答案: