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

93

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

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— Ashishjmeshram
источник
1
Возможный дубликат Как изменить цвет btn в Bootstrap
— TylerH
Да, просто переопределите его в своем пользовательском файле CSS, но вам нужно будет применить множество разных правил для каждого из элементов и их состояний (активен, наведение, фокус и т. Д.)
— Ли
3
Вместо переопределения CSS я рекомендую использовать инструмент настройки getbootstrap.com/customize
— blurfus

Ответы:

94

Обновление 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.

— Зим
источник
Для тех, кто плохо знаком с SASS и scss, как я ... пожалуйста, ознакомьтесь с npm's, gulpчтобы завершить этап компиляции.
— Крис Конлан
2
@ Крис Почему? Скрипты сборки bootstrap npm включены в исходный код. Посмотрите полный список в файле package.json.
— Джон Э
1
Не фронтенд-разработчик. То, что мне сказали в документации по моей теме. Удаляю, если в этом нет смысла.
— Крис Конлан
Полагаю, использование CDN требует изменения только CSS ( длинная первичная версия )?
— Эрик Филипс
Для тех из нас, кто не знаком с SASS, где устанавливают значение $ primary и выдают импорт "bootstrap" ;?
— Стивен Фрэнк
28

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

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;

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

— Хорхе Луис Сауд Росаль
источник
5
доступны ли какие-либо индивидуальные чернила для Bootstrap 4?
— Эээ. Амит Джоши
1
Вы должны опустить на !defaultфлаги , если нет других файлов пользовательских стилей , которые дают вам повод не делать этого .
— Джон Э
17

Я создал этот инструмент: 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 (то есть пока не с какой-либо последующей версией).

— лин
источник
Мне пришлось переместить импорт ускоренного режима после этого сгенерированного CSS, чтобы он заработал. Отличный инструмент, спасибо.
— deanwilliammills
Вы человек-герой, +1
— Мустафа Эрдоган
6

Любой элемент с тегом 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/ .

— Н. Осиль
источник
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 "
— Рауланд
3

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

— Рами Аллуш
источник
2

Правильный способ изменить основной цвет по умолчанию в 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";
— Элвин Конда
источник
1

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

$brand-primary:#some-color;

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

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

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

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

— Маниш Кумар
источник
0

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.

— Джанпьеро
источник
0

Бутстрап 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";
— user4264972
источник
-4

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

— Alex01
источник
2
Это буквально единственные цвета, которые вы можете выбрать, так как bootstrapcolor.net просто перекомпилировал бутстрап с жестко запрограммированным новым основным цветом.
— Quantum7
-7
  • Вы не можете изменить цвет в файле cdn.
  • Загрузите файл начальной загрузки.
  • Найдите файл bootstrap.css.
  • откройте этот файл (bootstrsap.css) и найдите «первичный».
  • измените его на желаемый цвет.
— Сурав
источник
1
Это действительно не работает. Не рекомендуется напрямую изменять CSS Bootstrap. Вместо этого добавьте переопределения CSS в отдельный файл после bootstrap.css. Кроме того , изменение всех те самые -primaryссылок цвета в тот же цвет потеряет предполагаемые изменения на границе, парение, активные и т.д .. цветах , так как они вариация основного цвета фона.
— Zim
@Zim yupp, ваше решение кажется более общим, спасибо!
— Sourav
-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
-14

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

— Йонас Сидаравичюс
источник
3
На самом деле это не лучшая практика. Конечно, это сработает, но всякий раз, когда вы обновляете фреймворк, ваши изменения исчезнут (и вам придется повторять этот процесс каждый раз, когда вы делаете обновление). Вместо этого используйте инструмент настройки ( getbootstrap.com/customize ) или добавьте ваши пользовательские изменения в отдельный файл .css (переопределение классов, которые вы хотите переопределить)
— blurfus
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.