Как изменить основной цвет начальной загрузки?

Question 1

Можно ли изменить основной цвет начальной загрузки в соответствии с цветом бренда? В моем случае я использую бумажную тему bootswatch.

Question 2

Обновление 2020 для Bootstrap 4

Чтобы изменить основной или любой из цветов темы в Bootstrap 4 SASS, установите соответствующие переменные перед импортом bootstrap.scss. Это позволяет вашему настраиваемому scss переопределить значения! По умолчанию ...

$primary: purple;
$danger: red;

@import "bootstrap";

Демо: https://codeply.com/go/f5OmhIdre3

В некоторых случаях вы можете захотеть установить новый цвет из другой существующей переменной Bootstrap. Для этого @import сначала нужно импортировать функции и переменные, чтобы на них можно было ссылаться в настройках ...

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

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Демо: https://codeply.com/go/lobGxGgfZE

Также см .: этот ответ , этот ответ или изменение цвета кнопки в (CSS или SASS)

Также можно изменить основной цвет только с помощью CSS, но для этого требуется много дополнительных CSS, поскольку существует множество -primaryвариантов (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, и т. ...), и некоторые из этих классов имеют небольшие вариации цвета границ, наведения и активных состояний. Поэтому, если вам необходимо использовать CSS, лучше использовать целевой компонент, например, изменить основной цвет кнопки .

Эти решения также будут работать для Bootstrap 5 alpha.

Question 3

есть два пути к

http://getbootstrap.com/customize/

и измените цвет в этих настройках и загрузите настроенный бутстрап.

Или вы можете использовать sass с этой версией https://github.com/twbs/bootstrap-sass и импортировать в свои активы sass / stylesheets / _bootstrap.scss, но перед импортом вы можете изменить цвета переменных по умолчанию

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

и скомпилируйте результат

Question 4

Я создал этот инструмент: https://lingtalfi.com/bootstrap4-color-generator , вы просто помещаете первичный в первое поле, затем выбираете свой цвет и нажимаете генерировать.

Затем скопируйте сгенерированный код scss или css и вставьте его в файл с именем my-colors.scss или my-colors.css (или с любым другим именем).

Как только вы скомпилируете scss в css , вы можете включить этот файл css ПОСЛЕ начальной загрузки CSS, и все будет в порядке.

Весь процесс занимает около 10 секунд, если вы понимаете его суть, при условии, что файл my-colors.scss уже создан и включен в ваш тег head.

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

Примечание 2: этот инструмент был создан для работы с bootstrap 4 (то есть пока не с какой-либо последующей версией).

Question 5

Любой элемент с тегом primay имеет цвет @ brand-primary. Один из вариантов его изменения - это добавление настраиваемого файла css, как показано ниже:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

Развернуть фрагмент

Чтобы узнать больше о настраиваемых файлах css с помощью начальной загрузки, вот полезная ссылка: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Question 6

Бутстрап 4

Вот что сработало для меня:

Я создал свой собственный _custom_theme.scss файл с содержанием, похожим на:

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

Добавил его в начало файла bootstrap.scssи перекомпилировал (в моем случае он был в папке! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Question 7

Это может быть немного старый вопрос, но я хочу поделиться лучшим способом, который я нашел для настройки начальной загрузки. Есть онлайн-инструмент под названием bootstrap.build https://bootstrap.build/app . Он отлично работает и не требует установки или настройки инструментов!

Question 8

Правильный способ изменить основной цвет по умолчанию в Bootstrap 4.x с помощью SASS или любые другие цвета, такие как вторичный, успешный и т. Д.

Создайте следующий файл SASS и импортируйте Bootstrap SASS, как показано:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

Question 9

Использование SaSS
изменить цвет бренда

$brand-primary:#some-color;

это изменит основной цвет во всем пользовательском интерфейсе.

Используя css -
предположим, вы хотите изменить основной цвет кнопки.

btn.primary{
  background:#some-color;
}

найдите элемент и добавьте новое правило css / sass в новый файл и прикрепите его после загрузки css начальной загрузки.

Question 10

Bootstrap 4 правила

Большинство ответов здесь более или менее правильные, но все они с некоторыми проблемами (для меня). Итак, наконец, в Google я нашел правильную процедуру, как указано в специальном документе начальной загрузки: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Предположим, что бутстрап установлен в node_modules/bootstrap.

A. Создайте свой your_bootstrap.scssфайл:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

Б. В той же папке создайте _your_variables_theme.scssфайл.

C. Настройте переменные начальной загрузки в _your_variables_theme.scssфайле, следуя этим правилам:

Скопируйте и вставьте переменные по _variables.scssмере необходимости, измените их значения и удалите флаг! Default . Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в Bootstrap.

Переопределения переменных в одном файле Sass могут быть до или после переменных по умолчанию. Однако при переопределении файлов Sass необходимо выполнить переопределение до того, как вы импортируете файлы Sass для Bootstrap .

Переменные по умолчанию доступны в node_modules/bootstrap/scss/variables.scss.

Question 11

Бутстрап 5

Для начальной загрузки 5 вы можете просто перейти к основному файлу scss и добавить:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

или какие изменения вы хотите внести ...

И не забудьте сразу после этого импортировать бутстрап.

Ваш окончательный файл main.scss должен выглядеть так:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

Question 12

Начиная с Bootstrap 4, вы можете легко изменить основной цвет вашего Bootstrap , загрузив простой файл CSS на BootstrapColor.net . Вам не нужно знать SASS, и файл CSS готов к использованию для вашего сайта. Вы можете выбрать желаемый цвет, например синий, индиго, фиолетовый, розовый, красный, оранжевый, желтый, зеленый, бирюзовый или голубой цвет.

Question 13

Вы не можете изменить цвет в файле cdn.
Загрузите файл начальной загрузки.
Найдите файл bootstrap.css.
откройте этот файл (bootstrsap.css) и найдите «первичный».
измените его на желаемый цвет.

Question 14

Это очень простое решение.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

замените класс bg-dark на bg-custom .

В CSS

.bg-custom {
  background-color: red;
}

Question 15

Да, я предлагаю открыть файл .css, проверить страницу и найти цветовой код, который вы хотите изменить, и найти все и заменить (в зависимости от вашего текстового редактора) на нужный вам цвет. Сделайте это со всеми цветами, которые хотите изменить

Answer 1

93

Можно ли изменить основной цвет начальной загрузки в соответствии с цветом бренда? В моем случае я использую бумажную тему bootswatch.

css twitter-bootstrap twitter-bootstrap-3 bootstrap-4 Ashishjmeshram
источник

1

Возможный дубликат Как изменить цвет btn в Bootstrap

TylerH

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

Ли

3

Вместо переопределения CSS я рекомендую использовать инструмент настройки getbootstrap.com/customize

blurfus

Answer 2

1

Возможный дубликат Как изменить цвет btn в Bootstrap

TylerH

Answer 3

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

Ли

Answer 4

3

Вместо переопределения CSS я рекомендую использовать инструмент настройки getbootstrap.com/customize

blurfus

Answer 5

Обновление 2020 для Bootstrap 4

Чтобы изменить основной или любой из цветов темы в Bootstrap 4 SASS, установите соответствующие переменные перед импортом bootstrap.scss. Это позволяет вашему настраиваемому scss переопределить значения! По умолчанию ...

$primary: purple;
$danger: red;

@import "bootstrap";

Демо: https://codeply.com/go/f5OmhIdre3

В некоторых случаях вы можете захотеть установить новый цвет из другой существующей переменной Bootstrap. Для этого @import сначала нужно импортировать функции и переменные, чтобы на них можно было ссылаться в настройках ...

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

$theme-colors: (
  primary: $purple
);

/* finally, import Bootstrap */
@import "bootstrap";

Демо: https://codeply.com/go/lobGxGgfZE

Также см .: этот ответ , этот ответ или изменение цвета кнопки в (CSS или SASS)

Также можно изменить основной цвет только с помощью CSS, но для этого требуется много дополнительных CSS, поскольку существует множество -primaryвариантов (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, и т. ...), и некоторые из этих классов имеют небольшие вариации цвета границ, наведения и активных состояний. Поэтому, если вам необходимо использовать CSS, лучше использовать целевой компонент, например, изменить основной цвет кнопки .

Эти решения также будут работать для Bootstrap 5 alpha.

Answer 6

Для тех, кто плохо знаком с SASS и scss, как я ... пожалуйста, ознакомьтесь с npm's, gulpчтобы завершить этап компиляции.

Крис Конлан

Answer 7

2

@ Крис Почему? Скрипты сборки bootstrap npm включены в исходный код. Посмотрите полный список в файле package.json.

Джон Э

Answer 8

1

Не фронтенд-разработчик. То, что мне сказали в документации по моей теме. Удаляю, если в этом нет смысла.

Крис Конлан

Answer 9

Полагаю, использование CDN требует изменения только CSS ( длинная первичная версия )?

Эрик Филипс

Answer 10

Для тех из нас, кто не знаком с SASS, где устанавливают значение $ primary и выдают импорт "bootstrap" ;?

Стивен Фрэнк

Answer 11

есть два пути к

http://getbootstrap.com/customize/

и измените цвет в этих настройках и загрузите настроенный бутстрап.

Или вы можете использовать sass с этой версией https://github.com/twbs/bootstrap-sass и импортировать в свои активы sass / stylesheets / _bootstrap.scss, но перед импортом вы можете изменить цвета переменных по умолчанию

//== Colors
//
//## Gray and brand colors for use across Bootstrap.

$gray-base:              #000 !default;
$gray-darker:            lighten($gray-base, 13.5%) !default; // #222
$gray-dark:              lighten($gray-base, 20%) !default;   // #333
$gray:                   lighten($gray-base, 33.5%) !default; // #555
$gray-light:             lighten($gray-base, 46.7%) !default; // #777
$gray-lighter:           lighten($gray-base, 93.5%) !default; // #eee

$brand-primary:         darken(#428bca, 6.5%) !default; // #337ab7
$brand-success:         #5cb85c !default;
$brand-info:            #5bc0de !default;
$brand-warning:         #f0ad4e !default;
$brand-danger:          #d9534f !default;


//== Scaffolding
//
//## Settings for some of the most global styles.

//** Background color for `<body>`.
$body-bg:               #fff !default;
//** Global text color on `<body>`.
$text-color:            $gray-dark !default;

//** Global textual link color.
$link-color:            $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color:      darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;

и скомпилируйте результат

Answer 12

5

доступны ли какие-либо индивидуальные чернила для Bootstrap 4?

Эээ. Амит Джоши

Answer 13

1

Вы должны опустить на !defaultфлаги , если нет других файлов пользовательских стилей , которые дают вам повод не делать этого .

Джон Э

Answer 14

Я создал этот инструмент: https://lingtalfi.com/bootstrap4-color-generator , вы просто помещаете первичный в первое поле, затем выбираете свой цвет и нажимаете генерировать.

Затем скопируйте сгенерированный код scss или css и вставьте его в файл с именем my-colors.scss или my-colors.css (или с любым другим именем).

Как только вы скомпилируете scss в css , вы можете включить этот файл css ПОСЛЕ начальной загрузки CSS, и все будет в порядке.

Весь процесс занимает около 10 секунд, если вы понимаете его суть, при условии, что файл my-colors.scss уже создан и включен в ваш тег head.

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

Примечание 2: этот инструмент был создан для работы с bootstrap 4 (то есть пока не с какой-либо последующей версией).

Answer 15

Мне пришлось переместить импорт ускоренного режима после этого сгенерированного CSS, чтобы он заработал. Отличный инструмент, спасибо.

deanwilliammills

Answer 16

Вы человек-герой, +1

Мустафа Эрдоган

Answer 17

Любой элемент с тегом primay имеет цвет @ brand-primary. Один из вариантов его изменения - это добавление настраиваемого файла css, как показано ниже:

.my-primary{
  color: lightYellow ;
  background-color: red;
}

.my-primary:focus, .my-primary:hover{
  color: yellow ;
  background-color: darkRed;
}

a.navbar-brand {
  color: lightYellow ;
}

.navbar-brand:hover{
  color: yellow;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <br>
  <nav class="navbar navbar-dark bg-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Default (navbar-dark  bg-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
  </div>


<br>

<div class="container">
  <nav class="navbar my-primary mb-3">
    <div class="container">
      <a class="navbar-brand" href="/">Customized (my-primary)</a>
    </div>
  </nav>
  <button type="button" class="btn my-primary">Customized (btn my-primary)</button>
  </div>

Развернуть фрагмент

Чтобы узнать больше о настраиваемых файлах css с помощью начальной загрузки, вот полезная ссылка: https://bootstrapbay.com/blog/bootstrap-button-styles/ .

Answer 18

6

Бутстрап 4

Вот что сработало для меня:

Я создал свой собственный _custom_theme.scss файл с содержанием, похожим на:

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

Добавил его в начало файла bootstrap.scssи перекомпилировал (в моем случае он был в папке! Scss)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

Рауланд
источник

2

Это правильный подход, как указано в getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

@rauland Как вы перекомпилируете? Применяется ли тот же подход в случае начальной загрузки 3?

Умайр

1

Привет, @Umair, я использую Visual Studio с расширением Web Compiler от Мадса Кристенсена. Он добавляет к моему решению compilerconfig.json, где я определяю, как компилировать каждый файл .scss, указывая входной .scss и выходной .css файл. Дополнительная информация: github.com/madskristensen/WebCompiler

Рауланд

1

например: (asp.net на ядре .Net) «inputFile»: «wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss», «outputFile»: «wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Рауланд

Answer 19

2

Это правильный подход, как указано в getbootstrap.com/docs/4.0/getting-started/theming

Gianpiero

Answer 20

@rauland Как вы перекомпилируете? Применяется ли тот же подход в случае начальной загрузки 3?

Умайр

Answer 21

1

Привет, @Umair, я использую Visual Studio с расширением Web Compiler от Мадса Кристенсена. Он добавляет к моему решению compilerconfig.json, где я определяю, как компилировать каждый файл .scss, указывая входной .scss и выходной .css файл. Дополнительная информация: github.com/madskristensen/WebCompiler

Рауланд

Answer 22

1

например: (asp.net на ядре .Net) «inputFile»: «wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss», «outputFile»: «wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css "

Рауланд

Answer 23

Это может быть немного старый вопрос, но я хочу поделиться лучшим способом, который я нашел для настройки начальной загрузки. Есть онлайн-инструмент под названием bootstrap.build https://bootstrap.build/app . Он отлично работает и не требует установки или настройки инструментов!

Answer 24

Правильный способ изменить основной цвет по умолчанию в Bootstrap 4.x с помощью SASS или любые другие цвета, такие как вторичный, успешный и т. Д.

Создайте следующий файл SASS и импортируйте Bootstrap SASS, как показано:

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: green;
$my-color: red;

$theme-colors: (
  primary: $primary,
  secondary: $secondary,
  my-color: $my-color
);

// Add below your SASS or CSS code

// (Required) Import Bootstrap
@import "bootstrap/bootstrap";

Answer 25

Использование SaSS
изменить цвет бренда

$brand-primary:#some-color;

это изменит основной цвет во всем пользовательском интерфейсе.

Используя css -
предположим, вы хотите изменить основной цвет кнопки.

btn.primary{
  background:#some-color;
}

найдите элемент и добавьте новое правило css / sass в новый файл и прикрепите его после загрузки css начальной загрузки.

Answer 26

Bootstrap 4 правила

Большинство ответов здесь более или менее правильные, но все они с некоторыми проблемами (для меня). Итак, наконец, в Google я нашел правильную процедуру, как указано в специальном документе начальной загрузки: https://getbootstrap.com/docs/4.0/getting-started/theming/ .

Предположим, что бутстрап установлен в node_modules/bootstrap.

A. Создайте свой your_bootstrap.scssфайл:

@import "your_variables_theme";    // here your variables

// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";

// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...

Б. В той же папке создайте _your_variables_theme.scssфайл.

C. Настройте переменные начальной загрузки в _your_variables_theme.scssфайле, следуя этим правилам:

Скопируйте и вставьте переменные по _variables.scssмере необходимости, измените их значения и удалите флаг! Default . Если переменная уже была назначена, она не будет повторно назначена значениями по умолчанию в Bootstrap.

Переопределения переменных в одном файле Sass могут быть до или после переменных по умолчанию. Однако при переопределении файлов Sass необходимо выполнить переопределение до того, как вы импортируете файлы Sass для Bootstrap .

Переменные по умолчанию доступны в node_modules/bootstrap/scss/variables.scss.

Answer 27

Бутстрап 5

Для начальной загрузки 5 вы можете просто перейти к основному файлу scss и добавить:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

или какие изменения вы хотите внести ...

И не забудьте сразу после этого импортировать бутстрап.

Ваш окончательный файл main.scss должен выглядеть так:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;


@import "~node_modules/bootstrap/scss/bootstrap";

Answer 28

Начиная с Bootstrap 4, вы можете легко изменить основной цвет вашего Bootstrap , загрузив простой файл CSS на BootstrapColor.net . Вам не нужно знать SASS, и файл CSS готов к использованию для вашего сайта. Вы можете выбрать желаемый цвет, например синий, индиго, фиолетовый, розовый, красный, оранжевый, желтый, зеленый, бирюзовый или голубой цвет.

Answer 29

2

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

Quantum7

Answer 30

-7

Вы не можете изменить цвет в файле cdn.
Загрузите файл начальной загрузки.
Найдите файл bootstrap.css.
откройте этот файл (bootstrsap.css) и найдите «первичный».
измените его на желаемый цвет.

Сурав
источник

1

Это действительно не работает. Не рекомендуется напрямую изменять CSS Bootstrap. Вместо этого добавьте переопределения CSS в отдельный файл после bootstrap.css. Кроме того , изменение всех те самые -primaryссылок цвета в тот же цвет потеряет предполагаемые изменения на границе, парение, активные и т.д .. цветах , так как они вариация основного цвета фона.

Zim

@Zim yupp, ваше решение кажется более общим, спасибо!

Sourav

Answer 31

1

Это действительно не работает. Не рекомендуется напрямую изменять CSS Bootstrap. Вместо этого добавьте переопределения CSS в отдельный файл после bootstrap.css. Кроме того , изменение всех те самые -primaryссылок цвета в тот же цвет потеряет предполагаемые изменения на границе, парение, активные и т.д .. цветах , так как они вариация основного цвета фона.

Zim

Answer 32

@Zim yupp, ваше решение кажется более общим, спасибо!

Sourav

Answer 33

-8

Это очень простое решение.

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

замените класс bg-dark на bg-custom .

В CSS

.bg-custom {
  background-color: red;
}

Роб
источник

2

Это не ответ на вопрос, внимательно прочтите вопрос.

Munim Munna

Answer 34

2

Это не ответ на вопрос, внимательно прочтите вопрос.

Munim Munna

Answer 35

-14

Да, я предлагаю открыть файл .css, проверить страницу и найти цветовой код, который вы хотите изменить, и найти все и заменить (в зависимости от вашего текстового редактора) на нужный вам цвет. Сделайте это со всеми цветами, которые хотите изменить

Йонас Сидаравичюс
источник

3

На самом деле это не лучшая практика. Конечно, это сработает, но всякий раз, когда вы обновляете фреймворк, ваши изменения исчезнут (и вам придется повторять этот процесс каждый раз, когда вы делаете обновление). Вместо этого используйте инструмент настройки ( getbootstrap.com/customize ) или добавьте ваши пользовательские изменения в отдельный файл .css (переопределение классов, которые вы хотите переопределить)

blurfus

Answer 36

3

На самом деле это не лучшая практика. Конечно, это сработает, но всякий раз, когда вы обновляете фреймворк, ваши изменения исчезнут (и вам придется повторять этот процесс каждый раз, когда вы делаете обновление). Вместо этого используйте инструмент настройки ( getbootstrap.com/customize ) или добавьте ваши пользовательские изменения в отдельный файл .css (переопределение классов, которые вы хотите переопределить)

blurfus

Как изменить основной цвет начальной загрузки?

Ответы:

Bootstrap 4 правила