У цій лекції ми дізнаємося, як підключити та використовувати фреймворк Bootstrap для створення красивих і адаптивних (responsive) користувацьких інтерфейсів. Адже що таке веб-додаток без "красивого фасаду"? Саме Bootstrap зробить ваш сайт більш привабливим, виразним і зручним.
Вступ до Bootstrap
Bootstrap — це популярний CSS-фреймворк, створений командою Twitter. Він дозволяє розробникам швидко створювати сучасні, адаптивні (тобто ті, що добре відображаються на різних пристроях) веб-сторінки, без необхідності писати тонни CSS з нуля.
Чому варто використовувати Bootstrap?
- Адаптивний дизайн: одна й та сама сторінка буде добре виглядати на ПК, планшеті чи смартфоні.
- Багатий готовий функціонал: кнопки, форма введення, модальні вікна, таблиці, навігація та багато іншого — все чудово пропрацьовано.
- Мінімізація часу верстки: ти витрачаєш менше часу на стилізацію і можеш зосередитися на логіці додатку.
- Велика спільнота: це означає хорошу документацію, приклади та готові рішення.
Коротше кажучи, тобі не потрібно вигадувати велосипед, щоб додати стиль і функціональність на твій сайт.
Кроки інтеграції Bootstrap у Django
Давай додамо Bootstrap у твій Django-проєкт. Ми будемо використовувати Content Delivery Network (CDN) — це найпростіший і найшвидший спосіб підключення. А в кінці покажемо, як можна підключити Bootstrap локально (наприклад, якщо твій проєкт працює без Інтернету).
Крок 1: Підключи Bootstrap через CDN
Відкрий свій базовий HTML-шаблон (наприклад, base.html), який ми створили в одній з попередніх лекцій, і додай посилання на файли CSS та JS Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Django Application{% endblock %}</title>
<!-- Підключення Bootstrap через CDN -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRK/sgv7f3qZbJ4Csd4yY5Kf0E2E1F6f/fXokc8mF"
crossorigin="anonymous">
{% block extra_css %}{% endblock %}
</head>
<body>
<header>
<!-- Приклад меню з Bootstrap -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Мій сайт</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">
<li class="nav-item">
<a class="nav-link active" href="#">Головна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Про нас</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container">
{% block content %}{% endblock %}
</main>
<footer class="text-center">
<p>© 2023 Всі права захищені</p>
</footer>
<!-- Підключення Bootstrap JS через CDN -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pzjw8f+ua7Kw1TIqjicyFa/6pqsKa/Phuxr/scWDeQx5Loq7xJItP6omGA4t4Vd"
crossorigin="anonymous"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
Що ми зробили:
- Підключили CSS-файл Bootstrap для стилізації.
- Додали JS-файл Bootstrap, щоб працювати з інтерактивними компонентами (наприклад, модальними вікнами).
Тепер всі сторінки, які використовують шаблон base.html, можуть насолоджуватися стилем Bootstrap.
Крок 2: Застосовуємо стилі Bootstrap
Стилі з Bootstrap застосовуються за допомогою класів. Наприклад, щоб змінити стиль кнопки, додай клас btn btn-primary:
<a href="#" class="btn btn-primary">Натисни мене!</a>
Скористайся будь-яким компонентом з офіційної документації Bootstrap. Тут купа готових рішень!
Приклади використання Bootstrap в Django
Приклад 1: Обгортання тексту в картки
Картки (cards) — дуже корисний компонент Bootstrap, який часто використовується для виведення інформації:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Заголовок картки</h5>
<p class="card-text">Це приклад тексту всередині картки. Пишіть, що хочете!</p>
<a href="#" class="btn btn-primary">Детальніше</a>
</div>
</div>Приклад 2: Відображення списку об'єктів в таблиці
Припустимо, у нас є список користувачів, який ми передаємо в шаблон через контекст:
def user_list_view(request):
users = [
{'id': 1, 'name': 'Іван', 'email': 'ivan@example.com'},
{'id': 2, 'name': 'Марія', 'email': 'maria@example.com'},
]
return render(request, 'user_list.html', {'users': users})
Тепер стилізуємо таблицю за допомогою класів Bootstrap:
<div class="container mt-5">
<h2>Список користувачів</h2>
<table class="table">
<thead class="table-light">
<tr>
<th>ID</th>
<th>Ім'я</th>
<th>Email</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>Тепер твій список користувачів не тільки функціональний, але й красивий!
4. Локальне підключення Bootstrap
Іноді тобі може знадобитися зберігати Bootstrap-файли локально, наприклад, для тестування в середовищі, де немає Інтернету.
Крок 1: Завантажуємо Bootstrap
Завантаж Bootstrap з офіційного сайту.
Крок 2: Розміщуємо файли в папці static
Створи структуру для твоїх статичних файлів (якщо її ще немає):
project/
static/
css/
js/
Скопіюй CSS і JS-файли Bootstrap у відповідні папки. Наприклад:
bootstrap.min.css→static/css/bootstrap.bundle.min.js→static/js/
Повинно вийти приблизно так:
project/
├── myapp/
├── static/
│ ├── css/
│ │ └── bootstrap.min.css
│ ├── js/
│ │ └── bootstrap.bundle.min.js
└── templates/
└── base.html
Крок 3: Налаштовуємо шаблон для використання локальних файлів
Онови шаблон base.html:
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>Повинно вийти приблизно так:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Мій Django сайт</title>
<!-- Підключаємо Bootstrap CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<!-- Твій основний контент -->
<!-- Підключаємо Bootstrap JS -->
<script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
</body>
</html>Тепер Bootstrap підключений локально!
Приклади використання компонентів Bootstrap
Давай додамо трохи стилю в наш проєкт, почнемо з чогось простого, наприклад, з <button>. Звичайне натискання кнопки ніколи більше не буде нудним!
Приклад: кнопки
Кнопки Bootstrap роблять більше, ніж просто «натисни на мене»:
<button type="button" class="btn btn-primary">Первинна</button>
<button type="button" class="btn btn-secondary">Вторинна</button>
<button type="button" class="btn btn-success">Успіх</button>
<button type="button" class="btn btn-danger">Небезпека</button>
Кожна кнопка отримує свій стиль залежно від обраного класу. Ти можеш комбінувати їх як забажаєш! І, подумай, як такі кнопки привертають увагу твоїх користувачів.
Приклад: Навігаційна панель
З однією кнопкою далеко не підеш. Давай додамо навігаційну панель, щоб користувач не загубився. Ось базовий приклад:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">МійСайт</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Перемкнути навігацію">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Головна</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Функції</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Ціни</a>
</li>
</ul>
</div>
</nav>Цей код відобразить просту навігаційну панель з кількома посиланнями. Ти можеш додавати і стилізувати її на свій смак, експериментуючи з різними класами та компонентами Bootstrap.
Що далі?
Професійні інтерфейси починаються з маленьких деталей. Тепер, коли Bootstrap у тебе під рукою, ти озброєний для створення сайтів, які не лише працюють, але й тішать око. Удачі в розробці! 🚀
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ