Bootstrap – это бесплатный и открытый фреймворк для адаптивной верстки (mobile-first), который предоставляет готовые HTML, CSS и JavaScript шаблоны для типографики, форм, кнопок, навигации и других элементов интерфейса. Используя Bootstrap, можно быстро начать разработку сайта с единым дизайном и минимальным количеством ручного CSS и JS.
В версии 5.3.5 сохранены все ключевые изменения Bootstrap 5: отказ от jQuery, гибкая сетка на основе flexbox, новые темы и CSS-переменные, встроенная поддержка светлой/темной темы и многое другое. Обновление до 5.3.5 исправляет мелкие ошибки и обеспечивает совместимость со свежими браузерами.
Установка и подключение
Чтобы начать работу, скачайте Bootstrap или подключите его через CDN. Самый простой способ – использовать готовые ссылки на CSS и JS из CDN. Например, в <head> добавляем ссылку на скомпилированный CSS, а перед </body> – скрипт с JavaScript (включая Popper.js для компонентов типа выпадающих списков):
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Демо Bootstrap 5.3.5</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<h1 class="text-center">Привет, Bootstrap!</h1>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Такой код (см. пример выше) подключит Bootstrap 5.3.5 через CDN без дополнительных настроек. Альтернативно Bootstrap можно установить через пакетный менеджер: например, npm install bootstrap@5.3.5. В этом случае в проекте появятся исходники стилей (Sass) и JavaScript-файлы, которые можно компилировать самому.
Структура проекта Bootstrap
Базовая структура проекта
Если вы просто подключаете Bootstrap через CDN или загружаете min-файлы, структура может быть такой:
/my-bootstrap-project
│
├── index.html
│
├── /css
│ └── bootstrap.min.css # Основной CSS Bootstrap
│
├── /js
│ └── bootstrap.bundle.min.js # JS Bootstrap с Popper внутри
│ └── bootstrap.min.js # (Альтернатива, если Popper подключается отдельно)
│ └── popper.min.js # (Только если нужен отдельно)
│
├── /img
│ └── logo.png # Пример изображений
│
├── /fonts # Шрифты (если используются)
│
└── /custom
├── custom.css # Ваши переопределения стилей
└── custom.js # Ваш JS-код
Структура при использовании исходников через npm
📢 Подписывайтесь на наш Telegram-канал.
Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.
Если вы устанавливаете Bootstrap через npm (npm install bootstrap), структура будет немного сложнее:
/my-bootstrap-project
│
├── /node_modules
│ └── bootstrap/
│ ├── dist/
│ │ ├── css/
│ │ │ └── bootstrap.min.css
│ │ └── js/
│ │ └── bootstrap.bundle.min.js
│ ├── scss/ # Исходники SCSS
│ └── js/
│ └── dist/ # Собранные JS-компоненты по-отдельности
│
├── /src
│ ├── scss/
│ │ └── custom.scss # Ваши стили с импортом Bootstrap SCSS
│ └── js/
│ └── custom.js # Ваш JS-код
│
├── /public
│ ├── index.html
│ └── /assets
│ ├── /img/
│ └── /fonts/
│
├── package.json
└── webpack.config.js (или другой сборщик: Vite, Gulp и т.д.)
Пример «Hello, world!» на Bootstrap
Для начала давай создадим чуть более выразительную страницу: добавим кнопку, карточку и фон секции. Всё это — с помощью готовых классов Bootstrap без единой строки CSS.
✅ HTML-код:
<!doctype html>
<html lang="ru" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello, Bootstrap!</title>
<!-- Подключение стилей Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Контейнер Bootstrap -->
<div class="container mt-5">
<div class="bg-light p-5 rounded shadow-sm">
<h1 class="text-center mb-4">Привет, мир!</h1>
<p class="lead text-center">Это простой пример страницы с Bootstrap.</p>
<div class="text-center">
<button class="btn btn-primary mt-3">Нажми меня</button>
</div>
</div>
</div>
<!-- Скрипт Bootstrap с Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
✅ Результат:
📘 Таблица с объяснением
Класс/атрибут | Назначение в Bootstrap |
---|---|
data-bs-theme=»light» | Включает светлую тему интерфейса (Bootstrap 5.3+) |
container | Центрирует контент по ширине и задаёт отступы по краям |
mt-5 | Отступ сверху (margin-top: 5) |
bg-light | Светлый фон для блока |
p-5 | Внутренние отступы (padding: 5) |
rounded | Скруглённые углы |
shadow-sm | Мягкая тень |
text-center | Центровка текста |
lead | Крупный вводный текст |
btn btn-primary | Кнопка в стиле Bootstrap с основным цветом |
bootstrap.bundle.min.js | Включает все скрипты компонентов + Popper для интерактивных элементов |
Комментарии
0