В Bootstrap 4 можно легко изменить цвет фона кнопки, используя классы и переменные. Для изменения цвета фона кнопки типа "primary" вам потребуется настроить значение соответствующей переменной SCSS.
Первым шагом, убедитесь, что вы используете SCSS-версию Bootstrap 4 и имеете настроенную среду разработки, способную компилировать SCSS в CSS. Если вы используете обычную версию Bootstrap 4, вам потребуется настроить SCSS-сборку для вашего проекта.
1. Создайте пользовательскую переменную SCSS:
В файле variables.scss (или в любом другом пользовательском файле SCSS) добавьте следующий код:
$primary: #ff0000; // Здесь вы можете использовать желаемый цвет в шестнадцатеричном формате
2. Переопределите переменную Bootstrap:
После определения пользовательской переменной, вам необходимо переопределить Bootstrap-переменную, используя следующий код:
@import "bootstrap/scss/bootstrap"; // Импорт всех SCSS-файлов Bootstrap
3. Компилируйте SCSS в CSS:
После этого вам нужно скомпилировать SCSS-файлы, чтобы применить изменения. Ваш среда разработки должна предоставлять возможность компиляции SCSS в CSS. Обычно это делается автоматически, когда вы сохраняете SCSS-файл.
4. Используйте измененный стиль:
После компиляции SCSS в CSS, вы должны увидеть измененный стиль кнопок с цветом фона, который вы установили в пользовательской переменной.
<button class="btn btn-primary">Primary Button</button>
Теперь кнопка "Primary Button" будет иметь заданный вами цвет фона.
Это простой и гибкий способ изменения цветовой схемы Bootstrap 4. Вы можете изменить значение переменной в любое время, чтобы обновить цвет фона кнопки или применить различные цветовые схемы к разным частям вашего проекта.