Что такое Bootstrap
Bootstrap — CSS-фреймворк: большой готовый файл стилей с классами для сетки, кнопок, форм, меню и других частей интерфейса. Вместо того чтобы писать CSS самому, вы добавляете элементам классы вроде btn btn-primary — и получаете аккуратную кнопку, которая одинаково выглядит во всех браузерах. Курс построен на Bootstrap 5.3.
Из чего состоит Bootstrap
| Часть | Что даёт |
|---|---|
| Сетка | Колонки, которые перестраиваются под ширину экрана |
| Утилиты | Мелкие классы на одно свойство: отступ, цвет, выравнивание |
| Компоненты | Готовые кнопки, карточки, меню, формы, таблицы |
| JavaScript | Поведение для окон, выпадающих меню, вкладок, слайдера |
Bootstrap 5 не нуждается в jQuery: его скрипты написаны на обычном JavaScript.
Когда он подходит
Bootstrap хорош, когда интерфейс нужен быстро и дизайнера нет: прототип, админ-панель, внутренний инструмент компании, лендинг для проверки идеи. Он берёт на себя адаптивность, доступность и одинаковый вид элементов. Если же у проекта свой уникальный дизайн, готовые стили придётся постоянно переопределять — об этом в последнем уроке курса.
В курсе мы соберём лендинг сервиса задач Tasko и небольшую админ-панель для него.
Подключение через CDN
CDN — сеть серверов, которая раздаёт популярные файлы. Чтобы подключить Bootstrap, достаточно двух строк: стили в <head> и скрипт перед закрывающим </body>. Создайте папку проекта и в ней файл index.html:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tasko</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-4">
<h1>Tasko</h1>
<p class="lead">Планировщик задач для небольших команд.</p>
<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>Откройте файл в браузере: заголовок, крупный вводный текст и синяя кнопка уже оформлены, хотя своего CSS нет ни строчки. Файл bootstrap.bundle.min.js содержит все скрипты Bootstrap вместе с библиотекой Popper, которая позиционирует подсказки и выпадающие меню.
Как устроены примеры курса
Дальше примеры — это фрагменты содержимого <body> вашего index.html. Каждый начинается со строки <link>, чтобы превью под кодом подключило Bootstrap само. Если примеру нужен JavaScript, внизу стоит тег <script> с бандлом.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<button class="btn btn-success">Сохранить</button>
<button class="btn btn-outline-secondary">Отмена</button>В превью — зелёная кнопка и серая кнопка с контуром.
Частая ошибка
Забыть <meta name="viewport">. Без него телефон отрисует страницу шириной около 980 пикселей и уменьшит её, и адаптивная сетка Bootstrap не сработает: на экране будет мелкая «настольная» версия. Эта строка обязательна в каждой странице с Bootstrap.