Bootstrap

Bootstrap — набор CSS-классов и JavaScript-компонентов для адаптивного интерфейса. Он даёт согласованную сетку, spacing, typography, формы и готовые interactive components.

Сетка

Основная модель:

<div class="container">
  <div class="row g-3">
    <section class="col-12 col-md-8">Main</section>
    <aside class="col-12 col-md-4">Aside</aside>
  </div>
</div>

• на маленьком экране оба блока занимают строку;
• начиная с breakpoint md ширина делится как 8/12 и 4/12;
• gutter задаёт расстояние между колонками.

Utility classes

Небольшое оформление можно выразить классами:

<button class="btn btn-primary px-3" type="submit">
  Save
</button>

Utility classes ускоряют прототип, но длинная комбинация в каждом элементе начинает дублировать решение. Повторяющийся компонент лучше выделить.

JavaScript-компоненты

Modal, dropdown, collapse и tooltip имеют не только визуальный вид, но и поведение. Нужно подключить подходящий JavaScript bundle и сохранить доступную HTML-структуру.

Data attributes упрощают простой случай:

<button
  type="button"
  class="btn btn-secondary"
  data-bs-toggle="collapse"
  data-bs-target="#details">
  Details
</button>

Ограничения

• одинаковые defaults делают продукты визуально похожими без собственной темы;
• override большого числа внутренних selectors усложняет обновление;
• неверная версия примера может использовать устаревшие имена классов;
• готовый компонент не освобождает от проверки keyboard navigation, labels и contrast;
• весь bundle не всегда нужен для маленькой страницы.

Вопросы для самопроверки

1. Чем container отличается от container-fluid?
2. Как mobile-first breakpoints меняют layout?
3. Нужен ли JavaScript для обычной grid?
4. Почему визуально скрытая label всё ещё может быть нужна?
5. Когда проще написать небольшой собственный компонент?

Связанные заметки

• Frontend
• JavaScript