Урок 02

Установка и подключение

Способы установки

4 варианта:

CDN — быстрее всего.
NPM — с управлением версиями.
Скачивание — оффлайн.
SCSS — для кастомизации.

Правило: для продакшена — NPM или SCSS. CDN — для прототипов и мелких сайтов.

CDN

CSS:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

JS:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

Что важно:

integrity — SRI-хеш для безопасности.
crossorigin — CORS.
Bundle — включает Popper.js.

Правило: integrity — обязательно для CDN.

Что такое Popper

Popper.js — библиотека для позиционирования popover/tooltip/dropdown.

Два варианта JS:

bootstrap.bundle.min.js — с Popper (рекомендуется).
bootstrap.min.js — без Popper (нужен отдельно).

Правило: всегда bundle.

NPM

Установка:

npm install bootstrap

Что появилось:

node_modules/bootstrap/dist/css/ — CSS.
node_modules/bootstrap/dist/js/ — JS.
node_modules/bootstrap/scss/ — исходники SCSS.
node_modules/bootstrap/js/src/ — ES-модули.

NPM: подключение

Простой способ через импорт:

// main.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Что даёт: один бандл с CSS и JS.

Vite + Bootstrap

Установка:

npm install bootstrap @popperjs/core
npm install -D sass

main.js:

import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

Что даёт: Vite соберёт всё в бандл.

SCSS + Bootstrap

Установка:

npm install bootstrap sass

src/scss/main.scss:

// 1. Кастомизация переменных
$primary: #c1442e;
$border-radius: 10px;
$font-family-sans-serif: 'Inter', system-ui, sans-serif;

// 2. Импорт Bootstrap
@use 'bootstrap/scss/bootstrap';

Компиляция:

sass src/scss/main.scss public/css/main.css

Что даёт: свой цвет, свои настройки, размер только нужного.

Кастомизация переменных

_variables.scss в Bootstrap 5 — большой список. Можно переопределить до импорта:

// Цвета
$primary: #c1442e;
$secondary: #6c757d;
$success: #10b981;
$danger: #ef4444;
$warning: #f59e0b;
$info: #2e86c1;

// Типографика
$font-family-sans-serif: 'Inter', system-ui, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;

// Радиусы
$border-radius: 10px;
$border-radius-sm: 6px;
$border-radius-lg: 16px;

// Сетка
$grid-gutter-width: 1.5rem;
$container-max-widths: (
    sm: 540px,
    md: 720px,
    lg: 960px,
    xl: 1140px,
    xxl: 1320px,
);

// Импорт
@use 'bootstrap/scss/bootstrap';

Правило: переменные — до @use.

Импорт частями

Не весь Bootstrap, а нужное:

// 1. Функции и переменные
@use 'bootstrap/scss/functions';
@use 'bootstrap/scss/variables';
@use 'bootstrap/scss/variables-dark';
@use 'bootstrap/scss/maps';
@use 'bootstrap/scss/mixins';
@use 'bootstrap/scss/utilities';

// 2. Кастомизация
$primary: #c1442e;

// 3. Layout
@use 'bootstrap/scss/root';
@use 'bootstrap/scss/reboot';
@use 'bootstrap/scss/type';
@use 'bootstrap/scss/containers';
@use 'bootstrap/scss/grid';

// 4. Компоненты
@use 'bootstrap/scss/buttons';
@use 'bootstrap/scss/card';
@use 'bootstrap/scss/forms';
@use 'bootstrap/scss/modal';

// 5. Утилиты
@use 'bootstrap/scss/utilities/api';

Что даёт: минимальный CSS — только нужные компоненты.

RTL

Для арабского, иврита:

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

Что даёт: зеркальная вёрстка.

Тёмная тема

Bootstrap 5.3+:

<html lang="ru" data-bs-theme="dark">

Что даёт: тёмная тема из коробки.

Переключение через JS:

document.documentElement.setAttribute('data-bs-theme', 'dark');
document.documentElement.setAttribute('data-bs-theme', 'light');

Правило: data-bs-theme — стандарт Bootstrap.

Порядок подключения

Правильно:

<head>
    <!-- 1. Bootstrap CSS -->
    <link href="bootstrap.css" rel="stylesheet">
    <!-- 2. Свой CSS (перебивает Bootstrap) -->
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <!-- 3. Bootstrap JS -->
    <script src="bootstrap.bundle.js"></script>
    <!-- 4. Свой JS -->
    <script src="app.js"></script>
</body>

Правило: свой CSS после Bootstrap, свой JS — после Bootstrap JS.

Проверка

1. CSS загрузился:

DevTools → Network → bootstrap.min.css → 200

2. JS работает:

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#test">Тест</button>

<div class="modal" id="test">
    <div class="modal-dialog"><div class="modal-content">Работает</div></div>
</div>

3. Тёмная тема:

<html data-bs-theme="dark">

Фон должен стать тёмным.

Версия

Проверить в браузере:

DevTools → Console → bootstrap.Tooltip.VERSION

Или через CSS:

bootstrap.css | head

Правило: всегда фиксировать версию (5.3.3, не 5).

Что делать с integrity

Сгенерировать хеш:

https://www.srihash.org/

Что даёт: защита от подмены CDN-файла.

Правило: для продакшена с CDN — обязательно.

Самый простой шаблон

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container py-5">
        <h1>Привет, Bootstrap!</h1>
        <button class="btn btn-primary">Кнопка</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Практика

1. Подключите Bootstrap через CDN с integrity.

2. Скачайте через npm.

3. Скомпилируйте SCSS с кастомным $primary.

4. Включите тёмную тему через data-bs-theme.

5. Проверьте bootstrap.Tooltip.VERSION в консоли.

6. Сравните размер CSS:

Полный Bootstrap.
Только grid + buttons + card.

Частые ошибки

1. JS без bundle:

dropdown не работает — нет Popper

Решение: bootstrap.bundle.min.js.

2. Свой CSS до Bootstrap:

Bootstrap перебивает

Решение: свой CSS после.

3. Кастомизация после импорта:

@use 'bootstrap';
$primary: red;   // уже поздно

Решение: переменные до @use.

4. CDN без version:

bootstrap@5/dist/...

Решение: bootstrap@5.3.3/dist/....

5. Импорт всего SCSS:

500 KB CSS

Решение: импорт частями.

6. Забыли про data-bs-theme:

Тёмная тема не работает

Решение: на <html>.

7. Дубли CSS:

bootstrap.css + bootstrap.min.css

Решение: одно подключение.

8. Не проверить версию:

Bootstrap 4 вместо 5

Решение: console.log(bootstrap.Tooltip.VERSION).

Итог

CDN — быстро, для прототипов.
NPM — стандарт для проекта.
SCSS — для кастомизации.
bootstrap.bundle.min.js — с Popper.
Свой CSS — после Bootstrap.
Переменные — до импорта.
data-bs-theme — тёмная тема.
RTL — bootstrap.rtl.css.
Integrity — для CDN.
Версию фиксировать.

Дальше — сетка Bootstrap (Grid system).