Bootstrap (фронтенд-фреймворк) — Примеры

Пример 1 — Переопределение, которое побеждает через !important

Проект перекрашивает основную кнопку, перебивая собственный селектор фреймворка: скажите, что это сделает со следующим обновлением, а затем воспользуйтесь поверхностью, которую фреймворк документирует именно для этого.

/* наш собственный файл, подключённый после фреймворка */
.btn-primary {
  background-color: #0f766e !important;
  border-color: #0f766e !important;
}

<button class="btn btn-primary">Сохранить</button>

Решение

.btn-brand {
  --bs-btn-bg: #0f766e;
  --bs-btn-border-color: #0f766e;
  --bs-btn-hover-bg: #115e59;
}

<button class="btn btn-primary btn-brand">Сохранить</button>

Перебить селектор фреймворка — значит, что каждое будущее изменение темы должно побеждать с ещё большей силой, а !important ведёт в тупик: следующее обновление молча меняет компонент, который вы считали зафиксированным. Пользовательские свойства CSS этого компонента — поддерживаемая и намеренно небольшая поверхность ровно для такого случая, поэтому таблица стилей вендора остаётся нетронутой, а следующий мажор — чтение списка изменений, а не ручное слияние. Установите пакет локально и подключайте его скомпилированную таблицу стилей, чтобы версия была закреплена в lock-файле, а не зависела от того, что сегодня отдаёт хостируемая копия. Держите свои добавления в классе-обёртке, и разделение останется читаемым.

Пример 2 — Сетка, у которой колонки складываются везде

Двухколоночная раскладка на любой ширине экрана выводится друг под другом, включая самую широкую, хотя разметка использует классы сетки фреймворка: объясните, какой части имени класса не хватает, и исправьте раскладку.

<div class="row">
  <div class="col-12">Основное</div>
  <div class="col-12">Боковое</div>
</div>

Решение

<div class="row g-3">
  <div class="col-12 col-md-8">Основное</div>
  <div class="col-12 col-md-4">Боковое</div>
</div>

Сетка — дорожка из двенадцати колонок, и именно инфикс точки останова заставляет класс применяться только начиная с некоторой ширины: один col-12 означает «всегда во всю ширину», поэтому обе колонки складываются на любом размере. Добавление col-md-8 и col-md-4 сохраняет одну колонку на узких экранах и делит дорожку в пропорции восемь-четыре начиная со средней точки останова. g-3 на строке задаёт промежуток между колонками без margin у потомков. Это единственная часть фреймворка, которую запись называет долговечной, и она же чаще всего выучена наполовину, потому что пропущенный инфикс выглядит как ошибка стилей, а не как ошибка в имени класса.