Цвета темы Bootstrap 4: переменные против карты
В Bootstrap 4 можно изменить цвета темы, переопределив такие переменные:
$primary: #0074d9;
$danger: #ff4136;
Или изменив карту цветов темы следующим образом:
$theme-colors: (
"primary": #0074d9,
"danger": #ff4136
);
Когда и почему мы должны использовать одно вместо другого?
Ответы 1
Фактически, лучше всегда переопределять цвета вашей темы в карте $theme-colors, чтобы гарантировать замену цветов, из которых бутстрап будет использовать эти цвета позже при генерации соответствующего CSS. Bootstrap рекомендует это сделать.
Если вы решите переопределить определение цвета по умолчанию, вы переопределите создание самой палитры, поэтому у начальной загрузки больше не будет доступа к цветам по умолчанию.
Вы могли сделать следующее:
Опция 1
Отменить значения по умолчанию (не рекомендуется Bootstrap).
Вариант 2
Переопределите карту, используя шестнадцатеричные значения:
$theme-colors : (
'primary' : #0074d9,
'danger' : #ff4136
);
Затем вы можете получить доступ к любому из цветов вашей темы с помощью map_get:
$my-color : map_get($theme-colors, 'primary'); // #0074d9
Вариант 3
Вы можете определить свой собственный набор переменных для переопределения карты, тогда у вас всегда будет доступ к вашим переменным без использования map_get:
$my-primary-color : #0074d9;
$my-danger-color : #ff4136;
$theme-colors : (
'primary' : $my-primary-color,
'danger' : $my-danger-color
);
Затем вы можете определить свой собственный набор переменных и использовать эти переменные для переопределения карты; таким образом у вас будет доступ к вашим собственным переменным и вы измените тему в соответствии с тем, что вам предлагают делать документы Boostrap. Вы всегда можете использовать map_get, чтобы получить значение. Например, если вы переопределите значение primary из карты, вы можете использовать map_get($theme_colors, 'primary'); для получения его значения.
@slacle, я обновил свой ответ, чтобы он лучше соответствовал вашим потребностям. Сообщите мне, помогло ли это.
здесь мы можем также переопределить цвет границы?
@VishalTanna из какой смеси? Где в файлах scss применяется цвет границы? К кнопкам?
@muesca да внутри файла scss, поскольку мы переопределяем цвет кнопки выше, мы переопределяем цвет границы
@VishalTanna может просто указать желаемый цвет, если цвет фона, который вы установили, переопределяет всю кнопку, создайте селектор, чтобы указать желаемый цвет границы. Это должно делать свое дело. Может быть, вы можете задать вопрос по этому поводу.
Для других, использующих bootstrap 5 - $primary: [color] является предпочтительным методом: getbootstrap.com/docs/5.0/customize/sass/#maps-and-loops
Проблема с переопределением карты вместо переменных заключается в том, что тогда у нас нет доступа к переменным новых цветов в наших собственных файлах sass.