vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00
parent a54f2b19c3
commit 7a4f2ced46
16 changed files with 1986 additions and 19 deletions
@@ -0,0 +1,59 @@
+---
+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 добавьте в `<head>`:
+```html
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/css/bootstrap.min.css" rel="stylesheet">
+```
+И скрипты перед `</body>`:
+```html
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/js/bootstrap.bundle.min.js"></script>
+```
+
+## Контрольные точки (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
+<div class="container">
+  <div class="row">
+    <div class="col-12 col-md-8">Основной контент</div>
+    <div class="col-6 col-md-4">Сайдбар</div>
+  </div>
+</div>
+```
+- `.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`), модальных окон.
+- Пагинации, списков, таблиц.