Frontend
Быстрый старт в Bootstrap 5: Установка, структура, первые шаги #1
admin
Иконка календаря 06.05.2025
Иконка чата 0
Иконка глаза 151
 

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-канал.

Там вы найдете анонсы обучающих статей и видео, готовый код для ваших проектов и увлекательные курсы. Ничего лишнего — только практика, вдохновение и развитие.

👉 https://t.me/codelab_channel

Если вы устанавливаете 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

Без регистрации и смс