Bootstrap — самый популярный CSS-фреймворк в мире. Он даёт готовые компоненты и систему классов, которые позволяют сверстать приличный интерфейс без написания CSS с нуля. Для Python-разработчика, которому нужен работающий UI быстро, Bootstrap — логичный первый шаг.
Подключение через CDN
Никакой установки не нужно. Добавьте в <head> ссылку на CSS и перед </body> — скрипт:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DevBlog</title>
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
</head>
<body>
<!-- Ваш HTML -->
<!-- Bootstrap JS (нужен для модалок, дропдаунов и т.д.) -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
></script>
</body>
</html>
Контейнеры
Bootstrap строит всё вокруг контейнеров — они ограничивают ширину контента и центрируют его:
<!-- Фиксированная максимальная ширина с брейкпоинтами -->
<div class="container">
Контент не шире 1320px на больших экранах
</div>
<!-- На всю ширину экрана всегда -->
<div class="container-fluid">
Контент на 100% ширины
</div>
<!-- Максимальная ширина до конкретного брейкпоинта -->
<div class="container-md">
100% до md, фиксированная после
</div>
Утилиты отступов
Bootstrap предоставляет классы для margin и padding по формуле {свойство}{сторона}-{размер}:
- Свойства:
m(margin),p(padding) - Стороны:
t(top),b(bottom),s(start/left),e(end/right),x(горизонтально),y(вертикально) - Размеры:
0,1,2,3,4,5,auto
<!-- Отступы -->
<div class="mt-3">margin-top: 1rem</div>
<div class="mb-4">margin-bottom: 1.5rem</div>
<div class="mx-auto">центрирование по горизонтали</div>
<div class="my-5">margin top и bottom: 3rem</div>
<!-- Поля -->
<div class="p-3">padding: 1rem со всех сторон</div>
<div class="px-4 py-2">padding-x: 1.5rem, padding-y: 0.5rem</div>
<div class="ps-3">padding-start (left): 1rem</div>
Базовый размер (1) равен 0.25rem. Шкала: 0=0, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem.
Утилиты цветов
<!-- Цвет текста -->
<p class="text-primary">Синий (основной)</p>
<p class="text-secondary">Серый</p>
<p class="text-success">Зелёный</p>
<p class="text-danger">Красный</p>
<p class="text-warning">Жёлтый</p>
<p class="text-muted">Приглушённый</p>
<p class="text-dark">Тёмный</p>
<!-- Цвет фона -->
<div class="bg-primary text-white">Синий фон</div>
<div class="bg-light">Светло-серый фон</div>
<div class="bg-dark text-white">Тёмный фон</div>
<div class="bg-success text-white">Зелёный фон</div>
Утилиты отображения
<!-- Flexbox -->
<div class="d-flex">flex-контейнер</div>
<div class="d-flex justify-content-between">space-between</div>
<div class="d-flex align-items-center">по центру по вертикали</div>
<div class="d-flex gap-3">отступы между элементами</div>
<div class="d-flex flex-column">вертикальный flex</div>
<!-- Скрыть/показать -->
<div class="d-none">скрыт всегда</div>
<div class="d-none d-md-block">скрыт до md, затем блочный</div>
<div class="d-md-none">виден только до md</div>
Кнопки
Bootstrap предоставляет полный набор вариантов кнопок:
<button class="btn btn-primary">Основная</button>
<button class="btn btn-secondary">Вторичная</button>
<button class="btn btn-success">Успех</button>
<button class="btn btn-danger">Опасность</button>
<button class="btn btn-warning">Внимание</button>
<button class="btn btn-outline-primary">Контурная</button>
<button class="btn btn-outline-secondary">Контурная серая</button>
<!-- Размеры -->
<button class="btn btn-primary btn-sm">Маленькая</button>
<button class="btn btn-primary btn-lg">Большая</button>
<!-- На всю ширину -->
<button class="btn btn-primary w-100">Полная ширина</button>
<!-- Работает и с <a> -->
<a href="/posts/" class="btn btn-outline-primary">Все статьи</a>
Типографика
<p class="text-start">По левому краю</p>
<p class="text-center">По центру</p>
<p class="text-end">По правому краю</p>
<p class="fw-bold">Жирный</p>
<p class="fw-normal">Нормальный</p>
<p class="fst-italic">Курсив</p>
<p class="fs-1">Размер 1 (самый большой)</p>
<p class="fs-6">Размер 6 (самый маленький)</p>
<p class="text-uppercase">все заглавные</p>
<p class="text-truncate" style="max-width: 200px;">Длинный текст обрезается</p>
Пример: шапка DevBlog с Bootstrap
<header class="bg-dark text-white py-3">
<div class="container d-flex justify-content-between align-items-center">
<a href="/" class="text-white text-decoration-none fw-bold fs-4">
DevBlog
</a>
<nav>
<ul class="list-unstyled d-flex gap-3 mb-0">
<li><a href="/posts/" class="text-white text-decoration-none">Статьи</a></li>
<li><a href="/about/" class="text-white text-decoration-none">Обо мне</a></li>
<li>
<a href="/contact/" class="btn btn-outline-light btn-sm">
Написать
</a>
</li>
</ul>
</nav>
</div>
</header>
Bootstrap хорош для старта и прототипирования. Когда проект вырастет, многие разработчики переходят на кастомный CSS или Tailwind. Но понимание Bootstrap — полезный фундамент: он построен на тех же flexbox и медиазапросах, которые вы изучаете в других статьях.
💬 Комментарии (0)
Комментариев пока нет
Станьте первым, кто поделится мнением об этой статье!