--- status: seed type: concept tags: [bootstrap, web-development, css-framework, grid-system] created: 2026-05-30 updated: 2026-05-30 title: Основы Bootstrap source: ["[[21-bootstrap-1.pdf]]"] --- # Bootstrap 5 **Bootstrap** — популярный HTML/CSS/JS фреймворк для быстрой разработки адаптивных интерфейсов. ## Быстрый старт Для использования через CDN добавьте в ``: ```html ``` И скрипты перед ``: ```html ``` ## Контрольные точки (Breakpoints) - **X-Small (`<576px`)**: по умолчанию. - **Small (`sm` ≥576px)**. - **Medium (`md` ≥768px)**. - **Large (`lg` ≥992px)**. - **Extra large (`xl` ≥1200px)**. - **Extra extra large (`xxl` ≥1400px)**. ## Сетка (Grid System) Базируется на Flexbox и состоит из контейнеров, строк и колонок (12 колонок в ряду). ```html

Основной контент

Сайдбар

``` - `.container`: фиксированная ширина (меняется на брейкпоинтах). - `.container-fluid`: всегда 100% ширины. - `.row`: обертка для колонок. - `.col-{breakpoint}-{size}`: настройка ширины колонки. ## Основные классы-утилиты - **Отступы:** `m-3` (margin), `p-2` (padding), `mt-1` (margin-top). - **Цвета:** `text-primary`, `bg-dark`, `btn-success`. - **Типографика:** `h1`, `display-1`, `text-center`, `fw-bold`. - **Flexbox:** `d-flex`, `justify-content-between`, `align-items-center`. ## Компоненты Bootstrap предоставляет готовые стили для: - Кнопок (`btn`), форм, навигационных панелей (`navbar`). - Карточек (`card`), алертов (`alert`), модальных окон. - Пагинации, списков, таблиц.