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

Question

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

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

318

html css twitter-bootstrap

Источник

user2205206 21 дек '13 в 16:47

14 ответов

Другие вопросы по тегам html css twitter-bootstrap

user219013 30 дек '14 в 11:13 2014-12-30 11:13 · Answer 1 · 2014-12-30 11:13

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

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

100 баллов за идентификаторы
10 баллов за классы и псевдоклассы
1 балл за селекторы тегов и псевдоэлементы

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

user2560696 21 дек '13 в 17:04 2013-12-21 17:04 · Answer 2 · 2013-12-21 17:04

В разделе 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/

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

user1635060 21 дек '13 в 16:54 2013-12-21 16:54 · Answer 3 · 2013-12-21 16:54

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

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

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

user1067586 21 дек '13 в 16:50 2013-12-21 16:50 · Answer 4 · 2013-12-21 16:50

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

user171456 28 авг '18 в 05:15 2018-08-28 05:15 · Answer 5 · 2018-08-28 05:15

Обновление 2021 - Bootstrap 4 и Bootstrap 5

При переопределении Bootstrap CSS необходимо соблюдать 3 правила.

import / include перед вашими правилами CSS (переопределяет)
используйте больше CSS-специфичности (или равную), чем селекторы CSS Bootstrap
если какое-либо правило отменяется, используйте атрибут!important, чтобы принудительно применить ваши правила. Если вы следуете правилам 1 и 2, в этом нет необходимости, за исключением случаев использования служебных классов Bootstrap, которые часто содержат! Important, как описано здесь.

Да, переопределения следует помещать в отдельный (или custom.css) файл, чтобы он оставался неизменным. Это упрощает обновление версии Bootstrap, не влияя на переопределения. Ссылка на следующее после, чтобы переопределения работали.

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

Просто добавьте необходимые изменения в собственный CSS. Например:

      legend {
  display: block;
  width: inherit;
  padding: 0;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  white-space: initial;
}

Примечание. Не рекомендуется использовать !importantв CSS переопределения, если вы не переопределяете один из классов Bootstrap Utility . Специфика CSS всегда позволяет одному классу CSS переопределять другой. Просто убедитесь, что вы используете селектор CSS, такой же или более конкретный, чем bootstrap.css.

Например, рассмотрим темный цвет ссылки на панели навигации Bootstrap 4. Вот ...

      .navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}

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

      #mynavbar .navbar-nav .nav-link {
    color: #ffcc00;
}

Когда селекторы CSS одинаковы, последний имеет приоритет, поэтому styles.css должен следовать bootstrap.css.

user332188 28 авг '18 в 04:57 2018-08-28 04:57 · Answer 6 · 2018-08-28 04:57

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

user1408866 05 авг '19 в 23:12 2019-08-05 23:12 · Answer 7 · 2019-08-05 23:12

См. 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";
```

user2304737 10 дек '17 в 08:35 2017-12-10 08:35 · Answer 8 · 2017-12-10 08:35

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

user1592572 21 дек '13 в 17:11 2013-12-21 17:11 · Answer 9 · 2013-12-21 17:11

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

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

user7258941 25 ноя '17 в 10:21 2017-11-25 10:21 · Answer 10 · 2017-11-25 10:21

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

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

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

user9980798 26 май '22 в 03:01 2022-05-26 03:01 · Answer 11 · 2022-05-26 03:01

для пользователей ruby on rails --

в файле css вашего приложения убедитесь, что файл начальной загрузки упоминается первым, а затем пользовательская таблица стилей css. Таким образом, последний код CSS, который вы написали, перезапишет первый. Используйте !important, если это необходимо.

       *= require 'bootstrap.min'
 *= require_self
 *= require 'name_of_your_stylesheet'

user11318078 03 авг '19 в 20:48 2019-08-03 20:48 · Answer 12 · 2019-08-03 20:48

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

См. Этот пример:

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

user9845278 25 май '18 в 07:10 2018-05-25 07:10 · Answer 13 · 2018-05-25 07:10

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

-2

Источник

user9845278 25 май '18 в 07:10

user4411009 29 май '17 в 02:04 2017-05-29 02:04 · Answer 14 · 2017-05-29 02:04

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

}

-5

Источник

user4411009 29 май '17 в 02:04