Мне нужно изменить bootstrap.css, чтобы он соответствовал моему сайту. Я чувствую, что лучше создать отдельный файл custom.css вместо того, чтобы напрямую модифицировать bootstrap.css, одна из причин заключается в том, что bootstrap.css получит обновление, я буду страдать от повторного включения всех моих изменений. Я пожертвую некоторым временем загрузки для загрузки, но это незначительно для нескольких стилей, которые я переопределяю.
Этот ход мысли правильный, не так ли? Если нет, мой вопрос ниже может быть неактуальным.
Если да, как мне переопределить bootstrap.css, чтобы удалить стиль для привязки/класса? Например, если я хочу удалить все правила стилизации для legend
:
legend {
display: block;
width: 100%;
padding: 0;
margin-bottom: 20px;
font-size: 21px;
line-height: inherit;
color: #333333;
border: 0;
border-bottom: 1px solid #e5e5e5;
}
Я могу просто удалить все это в bootstrap.css, но если мое понимание лучших практик по переопределению css верное, что я должен делать вместо этого?
EDIT:
Извините, позвольте мне улучшить мой вопрос. Я хочу удалить все эти стили для легенды и использовать значения родительского css. Итак, комбинируя ответ Пранава, буду ли я делать следующее?
legend {
display: inherit !important;
width: inherit !important;
padding: inherit !important;
margin-bottom: inherit !important;
font-size: inherit !important;
line-height: inherit !important;
color: inherit !important;
border: inherit !important;
border-bottom: inherit !important;
}
(Я надеялся найти способ сделать что-то вроде следующего:)
legend {
clear: all;
}
Использование !important
не является хорошим вариантом, так как вы, скорее всего, захотите переопределить свои собственные стили в будущем. Это оставляет нам приоритеты CSS.
В принципе, каждый селектор имеет свой собственный "вес":
100 points for IDs
10 points for classes and pseudo-classes
1 point for tag selectors and pseudo-elements
Среди двух стилей выбора браузер всегда будет выбирать тот, у кого больше веса. Порядок ваших таблиц стилей имеет значение только в том случае, если приоритеты четные - поэтому нелегко переопределить Bootstrap.
Ваша опция - проверить источники Bootstrap, выяснить, как определен определенный стиль, и скопировать этот селектор, чтобы ваш элемент имел одинаковый приоритет. Но мы как бы потеряли всю сладость Bootstrap в процессе.
Самый простой способ преодолеть это - назначить дополнительный произвольный идентификатор одному из корневых элементов на вашей странице, например: <body id="bootstrap-overrides">
Таким образом, вы можете просто префикс любого селектора CSS с вашим идентификатором, мгновенно добавив 100 элементов веса к элементу и переопределив определение Bootstrap:
/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
line-height: 1;
color: inherit;
}
/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
line-height: 1;
color: inherit;
}
/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
line-height: 1;
color: inherit;
}
В разделе заголовка вашего html разместите свой custom.css ниже bootstrap.css.
<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">
Затем в custom.css вы должны использовать тот же самый селектор для элемента, который вы хотите переопределить. В случае legend
он просто остается legend
в вашем custom.css, потому что bootstrap больше не имеет селекторов.
legend {
display: inline;
width: auto;
padding: 0;
margin: 0;
font-size: medium;
line-height: normal;
color: #000000;
border: 0;
border-bottom: none;
}
Но в случае h1
, например, вы должны позаботиться о более конкретных селекторах, таких как .jumbotron h1
, потому что
h1 {
line-height: 2;
color: #f00;
}
не будет отменять
.jumbotron h1,
.jumbotron .h1 {
line-height: 1;
color: inherit;
}
Вот полезное объяснение специфики селекторов css, которые вам нужно понять, чтобы точно знать, какие правила стиля будут применяться к элементу. http://css-tricks.com/specifics-on-css-specificity/
Все остальное - это просто копирование/вставка и редактирование стилей.
Это не должно сильно влиять на время загрузки, поскольку вы переопределяете части базовой таблицы стилей.
Вот некоторые рекомендации, которые я лично придерживаюсь:
Надеюсь, у вас есть ответ.
Мы в нашей организации следуем этим лучшим практикам для достижения наилучшей настройки.
bootstrap-responsive.css
больше не существует, это все еще остается верным, или это больше не актуально?
Свяжите свой файл custom.css как последнюю запись ниже bootstrap.css. Определения стиля Custom.css переопределяют bootstrap.css
HTML
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
Скопируйте все определения стиля легенды в custom.css и внесите в него изменения (например, margin-bottom: 5px; - Это будет превышать margin-bottom: 20px;)
Если вы планируете внести какие-либо значительные изменения, может быть хорошей идеей сделать их непосредственно загрузочными и перестроить. Тогда вы можете уменьшить загрузку загружаемых данных. Пожалуйста, обратитесь к Bootstrap на GitHub для руководства по строительству.
Немного поздно, но я добавил, что я добавил класс в корень div
, затем расширяет каждый элемент начальной загрузки в моей таблице стилей:
.overrides .list-group-item {
border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { ... }
<div class="container-fluid overrides">
<div class="row">
<div class="col-sm-4" style="background-color: red">
<ul class="list-group">
<li class="list-group-item"><a href="#">Hey</a></li>
<li class="list-group-item"><a href="#">I was doing</a></li>
<li class="list-group-item"><a href="#">Just fine</a></li>
<li class="list-group-item"><a href="#">Until I met you</a></li>
<li class="list-group-item"><a href="#">I drink too much</a></li>
<li class="list-group-item"><a href="#">And that an issue</a></li>
<li class="list-group-item"><a href="#">But I'm okay</a></li>
</ul>
</div>
<div class="col-sm-8" style="background-color: blue">
right
</div>
</div>
</div>
Я выяснил, что (bootrap 4) лучше всего подходит для вашего onw css за bootstrap.css и .js.
Найдите элемент, который хотите изменить (проверить элемент), и используйте то же самое объявление, затем оно будет отменено.
Мне потребовалось немного времени, чтобы понять это.
Используйте jquery css вместо css., jquery имеют приоритет, чем bootstrap css...
например
$(document).ready(function(){
$(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});
);
instead of
.mnu
{
font-family:myfnt;
font-size:20px;
color:#006699;
}
#bootstrap-overrides
классом?