08. Компоненты Bootstrap

Что такое компоненты Bootstrap

Компоненты Bootstrap — это готовые элементы интерфейса, которые можно использовать без написания сложного CSS или JavaScript. Они выглядят современно, адаптивно и позволяют быстро собирать интерфейсы.

Bootstrap даёт вам целый набор готовых кирпичей — нужно лишь выбрать нужный и вставить в HTML.

Navbar — навигационная панель

Navbar (панель навигации) — это верхнее меню сайта. Оно адаптируется под разные устройства, автоматически превращаясь в мобильное меню.

Пример Navbar:


<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="#">ITspecialist</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item"><a class="nav-link active" href="#">Главная</a></li>
        <li class="nav-item"><a class="nav-link" href="#courses">Курсы</a></li>
        <li class="nav-item"><a class="nav-link" href="#about">О проекте</a></li>
      </ul>
    </div>
  </div>
</nav>

Разбор:

```
.navbar
```
— основной контейнер меню.
```
.navbar-expand-lg
```
— раскрывает меню на больших экранах.
```
.navbar-dark.bg-dark
```
— тёмная тема.
```
.navbar-toggler
```
— кнопка для мобильного меню.
```
.collapse
```
и
```
.navbar-collapse
```
— сворачивание меню.

Карточки (Cards)

Card — это универсальный блок с заголовком, изображением и описанием. Отлично подходит для отображения информации, профилей или товаров.

Пример карточек:


<div class="container my-5">
  <div class="row g-4">
    <div class="col-md-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Course image">
        <div class="card-body">
          <h5 class="card-title">Курс HTML + CSS</h5>
          <p class="card-text">Научись создавать красивые сайты с нуля!</p>
          <a href="#" class="btn btn-primary">Открыть курс</a>
        </div>
      </div>
    </div><div class="col-md-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Course image">
        <div class="card-body">
          <h5 class="card-title">Курс JavaScript</h5>
          <p class="card-text">Освой программирование и сделай сайты интерактивными.</p>
          <a href="#" class="btn btn-success">Подробнее</a>
        </div>
      </div>
    </div><div class="col-md-4">
      <div class="card h-100 shadow-sm">
        <img src="https://via.placeholder.com/400x200" class="card-img-top" alt="Course image">
        <div class="card-body">
          <h5 class="card-title">Курс Python</h5>
          <p class="card-text">Изучи язык, на котором создаются нейросети и Telegram-боты.</p>
          <a href="#" class="btn btn-warning">Начать!</a>
        </div>
      </div>
    </div>
  </div>
</div>

Разбор:

```
.card
```
— основной контейнер карточки.
```
.card-img-top
```
— верхнее изображение.
```
.card-body
```
— тело карточки (контент).
```
.btn.btn-primary
```
— кнопка Bootstrap.

Модальные окна (Modal)

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

Пример модального окна:


<!-- Кнопка для открытия -->
<button type="button" class="btn btn-outline-light" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Открыть окно
</button><!-- Само модальное окно -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Привет от ITspecialist!</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Это модальное окно создано с помощью Bootstrap.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Понял!</button>
      </div>
    </div>
  </div>
</div>

Разбор:

```
data-bs-toggle="modal"
```
— открывает окно при клике.
```
data-bs-target="#exampleModal"
```
— указывает, какое окно открыть.
```
.modal
```
— базовый контейнер окна.
```
.modal-dialog
```
— область окна.
```
.modal-content
```
— внутренности модального блока.

Дополнительные полезные компоненты

Bootstrap также содержит:

Alerts — уведомления (
```
.alert.alert-success
```
).
Badges — значки рядом с текстом или кнопками.
Progress Bars — полосы загрузки.
Collapse — скрывающиеся панели.
Tooltips — всплывающие подсказки.

Практика: мини-сайт с Navbar, карточками и Modal

HTML пример:


<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ITspecialist Bootstrap Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-dark text-light"><nav class="navbar navbar-dark bg-dark shadow">
  <div class="container">
    <a class="navbar-brand fw-bold" href="#">ITspecialist</a>
  </div>
</nav>
<div class="container text-center my-5">
  <h1 class="mb-4">Изучай с комфортом!</h1>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#welcomeModal">Подробнее</button>
<div class="row mt-5 g-4">
    <div class="col-md-4">
      <div class="card text-dark">
        <div class="card-body">
          <h5 class="card-title">HTML + CSS</h5>
          <p class="card-text">Базовый курс по вёрстке.</p>
          <a href="#" class="btn btn-outline-primary">Перейти</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card text-dark">
        <div class="card-body">
          <h5 class="card-title">JavaScript</h5>
          <p class="card-text">Добавь динамику своим страницам.</p>
          <a href="#" class="btn btn-outline-success">Перейти</a>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="card text-dark">
        <div class="card-body">
          <h5 class="card-title">Python</h5>
          <p class="card-text">Программируй backend и ботов.</p>
          <a href="#" class="btn btn-outline-warning">Перейти</a>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="welcomeModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content text-dark">
      <div class="modal-header">
        <h5 class="modal-title">Добро пожаловать!</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Ты только что создал свой первый мини-сайт на Bootstrap 🎉</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Итоги урока

Теперь вы умеете:

Создавать навигационные панели (Navbar).
Работать с карточками и оформлять контент.
Использовать модальные окна для сообщений и форм.
Комбинировать компоненты Bootstrap для создания готовых страниц.