Bootstrap 5: Компоненты для DevBlog

Bootstrap поставляется с набором готовых UI-компонентов. Вместо написания CSS с нуля вы берёте HTML-разметку из документации и настраиваете под себя. Разберём пять компонентов, которые нужны в личном блоге разработчика.

Navbar

Навигационная панель с логотипом и ссылками. На мобиле сворачивается в кнопку «бургер».

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <div class="container">
    <!-- Логотип / название сайта -->
    <a class="navbar-brand" href="/">DevBlog</a>

    <!-- Кнопка "бургер" для мобильных -->
    <button class="navbar-toggler" type="button"
            data-bs-toggle="collapse" data-bs-target="#navMenu">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Ссылки навигации -->
    <div class="collapse navbar-collapse" id="navMenu">
      <ul class="navbar-nav ms-auto">
        <li class="nav-item">
          <a class="nav-link" href="/">Главная</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/articles/">Статьи</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/about/">Обо мне</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

navbar-expand-lg — меню разворачивается горизонтально начиная с ширины lg (992px). На мобиле — кнопка-бургер. ms-auto прижимает ссылки к правому краю.

Card

Карточка — основной элемент для показа статей на главной.

<div class="card h-100 shadow-sm">
  <img src="{{ post.image.url }}" class="card-img-top" alt="{{ post.title }}">
  <div class="card-body d-flex flex-column">
    <h5 class="card-title">{{ post.title }}</h5>
    <p class="card-text text-muted">{{ post.summary }}</p>
    <!-- Кнопка прижата к низу карточки -->
    <a href="{{ post.get_absolute_url }}" class="btn btn-primary mt-auto">
      Читать статью
    </a>
  </div>
  <div class="card-footer text-muted small">
    {{ post.published_at|date:"d.m.Y" }}
  </div>
</div>

h-100 делает все карточки в строке одинаковой высоты (работает внутри flex/grid row). mt-auto прижимает кнопку к нижнему краю тела карточки.

Badge

Небольшая метка — удобна для отображения тегов статьи или статуса.

<!-- Теги статьи -->
<h1>
  {{ post.title }}
  <span class="badge bg-secondary">Python</span>
  <span class="badge bg-info text-dark">Django</span>
</h1>

<!-- Статус черновика -->
{% if not post.is_published %}
  <span class="badge bg-warning text-dark">Черновик</span>
{% endif %}

<!-- Счётчик комментариев в навигации -->
<a href="/comments/" class="nav-link">
  Комментарии <span class="badge bg-danger">{{ comments_count }}</span>
</a>

Alert

Информационные блоки — для сообщений об ошибках, успехе, предупреждениях.

<!-- Успешное сохранение -->
{% if messages %}
  {% for message in messages %}
    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
      {{ message }}
      <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
  {% endfor %}
{% endif %}

<!-- Статические варианты -->
<div class="alert alert-success">Статья опубликована!</div>
<div class="alert alert-danger">Ошибка при сохранении.</div>
<div class="alert alert-warning">Статья в черновиках.</div>
<div class="alert alert-info">Не забудьте добавить теги.</div>

Django messages автоматически добавляет в теги success, error, warning, info — они напрямую совпадают с классами Bootstrap alert.

Pagination

Постраничная навигация для списка статей.

{% if is_paginated %}
<nav aria-label="Навигация по страницам">
  <ul class="pagination justify-content-center">

    <!-- Кнопка "Назад" -->
    {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
          « Назад
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link">« Назад</span>
      </li>
    {% endif %}

    <!-- Номера страниц -->
    {% for num in paginator.page_range %}
      <li class="page-item {% if page_obj.number == num %}active{% endif %}">
        <a class="page-link" href="?page={{ num }}">{{ num }}</a>
      </li>
    {% endfor %}

    <!-- Кнопка "Вперёд" -->
    {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link" href="?page={{ page_obj.next_page_number }}">
          Вперёд »
        </a>
      </li>
    {% else %}
      <li class="page-item disabled">
        <span class="page-link">Вперёд »</span>
      </li>
    {% endif %}

  </ul>
</nav>
{% endif %}

is_paginated и page_obj — переменные контекста, которые Django автоматически добавляет при использовании ListView с paginate_by.

Сводка классов