Введение в Bootstrap

Что такое Bootstrap

Bootstrap — CSS-фреймворк для быстрой вёрстки адаптивных сайтов.

История:

• Создан в Twitter в 2011.
• Bootstrap 3 — 2013, mobile-first.
• Bootstrap 4 — 2018, flexbox.
• Bootstrap 5 — 2021, без jQuery.

Что даёт:

• Готовая сетка.
• Компоненты (кнопки, модалки, формы).
• Утилиты.
• Адаптив из коробки.
• Единый стиль.

Правило: Bootstrap — для быстрого старта. Кастомизация — через SCSS.

Зачем Bootstrap

Плюсы:

• Быстрый прототип.
• Не нужно писать CSS с нуля.
• Проверено миллионами сайтов.
• Большое сообщество.
• Документация.

Минусы:

• Сайты выглядят похоже.
• Размер CSS/JS.
• Ограничения в кастомизации.
• Много лишнего.

Правило: для админок, MVP, лендингов — идеально. Для уникального дизайна — свой CSS.

Что входит

CSS:

• Сетка — 12 колонок.
• Типографика — базовые стили.
• Компоненты — кнопки, карточки, формы, модалки, навбары.
• Утилиты — отступы, цвета, флексы.
• Хелперы — display, text-align.

JS:

• Модалки — без jQuery (Bootstrap 5).
• Dropdown — выпадающие меню.
• Tabs — вкладки.
• Collapse — аккордеон.
• Toast — уведомления.
• Tooltip, Popover.
• Carousel — слайдер.

Bootstrap 5 vs 4

Главное отличие:

• Bootstrap 5 — без jQuery.
• Bootstrap 4 — требовал jQuery.

Что нового в 5:

• CSS-переменные.
• Утилиты через API.
• Offcanvas — боковая панель.
• RTL из коробки.
• SVG-иконки в формах.
• Улучшенные формы.

Правило: использовать Bootstrap 5.

Установка: CDN

Самый быстрый способ:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1>Привет, Bootstrap!</h1>

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

Что важно:

• CSS — в <head>.
• JS — в конце <body>.
• bootstrap.bundle.min.js — включает Popper.js (для dropdown, tooltip).

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

Установка: NPM

Через npm:

npm install bootstrap

Через yarn:

yarn add bootstrap

Импорт:

JS:

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

React/Next:

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

Что даёт: управление версией, минификация.

Установка: скачивание

Скачать архив:

getbootstrap.com

Что внутри:

• css/bootstrap.css — развёрнутый.
• css/bootstrap.min.css — минифицированный.
• js/bootstrap.js.
• js/bootstrap.bundle.js.
• scss/ — исходники.

Установка: через SCSS

Для кастомизации:

npm install bootstrap sass

src/scss/main.scss:

// Кастомизация переменных
$primary: #c1442e;

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

Что даёт: свой цвет вместо дефолтного синего.

Проверка

1. Кнопка:

<button type="button" class="btn btn-primary">Кнопка</button>

Должна быть синяя с закруглёнными углами.

2. Сетка:

<div class="container">
    <div class="row">
        <div class="col">Колонка 1</div>
        <div class="col">Колонка 2</div>
    </div>
</div>

Две равные колонки.

3. Модалка:

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
    Открыть
</button>

<div class="modal" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">Привет!</div>
        </div>
    </div>
</div>

Кнопка открывает модалку.

Если что-то не работает — проверить CSS/JS в DevTools → Network.

Первая страница

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой сайт</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <header class="bg-dark text-white p-4">
        <div class="container">
            <h1 class="h3 mb-0">Мой сайт</h1>
        </div>
    </header>

    <main class="container py-5">
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Курс Laravel</h5>
                        <p class="card-text">Пять курсов от основ до продакшена.</p>
                        <a href="#" class="btn btn-primary">Подробнее</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Курс React</h5>
                        <p class="card-text">Компоненты, хуки, роутинг.</p>
                        <a href="#" class="btn btn-primary">Подробнее</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-light py-4 mt-5">
        <div class="container text-center text-muted">
            © 2026 Мой сайт
        </div>
    </footer>

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

Что использовано:

• container — центрирование.
• row, col-md-6 — сетка.
• card — карточка.
• btn btn-primary — кнопка.
• Утилиты p-4, mb-0, py-5, g-4.

Как учиться

1. Документация:

getbootstrap.com/docs/5.3/

2. Изучать компоненты по одному.

3. Копировать код из документации.

4. Менять — понимать, что происходит.

5. Смотреть DevTools — какие классы применяются.

Правило: Bootstrap — конструктор. Собираешь из готовых блоков.

Практика

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

2. Создайте простую страницу:

• Header с тёмным фоном.
• Контейнер с сеткой.
• Карточка с кнопкой.
• Footer.

3. Проверьте на мобильном (Ctrl+Shift+M в DevTools).

4. Откройте документацию, добавьте 3 новых компонента.

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

1. JS до CSS:

<script>...</script>
<link rel="stylesheet">

Решение: CSS в <head>, JS в конце <body>.

2. Забыли bootstrap.bundle.js:

Dropdown и модалки не работают

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

3. Нет viewport:

Мобильные — сжатая версия

Решение: <meta name="viewport" ...>.

4. Конфликт со своим CSS:

Свои стили перебивают Bootstrap

Решение: подключать свой CSS после Bootstrap.

5. Неправильные data-атрибуты:

data-toggle="modal"   <!-- Bootstrap 4 -->

Решение: data-bs-toggle="modal" (Bootstrap 5).

6. Использование Bootstrap 4:

Устарел, требует jQuery

Решение: Bootstrap 5.

7. Не использовать container:

Контент на всю ширину

Решение: <div class="container">.

8. Inline-стили вместо классов:

<div style="padding: 20px">

Решение: class="p-4".

Итог

• Bootstrap — CSS-фреймворк.
• Bootstrap 5 — без jQuery.
• Установка: CDN, npm, скачивание, SCSS.
• CSS в <head>, JS в конце <body>.
• bootstrap.bundle.min.js — с Popper.
• Компоненты — готовые блоки.
• Сетка — 12 колонок.
• Утилиты — отступы, цвета, флексы.
• Документация — главный источник.
• Кастомизация — через SCSS.

Дальше — установка и подключение.