Bootstrap

Bootstrap

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

По сути конструктор, где у вас уже есть готовые детали — кнопки, формы, навигационные панели

Зачем использовать Bootstrap?

Экономия времени

Вместо того чтобы писать CSS для каждой кнопки с нуля, вы используете готовый класс


<button class="btn btn-primary">Красивая кнопка</button>

Адаптивность "из коробки"

Bootstrap автоматически адаптирует ваш сайт под разные устройства — от смартфонов до больших мониторов

Кроссбраузерность

Фреймворк решает проблемы совместимости с разными браузерами

Консистентность дизайна

Все элементы выглядят согласованно и профессионально

Подключение Bootstrap

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>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Ваш CSS -->
    <link href="styles.css" rel="stylesheet">
</head>
<body>
    <!-- Ваш контент -->
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Ваш JS -->
    <script src="script.js"></script>
</body>
</html>
Ваш код подключается всегда после Bootstrap, чтобы в случае чего переписать существующие правила

Подключение Bootstrap

NPM

1. Инициализируйте NPM проект (если этого еще не было сделано)

npm init -y

2. Установите bootstrap

npm install bootstrap

3. Скопируйте CSS и JS в папку libs


cp node_modules/bootstrap/dist/css/bootstrap.min.css libs/.
cp node_modules/bootstrap/dist/js/bootstrap.bundle.min.js libs/.
Так как для использования модулей напрямую требуется сборщик

4. Подключите CSS и JS


<link rel="stylesheet" href="libs/bootstrap.min.css">
<script src="libs/bootstrap.bundle.min.js"></script>

Компонентная структура

каждый элемент интерфейса является самостоятельным, переиспользуемым блоком со своей логикой, стилями и поведением

Принципы компонентов

  • Модульность — каждый компонент независим
  • Композитность — компоненты можно комбинировать
  • Настраиваемость — через модификаторы и утилиты
  • Доступность — соответствие стандартам WCAG
  • Семантичность — правильная HTML-разметка

Сами компоненты можно найти на сайте Bootstrap


https://getbootstrap.com/docs/5.0/components

Пример кнопки


<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
Вы можете добавлять свои классы и ID для интерактивности 

<button type="button" class="btn btn-primary card__button" id="send-form">Primary</button>

Система сетки

способ размещения элементов в ряд — это комплексная архитектура для построения responsive-дизайна

Сетка Bootstrap следует принципу "mobile-first"

сначала проектируется для мобильных устройств, затем масштабируется для больших экранов

Анатомия системы сетки

Container (Контейнер) → Row (Строка) → Column (Колонка)

Container

рамка, внутри которой размещается весь контент


<!-- БЕЗ container - контент растягивается на всю ширину -->
<div style="background: lightblue;">
    Этот текст растягивается на весь экран. На мониторе 1920px это очень неудобно читать.
</div>

<!-- С container - контент ограничивается разумной шириной -->
<div class="container" style="background: lightgreen;">
    А этот текст ограничивается максимальной шириной и центрируется. Читать удобно!
</div>
Будет зависеть от ширины экрана пользователя

Аналог


.container {
    max-width: 1140px; /* На больших экранах не шире этого значения */
    margin: 0 auto;    /* Центрирует контейнер */
}

Breakpoints

конкретная ширина экрана, при которой макет сайта кардинально изменяется

Название Класс Диапазон ширины Типичные устройства Max-width контейнера
Extra small xs <576px Телефоны (портрет) 100%
Small sm ≥576px Телефоны (альбом) 540px
Medium md ≥768px Планшеты 720px
Large lg ≥992px Ноутбуки 960px
Extra large xl ≥1200px Мониторы 1140px
Extra extra large xxl ≥1400px Большие мониторы 1320px

Row


<div class="container" style="border: 2px solid red;">
    <div class="row" style="border: 2px solid blue;">
        <div class="col-6" style="border: 2px solid green; padding: 12px;">
            Контент колонки
        </div>
        <div class="col-6" style="border: 2px solid green; padding: 12px;">
            Контент колонки
        </div>
    </div>
</div>

Column

В bootstrap используется 12-колоночная система

  • col-12 = 1 колонка на всю ширину
  • col-6 = 2 колонки по 50%
  • col-4 = 3 колонки по 33.33%
  • col-3 = 4 колонки по 25%
  • col-2 = 6 колонок по 16.67%
  • col-1 = 12 колонок по 8.33%

Адаптивность


<div class="col-12 col-md-6 col-lg-4">
    Адаптивная колонка
</div>
  1. col-12: "На мобильных занимай всю ширину (100%)"
  2. col-md-6: "На планшетах и больше занимай половину ширины (50%)"
  3. col-lg-4: "На десктопах и больше занимай треть ширины (33.33%)"

Gutters

Он же gap

Класс g-N, где N - размер отступа


<div class="row g-3">
    <div class="col-6">Текст с отступами</div>
    <div class="col-6">Текст с отступами</div>
</div>