Оглавление
Bootstrap
Самый известный CSS-фреймворк: сетка, готовые компоненты и утилиты для быстрой вёрстки.
1.Начало работы
2.Сетка
- Контейнер, строки и колонкиОснова сетки Bootstrap: контейнер, строка row и колонки col, деление строки на 12 частей.
- Адаптивность и точки переломаКак сетка Bootstrap меняет число колонок на разных экранах: точки перелома sm, md, lg, xl, xxl и классы вроде col-md-6.
- Выравнивание, сдвиг и порядок колонокКак выровнять колонки по вертикали и горизонтали, сдвинуть их классами offset и поменять порядок классами order.
- Промежутки между колонкамиЧто такое gutters в сетке Bootstrap и как менять расстояние между колонками классами g, gx и gy.
3.Утилиты
- Отступы: классы m и pУтилиты отступов Bootstrap: как читать классы mt-3, px-4, mx-auto, адаптивные отступы и gap.
- Display и флексбоксУтилиты d-none, d-flex, d-md-block и классы флексбокса Bootstrap: направление, выравнивание, перенос, растяжение.
- Типографика и текстКак Bootstrap оформляет текст: заголовки display, класс lead, размер, жирность, выравнивание, перенос и списки.
- Цвета и фоныЦветовая палитра Bootstrap: классы text-*, bg-*, text-bg-*, приглушённые оттенки subtle и прозрачность.
- Рамки, тени, размеры и позиционированиеУтилиты border, rounded, shadow, w-50, vh-100 и position-absolute: как оформить и разместить блок классами Bootstrap.
4.Компоненты
- Кнопки и группы кнопокКласс btn и его варианты: цвета, контурные кнопки, размеры, неактивное состояние, кнопки-ссылки и группы кнопок.
- Навигационная панельКомпонент navbar: логотип, ссылки, сворачивание в кнопку-бургер на телефоне и тёмная панель.
- КарточкиКомпонент card: тело, заголовок, картинка, шапка и подвал карточки, ряд карточек одинаковой высоты.
- ТаблицыКласс table и его варианты: полосы, подсветка строк, рамки, компактная таблица, цветные строки и горизонтальная прокрутка.
- Уведомления, бейджи и прогрессКомпоненты alert, badge и progress: сообщения о результате действия, метки-счётчики и полосы прогресса.
- Картинки и подписиАдаптивные картинки img-fluid, рамка img-thumbnail, скругления, выравнивание, подписи figure и блоки с пропорциями ratio.
- Иконки Bootstrap IconsКак подключить набор Bootstrap Icons через CDN или npm, вставить иконку, изменить её размер и цвет.
5.Формы
- Поля формыКлассы form-control, form-select, form-check и input-group: текстовые поля, списки, флажки, переключатели и поля с приставкой.
- Раскладка формы и плавающие подписиКак расставить поля формы по колонкам сеткой Bootstrap, сделать горизонтальную форму и подписи form-floating внутри полей.
- Стили проверки формыКак Bootstrap показывает ошибки в форме: классы is-valid и is-invalid, сообщения invalid-feedback и класс was-validated со встроенной проверкой браузера.
6.Интерактивные компоненты
- Модальное окноКомпонент modal: окно поверх страницы, открытие через атрибуты data-bs-toggle и из JavaScript, размеры и события.
- Выпадающие менюКомпонент dropdown: кнопка с меню, пункты, разделители и заголовки, направление и выравнивание меню, меню в навигационной панели.
- Сворачивание и аккордеонКомпонент collapse: скрытый блок, который раскрывается по кнопке, и аккордеон — группа таких блоков, где открыт только один.
- Вкладки и таблеткиКомпонент nav в виде вкладок nav-tabs и таблеток nav-pills, переключение панелей tab-content без перезагрузки страницы.
- КарусельКомпонент carousel: слайды, стрелки, индикаторы, подписи, автопрокрутка и эффект смены слайдов.
- Боковая панель offcanvasКомпонент offcanvas: панель, которая выезжает с края экрана, её стороны, настройки и адаптивный вариант для бокового меню админ-панели.
- Тосты и подсказкиВсплывающие уведомления toast и подсказки tooltip: разметка, обязательный запуск из JavaScript и настройки.
7.Настройка внешнего вида
- Тёмная темаЦветовые режимы Bootstrap 5.3: атрибут data-bs-theme, тёмная тема для страницы и для отдельного блока, переключатель темы и выбор по настройкам системы.
- Настройка через CSS-переменныеКак поменять шрифт, цвета, скругления и вид компонентов Bootstrap через CSS-переменные --bs-* без пересборки.
- Настройка через SassКак собрать Bootstrap из исходников Sass в проекте на Vite: переопределить переменные $primary и $border-radius, расширить шкалу отступов и подключить только нужные части.
8.Практика
- Собираем лендингПрактика: одностраничный сайт сервиса Tasko из компонентов Bootstrap — шапка, первый экран, возможности, тарифы и подвал.
- Когда Bootstrap не нужен и советы для продакшенаВ каких проектах Bootstrap мешает, какие есть альтернативы и как подготовить сайт на Bootstrap к публикации: версия, размер, доступность.