#html #css #twitter-bootstrap #bootstrap-4
#HTML #css #twitter-bootstrap #bootstrap-4
Вопрос:
Я новичок в Bootstrap, и сейчас я изучаю Bootstrap
и у меня есть вопрос о редактировании классов начальной загрузки
Я хочу отредактировать классы начальной загрузки, например, я хочу изменить размер и цвет границы ,
Я создаю файл (main.css) и вызываю класс, например:table, и определяю новую границу и цвет в main.css:
.table{
border : 2px solid red;
}
но этот код в main.css не работает!
Следует отметить, что я вызываю файл main.css в моем html с помощью этого кода :
<link rel="stylesheet" type="text/css" href="main.css">
Комментарии:
1.
border:2px solid;developer.mozilla.org/en-US/docs/Web/CSS/border2. попробуйте добавить !important к свойству как, .table{ граница: 2 пикселя сплошным красным цветом !важно};
Ответ №1:
Предполагая, что вы используете те же классы селектора, которые влияют на элемент, для которого вы хотите изменить границу (вы можете проверить это с помощью инструментов проверки в браузере и просмотра CSS), убедитесь, что вы включаете свой собственный файл CSS ПОСЛЕ начальной загрузки.
Пожалуйста, также обратите внимание, что некоторые классы начальной загрузки включают !important в некоторые правила стиля, это означает, что правило не будет переопределено CSS без атрибута !important (.table не имеет этого, но вы можете изменить класс, который это сделает позже).
Другим фактором, который следует учитывать, является то, что ваш браузер может кэшировать ваши файлы CSS, поэтому любые изменения могут не отображаться в вашем браузере. Вы должны очистить этот кеш, чтобы посмотреть, поможет ли это.
Комментарии:
1. Это правильный путь! Я должен согласиться
!important, что это правильное решение, но также и грязный обходной путь. Этого я бы не предлагал.2. Спасибо, ваше описание идеально
Ответ №2:
Класс с именем .table очень общий, возможно, вам придется еще раз подумать над соглашением об именовании.
HTML
<table class="table table-bordered table-bordered--custom">...<table>
css
.table-bordered--custom td, .table-bordered--custom th {
border: 2px solid red !important;
}
https://codepen.io/omarmakled/pen/xeazpY
Комментарии:
1. Class .table используется в bootstrap, оригинальный плакат желает заменить стили в этом классе своими собственными, поэтому они должны использовать одни и те же селекторы. в данном случае это был бы класс .table.
Ответ №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;
}