Как я могу переопределить стили CSS Bootstrap?

Question

Как я могу переопределить стили CSS Bootstrap?

138

Мне нужно изменить 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;
}

Alex 21 дек. 2013, в 16:14

Источник

Теги:

twitter-bootstrap

html

css

8 ответов

Ещё вопросы

smugglerFlynn · Answer 1 · 2014-12-30T11-20-00.000Z

Использование !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;
}

поскольку идентификаторы могут использоваться только один раз, почему бы не сделать #bootstrap-overrides классом?
@chharvey: потому что вам придется рассчитывать лучше. если бы это был класс в этом примере, это был бы prio 11, и если определение css было бы после bootstrap.css, тогда мы были бы хороши. Однако это было бы довольно близко и установив его в качестве идентификатора, который значительно увеличивает prio, нам не нужно беспокоиться о вычислении prio и о том, насколько сложно проверить, правильно ли мы это делаем. проще с идентификатором, если вы хотите окончательно перезаписать значение по умолчанию.
только что сделал мой день Я знаю это и все еще застреваю, пытаясь понять, почему мои стили не интерпретируются.
Потрясающее объяснение, спасибо, что поделились
Точки, которые вы упомянули (100 для идентификаторов, 10 для классов / псевдоклассов, 1 для селекторов тегов / псевдоэлементов), буквальны, или вы просто составили эти значения для этого примера?
Ваше объяснение хорошо, оно имеет смысл как способ объяснить это кому-то новичку в css, но вводит в заблуждение. Правильное название для того, что вы упомянули, является specificity CSS, которая определяет «вес» каждого селектора CSS. Вот некоторые подробности об этом: css-tricks.com/specifics-on-css-specificity/…
Можно ли было бы использовать этот подход, чтобы просто добавить id = "bootstrap-overrides" к элементу <html>, таким образом, заставляя всю страницу использовать собственный CSS, когда он доступен?

Markus Kottländer · Answer 2 · 2013-12-21T18-17-00.000Z

В разделе заголовка вашего 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/

Все остальное - это просто копирование/вставка и редактирование стилей.

помог изменить <тип сценария ... для <ссылка href ...

Rahul Patil · Answer 3 · 2013-12-21T18-50-00.000Z

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

Вот некоторые рекомендации, которые я лично придерживаюсь:

Всегда загружайте пользовательский css после базового файла css (не реагируйте).
Избегайте использования! важно, если это возможно. Это может переопределить некоторые важные стили из базы.
Всегда загружайте bootstrap-responsive.css после custom.css, если вы не хотите потерять медиа-запросы. - ДОЛЖНО СЛЕДУЕТ
Предпочитает модифицировать требуемые свойства (не все)...

Надеюсь, у вас есть ответ.

Мы в нашей организации следуем этим лучшим практикам для достижения наилучшей настройки.

поскольку bootstrap-responsive.css больше не существует, это все еще остается верным, или это больше не актуально?

Paramasivan · Answer 4 · 2013-12-21T17-40-00.000Z

Свяжите свой файл 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;)

Да, я уже сделал это. Извините, мой вопрос не был ясен. Мой вопрос спрашивал, что делать в custom.css, чтобы переопределить стили из bootstrap.min.css.
Что делать, если я также использую bootstrap-theme.min.css?

Victor Häggqvist · Answer 5 · 2013-12-21T19-10-00.000Z

Если вы планируете внести какие-либо значительные изменения, может быть хорошей идеей сделать их непосредственно загрузочными и перестроить. Тогда вы можете уменьшить загрузку загружаемых данных. Пожалуйста, обратитесь к Bootstrap на GitHub для руководства по строительству.

В зависимости от степени требуемой настройки это может быть самый простой вариант. Например, изменение любого цвета темы потребовало бы так много переопределений, что я бы предпочел выбрать изменение шаблона и пользовательскую сборку.
Что если вам нужно обновить Bootstrap в будущем?
@alex Ударять источники и перестраивать?

mr5 · Answer 6 · 2017-12-10T09-16-00.000Z

Немного поздно, но я добавил, что я добавил класс в корень div, затем расширяет каждый элемент начальной загрузки в моей таблице стилей:

CSS

.overrides .list-group-item {
  border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { ... }

HTML

<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>

Henry · Answer 7 · 2017-11-25T12-14-00.000Z

Я выяснил, что (bootrap 4) лучше всего подходит для вашего onw css за bootstrap.css и .js.

Найдите элемент, который хотите изменить (проверить элемент), и используйте то же самое объявление, затем оно будет отменено.

Мне потребовалось немного времени, чтобы понять это.

Ajeet Sankhwal · Answer 8 · 2017-05-29T02-49-00.000Z

-1

Используйте 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;

}

Ajeet Sankhwal 29 май 2017, в 02:49

9

Это просто так неправильно и плохая практика кодирования.
db306 29 июнь 2017, в 17:02
5

HTML должен использоваться для обеспечения структуры, CSS должен использоваться для обеспечения стиля, а Javascript (включая jQuery) должен использоваться только для обеспечения интерактивности. Использование jQuery для переопределения стилей противоречит принципам хорошей архитектуры и будет чрезвычайно запутанным для любого, кто пытается работать над кодом через 6 месяцев.
Stephen R. Smith 15 июль 2017, в 21:44