ada/SecondBrain

Files

T

Dmitry 7a4f2ced46 vault backup: 2026-05-30 19:03:22

2026-05-30 19:03:22 +03:00

2.3 KiB

Raw Blame History

status, type, tags, created, updated, title, source

status

type

tags

created

updated

title

source

seed

concept

bootstrap

web-development

css-framework

grid-system

2026-05-30

2026-05-30

Основы Bootstrap

21-bootstrap-1.pdf

Bootstrap 5

Bootstrap — популярный HTML/CSS/JS фреймворк для быстрой разработки адаптивных интерфейсов.

Быстрый старт

Для использования через CDN добавьте в <head>:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.x/dist/css/bootstrap.min.css" rel="stylesheet">

И скрипты перед </body>:

<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 колонок в ряду).

<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), модальных окон.
Пагинации, списков, таблиц.