Редактирование классов начальной загрузки

Question

Я новичок в Bootstrap, и теперь я изучаю Bootstrap

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

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

Я создаю файл (main.css) и вызываю класс. Например: таблица. и определите новую границу и цвет в main.css:

.table{
border : 2px solid red;
}

но этот код в main.css не работает! Следует отметить, что я вызываю файл main.css в моем HTML с этим кодом:

<link rel="stylesheet" type="text/css" href="main.css">

Answer 1

Предполагая, что вы используете те же классы селектора, которые влияют на элемент, для которого вы хотите изменить границу (вы можете проверить это с помощью инструментов проверки в браузере и посмотреть CSS), убедитесь, что вы включаете свой собственный CSSfile AFTER bootstrap.

Обратите также внимание, что в некоторые классы начальной загрузки включены некоторые важные правила! важный, это означает, что правило не будет переопределено CSS без атрибута! важный(.table не имеет этого, но вы можете изменить класс, который делает это позже).

Еще один фактор, который следует учитывать, - это то, что ваш браузер может кэшировать ваши CSS-файлы, так как любые изменения могут не отображаться вваш браузерВы должны очистить этот кеш, чтобы посмотреть, поможет ли он.

Answer 2

Класс с именем .table является очень общим, вам может понадобиться еще раз подумать в соглашении об именах.

HTML

<table class="table table-bordered table-bordered--custom">...<table>

1007 * CSS *

.table-bordered--custom td, .table-bordered--custom th {
    border: 2px solid red !important;
}

https://codepen.io/omarmakled/pen/xeazpY

https://seesparkbox.com/foundry/bem_by_example

https://getbootstrap.com/docs/4.3/content/tables/

Answer 3

Обязательно вызовите файл main.css после файла начальной загрузки.

<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="main.css">

Кроме того, вы можете добавить! Важный оператор:

.table{
border : 2px solid red !important;
}