В этой лекции мы узнаем, как подключить и использовать фреймворк 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 у вас под рукой, вы вооружены для создания сайтов, которые не только работают, но и радуют глаз. Удачи в разработке! 🚀
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ