Dmitry
65 lines
2.3 KiB
Markdown
65 lines
2.3 KiB
Markdown
---
|
|
status: seed
|
|
type: concept
|
|
tags:
|
|
- bootstrap
|
|
- web-development
|
|
- css-framework
|
|
- grid-system
|
|
created: 2026-05-30
|
|
updated: 2026-05-30
|
|
source:
|
|
- '[[21-bootstrap-1.pdf]]'
|
|
aliases:
|
|
- Основы Bootstrap
|
|
---
|
|
# 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`), модальных окон.
|
|
- Пагинации, списков, таблиц.
|