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

Мне нужно изменить 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 правильное, что я должен сделать вместо этого?

Чтобы было ясно, я хочу удалить все эти стили легенды и использовать родительские значения 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;
}

Ответы

Ответ 1

Использование !important вариант не очень хороший вариант, так как вы, скорее всего, захотите переопределить свои собственные стили в будущем. Это оставляет нас с приоритетами CSS.

По сути, каждый селектор имеет свой собственный числовой "вес":

  • 100 баллов за идентификаторы
  • 10 баллов за занятия и псевдоклассы
  • 1 балл за селекторы тегов и псевдоэлементы
  • Примечание: если элемент имеет встроенный стиль, который автоматически выигрывает (1000 баллов)

Среди двух стилей селектора браузер всегда выберет тот, у кого больше вес. Порядок ваших таблиц стилей имеет значение только тогда, когда приоритеты равны - поэтому непросто переопределить 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;
}

Ответ 2

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

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

Ответ 3

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

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

  1. Всегда загружайте пользовательский CSS после базового CSS файла (не отвечает).
  2. Избегайте использования !important если это возможно. Это может переопределить некоторые важные стили из базовых файлов CSS.
  3. Всегда загружайте bootstrap-responseive.css после custom.css, если вы не хотите терять медиазапросы. - ДОЛЖЕН СЛЕДОВАТЬ
  4. Предпочитаю изменять необходимые свойства (не все).

Ответ 4

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

Ответ 5

Если вы планируете вносить какие-либо довольно большие изменения, было бы неплохо сделать их непосредственно в самом загрузочном процессоре и перестроить его. Затем вы можете уменьшить объем загружаемых данных.

Пожалуйста, обратитесь к Bootstrap на GitHub для руководства по сборке.

Ответ 6

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

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

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

Ответ 7

Чтобы сбросить стили, определенные для legend в начальной загрузке, вы можете сделать следующее в вашем файле CSS:

legend {
  all: unset;
}

Ссылка: https://css-tricks.com/almanac/properties/a/all/

Свойство all в CSS сбрасывает все свойства выбранного элемента, кроме свойств direction и unicode-bidi, которые управляют направлением текста.

Возможные значения: initial, inherit и не unset.

Примечание: свойство clear используется в связи с float (https://css-tricks.com/almanac/properties/c/clear/).

Ответ 8

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

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

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

Ответ 9

Дайте ID легенде и примените CSS. Например, добавьте id hello в legend(), 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;
}

Ответ 10

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

}