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

234

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

html css twitter-bootstrap

— Alex
источник

491

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

— smugglerFlynn
источник

поскольку идентификаторы могут использоваться только один раз, почему бы не создать #bootstrap-overridesкласс?

— Чарви

2

@chharvey: потому что вам придется рассчитывать лучше. если бы это был класс в этом примере, это был бы prio 11, и если определение css было бы после bootstrap.css, тогда мы были бы хороши. Однако это было бы довольно близко и установив его в качестве идентификатора, который значительно увеличивает prio, нам не нужно беспокоиться о вычислении prio и о том, насколько сложно проверить, правильно ли мы это делаем. проще с идентификатором, если вы хотите окончательно перезаписать значение по умолчанию.

— Хоган

только что сделал мой день Я знаю это и все еще застреваю, пытаясь понять, почему мои стили не интерпретируются.

— Хоган

3

Точки, которые вы упомянули (100 для идентификаторов, 10 для классов / псевдоклассов, 1 для селекторов тегов / псевдоэлементов), буквальны, или вы просто составили эти значения для этого примера?

— Кайл Васселла

2

Ваше объяснение хорошо, оно имеет смысл как способ объяснить это кому-то новичку в css, но вводит в заблуждение. Правильное имя для того, что вы упомянули, это css, specificityкоторый определяет «вес» каждого селектора css. Вот некоторые подробности об этом: css-tricks.com/specifics-on-css-specificity/…

— Адриано,

85

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

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

— Маркус Коттландер
источник

28

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

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

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

— Рахул Патил
источник

10

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

— Шон Уилсон

20

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

— Paramasivan
источник

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

— Алекс

Что если я тоже использую bootstrap-theme.min.css?

— Квазавр

Работал на меня даже с min css

— mimi

5

Чтобы сбросить стили, определенные для 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/ )

— Вивек Аталье
источник

3

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

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

— Виктор Хэгквист
источник

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

— Дэвид Киркланд,

@alex Ударять источники и перестраивать?

— Виктор Хэггквист

3

См. Https://bootstrap.themes.guide/how-to-customize-bootstrap.html.

Для простых переопределений CSS, вы можете добавить custom.css ниже bootstrap.css

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

Для более значительных изменений рекомендуется использовать SASS.
- создать свой собственный custom.scss
- импорт Bootstrap после изменений в custom.scss
- Например, давайте изменим фоновый цвет тела на светло-серый #eeeeee и изменим синий основной контекстный цвет на переменную $ purple Bootstrap ...
```
/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
```

— konyak
источник

2

Немного поздно, но я добавил класс в корень, а 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's 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>

— MR5
источник

-1

Осмотрите целевую кнопку на консоли.
Перейдите на вкладку элементов, затем наведите курсор мыши на код и обязательно найдите идентификатор или класс по умолчанию, используемый загрузчиком.
Используйте jQuery / javascript, чтобы перезаписать стиль / текст, вызвав функцию.

Смотрите этот пример:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

— Ананд Чаудхари
источник

-1

Я обнаружил, что (начальная загрузка 4) оставляя свой собственный CSS позади bootstrap.css а .js - лучшее решение.

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

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

— Генри
источник

-3

Дайте идентификацию легенде и примените 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;
}

— Амар Гаур
источник

-9

Используйте jquery css вместо css. , , У jquery есть приоритет перед загрузкой 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;

}

— Аджит Санкхвал
источник

6

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

— Стивен Р. Смит