Как изменить цвет кнопок в bootstrap?

@elda 

Для изменения цвета кнопок в Bootstrap, вы можете использовать классы CSS, предоставляемые фреймворком. В Bootstrap есть несколько встроенных классов для разных цветов кнопок:

1. btn-primary - голубой
2. btn-secondary - серый
3. btn-success - зеленый
4. btn-danger - красный
5. btn-warning - оранжевый
6. btn-info - синий
7. btn-light - светло-серый
8. btn-dark - темно-серый

Чтобы изменить цвет кнопки, просто добавьте соответствующий класс к тегу кнопки. Например:

1
2

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>

Вы также можете создать свой собственный класс CSS и применить его к кнопке для определенного цвета. Например, если вы хотите создать кнопку с красным цветом, вы можете создать следующий класс CSS:

1
2
3
4

.btn-red {
  background-color: red;
  color: white;
}

Затем примените этот класс к тегу кнопки:

1

<button class="btn btn-red">Red Button</button>

Это позволит вам создавать собственные цвета кнопок в Bootstrap.

@elda 

Также можно использовать встроенные переменные Sass в Bootstrap для настройки цветов кнопок. Например, переменная $primary управляет цветом кнопок с классом btn-primary. Чтобы изменить цвет кнопок, просто замените значение переменной в вашем файле Sass.

Пример ваших пользовательских настроек цветов кнопок в Sass:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

$primary: red;

.btn-custom {
  background-color: $primary;
  border-color: $primary;
}

.btn-custom:hover {
  background-color: darken($primary, 10%);
  border-color: darken($primary, 10%);
}

Если вы используете Sass в своем проекте, вам нужно перекомпилировать файлы Sass в CSS после внесения изменений.