как избежать повторения начальной загрузки класса в построении темы HTML

Question

Я хочу создать html-тему и поэтому использовать bootstrap 4.

, но я должен повторить класс начальной загрузки для некоторых мест, например

<div class="row border border-top-0 mt-2 p-2 bg-info">One</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">example 2</div>
<div class="row border border-top-0 mt-2 p-2 bg-info">some thing</div>

Могу ли я объединить классы начальной загрузки в одно имя дляпример:

myclass="row border border-top-0 mt-2 p-2 bg-info"

и использовать это?

<div class="myclass">One</div>
<div class="myclass">example 2</div>
<div class="myclass">some thing</div>

Примечание: копировать и вставлять плохо. Idea.if использовать копирование и вставку, а затем, если нужно добавить еще один класс, следует добавитьвсем им

Answer 1

Я не прочитал все документы по BS4, возможно, есть возможность загрузить исходный код и изменить / изменить его.Но я советую против этого.

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

Таким образом, если вы хотите добавить другой класс в список, просто добавьте его в объявленныйстрока (myClass)

Простой пример:

const myClass = 'row border margin-top'
document.querySelectorAll('.my-row').forEach(row => row.className += ` ${myClass}`)

div {
  height:100px;
  width:100px;
  margin:5px;
}

.border {
  background:red;
}

<div class="my-row"></div>
<div class="my-row"></div>
<div class="my-row"></div>

Вариант 2. Не рекомендуется.

Загрузите исходные файлы с начальной загрузки и загрузите их в свой проект вместо загрузки URL-адреса bs4.

Затем внутри файлов вы должны найти, где ониобъявите стили каждого класса и используйте SASS (bs4 также написан на sass), чтобы создать свой собственный класс, который расширяет стили классов bs4

.myclass {
  @extend .row;
  @extend .border;
  @extend .mt-2;
  /* here you can add styles that are only specific to myclass */
}

Answer 2

Напишите собственный css

Например

.myclass { border: 1px solid #888; border-top: 0px; margin-top:2px; padding: 2px; background-color: #ccc;}