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

Аватар пользователя Ivan Gagarinov
Ivan Gagarinov
16 июля 2024

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

  1. Нужно создать новый файл SCSS, например custom.scss, в котором будут определены нужные цвета. Пример содержимого файла custom.scss:

    // Импортируем основной файл Bootstrap
    @import "bootstrap";
    
    // Переопределяем переменные цвета Bootstrap
    $primary: #ff0000;
    $secondary: #00ff00;
    $success: #0000ff;
    $info: #ffff00;
    $warning: #00ffff;
    $danger: #ff00ff;
    
    // Компилируем Bootstrap и пользовательские стили
    @import "bootstrap";
    
  2. С помощью компилятора SCSS (например, Node-sass или Sass), скомпилируйте ваш пользовательский файл SCSS в CSS. Если вы используете npm в проекте, выполните команду:

    sass custom.scss custom.css
    
  3. Подключите пользовательский CSS: Подключите скомпилированный пользовательский CSS файл (например, custom.css) в ваш проект.

    <link href="path/to/custom.css" rel="stylesheet">
    
0 0

Похожие вопросы