flask • Лекция

Урок 8: CSS-фреймворки и Bootstrap 5

Введение в Web-разработку на Flask: Урок 8

Проблема: Наш сайт работает, но выглядит ужасно

Давайте честно посмотрим на наш проект. У него отличный “движок”: есть база данных, админка, создание и удаление постов. Но выглядит он как сайт из 1995 года. Текст прилип к левому краю, ссылки синие и подчеркнутые, кнопки скучные.

Цель урока

Сегодня мы сделаем нашему сайту “Евроремонт”. Превратим “гадкого утенка” в современный портал с помощью Bootstrap 5.

Часть 1: Что такое CSS-фреймворк?

Профессиональные программисты редко пишут стили (CSS) с нуля. Это долго, и сложно сделать так, чтобы сайт хорошо выглядел и на компьютере, и на телефоне.

Вместо этого мы используем Фреймворки. Bootstrap — самый популярный в мире набор готовых инструментов для верстки.

Лего против глины: концепция использования готовых UI компонентов

Часть 2: Подключение через CDN

Нам даже не нужно скачивать файлы Bootstrap. Мы подключим их через CDN (Content Delivery Network).

Это работает как стриминг фильмов. Браузер подгружает стили прямо из интернета. Нам нужно просто добавить одну строчку в <head> нашего файла base.html:

<link href="https://cdn.../bootstrap.min.css" rel="stylesheet">

Как только вы сохраните файл и обновите страницу — шрифты изменятся, отступы пропадут. Это значит, Bootstrap заработал!

Часть 3: Сетка (Grid System)

12-колоночная сетка Bootstrap

Главная магия Bootstrap — это Сетка. Весь экран по ширине делится на 12 виртуальных колонок. Вы можете сказать элементу: “Занимай 6 колонок” (половину экрана) или “Занимай 4 колонки” (треть экрана).

Основные классы сетки:

.container — коробочка по центру экрана (чтобы контент не прилипал к краям).
.row — строка.
.col-6 — колонка шириной 6 из 12.

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

Класс col-md-6 означает: “На компьютере (medium) занимай половину, а на телефоне — растянись на всю ширину”.

Часть 4: Компоненты (Кнопки и Карточки)

В Bootstrap мы не пишем стили, мы присваиваем Классы.

1. Кнопки: Вместо скучной серой кнопки button, пишем:

<a href="..." class="btn btn-primary">Читать</a> (Синяя кнопка)
<a href="..." class="btn btn-danger">Удалить</a> (Красная кнопка)

2. Карточки (Cards): Идеально подходят для постов блога. Это готовый блок с рамкой, тенью, местом для картинки и заголовка.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Заголовок</h5>
    <p class="card-text">Текст поста...</p>
  </div>
</div>

Часть 5: Красивые уведомления (Alerts)

Помните наши Flash-сообщения? Сейчас это просто текст. Bootstrap позволяет превратить их в цветные плашки.

В коде шаблона мы используем классы alert:

alert-success — Зеленая плашка (для успеха).
alert-danger — Красная плашка (для ошибок).
alert-warning — Желтая плашка (предупреждение).

Важный нюанс интеграции

В Python мы писали flash("...", "error"). В Bootstrap нет класса error, есть danger. Поэтому в коде Python лучше сразу использовать категорию "danger".

Адаптивная навигационная панель Bootstrap (Navbar)

Самый сложный, но эффектный элемент. Navbar — это шапка сайта с логотипом и ссылками. Она умеет автоматически сворачиваться в “бургер-меню” (три полоски) на мобильных телефонах.

Вам не нужно писать код Навбара самим.

Главный секрет разработчика

Откройте документацию getbootstrap.com, найдите раздел Navbar, скопируйте код и вставьте в base.html, заменив ссылки на свои.

Итоги и Домашнее задание

Резюме урока:

Bootstrap 5 — набор готовых стилей.
Классы — главный инструмент (btn, card, container).
CDN — способ быстрого подключения библиотек.
Copy-Paste — нормальная практика при работе с документацией фреймворков.

ДЗ: Редизайн Блога

Подключите Bootstrap к своему проекту.
Добавьте в шапку сайта (base.html) темное меню (Navbar dark).
Оформите список постов на главной в виде сетки из Карточек (card).
Сделайте кнопку “Удалить” красной, а “Редактировать” — желтой или зеленой.