Як я можу змінити 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

— Олексій
джерело

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

— контрабандист Флінн
джерело

оскільки ідентифікатори можна використовувати лише один раз, чому б не зробити #bootstrap-overridesклас?

— chharvey

2

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

— hogan

щойно зробив свій день. Я знаю це і все ще застрягаю, намагаючись зрозуміти, чому мої стилі не інтерпретуються.

— hogan

3

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

— Kyle Vassella

2

Ваше пояснення добре, воно має сенс як спосіб пояснити це комусь новому в css, але вводить в оману. Правильна назва названого вами css - це css, specificityякий визначає "вагу" кожного селектора css. Ось кілька деталей про це: css-tricks.com/specifics-on-css-specificity/…

— Адріано

85

У головному розділі html розмістіть свій custom.css нижче bootstrap.css.

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

Тоді в custom.css ви повинні використовувати той самий селектор для елемента, який ви хочете переоформити. У випадку з legendцим він просто залишається legendу вашому custom.css, оскільки у завантажувальному інструменті немає конкретних селекторів.

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-response.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;)

— Парамасіван
джерело

Так, я це вже робив. Вибачте, моє запитання не було зрозумілим. У мене було запитання, що робити в custom.css, щоб замінити стилі з bootstrap.min.css.

— Олексій

Що робити, якщо я також використовую bootstrap-theme.min.css?

— Квазавр

Працював для мене навіть з min css

— mimi

5

Щоб скинути стилі, визначені legendв bootstrap, у вашому файлі css можна виконати наступне:

legend {
  all: unset;
}

Посилання: https://css-tricks.com/almanac/properties/a/all/

Усі властивості в CSS скидають усі властивості обраного елемента, крім властивостей напряму та unicode-bidi, які керують текстовим напрямком.

Можливі значення:: initial, inherit& unset.

Бічна примітка: clearвластивість використовується стосовно float( https://css-tricks.com/almanac/properties/c/clear/ )

— Вівек Аталіє
джерело

3

Якщо ви плануєте внести якісь досить великі зміни, можливо, буде непоганою ідеєю внести їх безпосередньо в саму завантажувальну програму та відновити її. Потім ви могли зменшити кількість завантажених даних.

Будь ласка, зверніться до Bootstrap на GitHub для посібника зі збірки.

— Віктор Хяггвіст
джерело

Залежно від обсягу необхідної настройки це може бути найпростіший варіант. Наприклад, для зміни будь-яких кольорів теми знадобиться стільки відмінок, що я б краще обрав для зміни шаблону та власної збірки.

— Девід Кіркленд

@alex Bump джерела та відновити?

— Віктор Хяггвіст

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, а синій основний контекстний колір змінимо на фіолетову змінну 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";
```

— коньяк
джерело

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

Я з'ясував, що (bootstrap 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 місяців.

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