Як змінити основний колір початкового кольору?

Question 1

Чи можна змінити основний колір початкового кольору, щоб він відповідав кольору бренду? У моєму випадку я використовую паперову тему bootswatch.

Question 2

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

Для того, щоб змінити первинні , або будь-який з квітів теми в Bootstrap 4 ШАОН, встановіть відповідні змінні перед тим імпортування bootstrap.scss. Це дозволяє вашому користувацькому scss замінити значення за замовчуванням ...

$primary: purple;
$danger: red;

@import "bootstrap";

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

У деяких випадках вам може знадобитися встановити новий колір з іншої існуючої змінної Bootstrap. Для цього імпортуйте спочатку функції та змінні, щоб на них можна було посилатися в налаштуваннях ...

/* 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 активи / таблиці стилів / _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

Bootstrap 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. Існує Інтернет-інструмент, який називається 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 css.

Question 10

Правила Bootstrap 4

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

Припустимо, що bootstrap інстальовано в 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...

B. У тій же папці створіть _your_variables_theme.scssфайл.

C. Налаштуйте завантажувальні змінні у _your_variables_theme.scssфайлі, дотримуючись цих правил:

Скопіюйте та вставте змінні з _variables.scssнеобхідних мін, змініть їх значення та видаліть прапорець ! Якщо змінну вже призначено, вона не буде повторно призначена значеннями за замовчуванням у Bootstrap.

Перевизначення змінних у тому самому файлі Sass можуть виникати до або після змінних за замовчуванням. Однак при перевизначенні файлів Sass ваші заміни повинні надходити перед імпортом файлів Sass Bootstrap .

Змінні за замовчуванням доступні в node_modules/bootstrap/scss/variables.scss.

Question 11

Bootstrap 5

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

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

або будь-які зміни, які ви хочете зробити ...

І не забудьте імпортувати bootstrap відразу після.

Ваш остаточний файл 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, оглянути сторінку та знайти колірний код, який потрібно змінити, а також Знайти все та замінити (залежно від вашого текстового редактора) на потрібний колір. Зробіть це з усіма кольорами, які ви хочете змінити