Как изменить внешний вид по умолчанию с помощью Bootstrap 4 Gem в приложении Rails 5 - PullRequest
Новая
       32

Как изменить внешний вид по умолчанию с помощью Bootstrap 4 Gem в приложении Rails 5

0 голосов
/ 08 сентября 2018

Я использую Bootstrap 4 в приложении Rails 5.Я новичок в веб-разработке и пытаюсь поэкспериментировать с переопределением визуальных атрибутов по умолчанию, первого цвета фона и фонового изображения.

Я знаю, что есть несколько похожих вопросов о StackOverflow и т. Д., Но я посмотрел наони и не нашли решения моей конкретной проблемы.

Из того, что я прочитал, Bootstrap имеет файл по умолчанию, который можно редактировать, но потому что я использую гем Ruby bootstrap, который содержит Bootstrapкод, и этот драгоценный камень может быть обновлен в любое время, было бы нецелесообразно изменять этот файл напрямую.

Кто-нибудь может подсказать, как мне это сделать?Исходный код: https://github.com/keithrbennett/our_airports. Если вы ответите, предположите, что я мало знаю о CSS, Rails и т. Д.

1 Ответ

0 голосов
/ 08 сентября 2018

Я думаю, я могу помочь вам с этим. Таким образом, нет необходимости переопределять код начальной загрузки по умолчанию. Это не будет возможно. Давайте возьмем более обобщенный путь.

Для каждого файла макета есть аналогичный файл имен, который генерируется в ресурсах для таблиц стилей и JavaScript. В вашем случае вы используете application.html.erb в качестве файла макета. Итак, rails создали 2 файла application.css (которые вы позже переименовали в .scss, чтобы сделать его совместимым с загрузочным гемом) и application.js.

Следовательно, вы можете написать разные CSS-файлы или JS-файлы для ваших пользовательских проектов. Чтобы использовать эти CSS-файлы, вы должны указать файлу макета использовать CSS-файлы или JS-файлы.

вы можете сказать макет, упомянув их в файлах css и js вашего макета.

Вот процесс, которому вы можете следовать:

Шаг 1: создать файл как style.css в приложении / assets / stylesheets

Шаг 2: импортировать этот файл в application.scss после @import 'bootstrap'

@import 'style'

Шаг 3: Давайте выберем этот файл: приложение / просмотров / аэропортов / 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; 
}

здесь вы можете увидеть различные способы добавления фона.

...