Разработчики часто переопределяют или настраивают стили css Bootstrap по умолчанию при работе над проектами веб-разработки. Большинство разработчиков делают это, чтобы внести изменения в шрифты Bootstrap, границы, цвета или другие стили Bootstrap. Кроме того, стили CSS Bootstrap по умолчанию также настраиваются для расширения классов Bootstrap новыми пользовательскими классами и изменения макетов сетки Bootstrap.

Есть два простых и эффективных способа, с помощью которых вы можете настроить Bootstrap. Использование CSS — это самый простой и надежный способ сделать это, в то время как использование SASS для настройки Bootstrap на самом деле является продвинутым методом. Здесь вы можете найти пошаговое руководство по настройке Bootstrap с помощью обоих вышеперечисленных методов.

Использование переопределения CSS

Настройки CSS должны быть добавлены в отдельный пользовательский custom.css файл для обеспечения удобства сопровождения. Это гарантирует, что исходные файлы стиля Bootstrap останутся неизменными.Вы должны помнить, что порядок имеет значение в CSS. Таким образом, окончательное определение конкретного правила CSS будет переопределять ранее определенные правила, когда CSS-селекторы и свойства совпадают. Именно поэтому таков custom.css ссылка должна следовать после bootstrap.css

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="custom.css">

Пример

Компонент Bootstrap card по умолчанию отображается с границей. В этом примере мы удалим границу и включим box-shadow в компонент Bootstrap card с помощью custom.css Там будет код который перекроет значения.На следующем рисунке показана загрузочная карта по умолчанию.

Добавьте следующие строки кода в пользовательский custom.css файл

/* удаляет border для карты и добавляет свойство box-shadow */
 .card {
         border: none;
         box-shadow: 0 1px 20px 0 rgba(0,0,0,.1);
       }

Вот изображение и результат данного способа кастомизации компонента bootstrap карты

Специфика CSS

Еще один важный момент, который следует иметь в виду при переопределении стилей bootstrap — это специфика CSS. Нам нужно будет использовать селекторы, которые столь же специфичны, как и те, что находятся в bootstrap.css. Использование селекторов, которые не являются конкретными, не даст вам желаемых результатов, так как компонент в конечном итоге будет принимать стили начальной загрузки по умолчанию, даже если мы написали пользовательские стили в custom.css Лучше всего использовать переопределения CSS для простых настроек Bootstrap, но мы рекомендуем вам попробовать метод SASS, когда речь заходит о создании обширных настроек.

Использование SASS

SASS-это наиболее рекомендуемый метод настройки Bootstrap. Это происходит главным образом потому, что язык SASS используется для написания всего исходного кода CSS Bootstrap 4.Структура проекта будет выглядеть примерно так.

Ваш проект/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap/
    └── scss/
         └── mixins/
         └── utilities/
         └── _functions.scss
         └── _mixins.scss
         └── _variables.scss
         └── (...другие bootstrap scss файлы)
         └── bootstrap-grid.scss
         └── bootstrap-reboot.scss
         └── bootstrap.scss

В исходном файле Bootstrap SASS вы можете найти bootstrap.scss файл, содержащий файлы Bootstrap SASS. Там же есть и variables.scss файл, содержащий все переменные SASS. Вы можете использовать свой custom.scss файл, чтобы переопределить эти переменные.

Пример

Первое, что делает большинство разработчиков, — это вносит коррективы в цветовую палитру при настройке стилей начальной загрузки по умолчанию. Вам нужно будет использовать $theme-colors SASS map, чтобы изменить цвета по умолчанию. Вот как вы можете изменить цвета в теме Bootstrap по цвета умолчанию.

По умолчанию цвета кнопок выглядят следующим образом

Теперь импортируйте переменные и функции bootstrap в пользовательский custom.scss. Теперь добавьте код для изменения цвета темы bootstrap по умолчанию, а затем добавьте bootstrap.scss. Весь код в custom.scss приведен ниже.

/* === Import Bootstrap functions and variables === */
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
/*--------------------------------------------------------------------*/
/* Change theme-colors */
$theme-colors: (
                primary: #234d7b,
                secondary: #3b3c3e,
                success: #1e6111,
                info:  #64c3d2,
                warning: #f5e74a,
                danger: #820410
                );
        
/*--------------------------------------------------------------------*/
/* === Bootstrap Main SCSS === */
@import "bootstrap/scss/bootstrap";
/*--------------------------------------------------------------------*/>

Кнопки по умолчанию будет выглядеть следующим образом.

Таким образом мы переопределили цвета по умолчанию. Этот способ также учтет новые цвета при наведении когда задается процент затемнения, который также можно переопределить. Но об этом уже в других статьях

Также у начинающего может возникнуть вопрос. А что со всем этим делать, после того как изменю sass файлы, где взять в итоге css?Если вы умеете работать с командной строкой, то можно посмотреть это видео:

_

Если с командной строкой есть сложности, то можно посмотреть видео с другим способом как собрать css

_