Вёрстка сайта з використанням Bootstrap
Bootstrap — найпоширеніший CSS-фреймворк з готовою компонентною бібліотекою. Використовується там, де потрібна швидкість розробки, мінімальні вимоги до дизайнера та підтримка широкого браузерного спектра. Bootstrap 5 убрав jQuery-залежність, перейшов на CSS Custom Properties та RTL-підтримку.
Установка Bootstrap 5
Через npm (рекомендується)
npm install bootstrap @popperjs/core
// src/styles/main.scss
// 1. Переопределити переменні ДО імпорту Bootstrap
$primary: #2563eb;
$secondary: #6b7280;
$border-radius: 0.5rem;
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;
$enable-smooth-scroll: true;
// 2. Імпорт Bootstrap
@import "bootstrap/scss/bootstrap";
// 3. Свої стили поверх
// main.ts — імпорт лише потрібних компонентів
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/collapse';
// Не імпортувати весь bootstrap.bundle.js — витрачає 15+ KB
Кастомізація через SCSS-переменні
Bootstrap використовує Sass-переменні та maps для повної кастомізації без модифікації исходников:
// Цветовая палітра
$theme-colors: (
"primary": #2563eb,
"secondary": #6b7280,
"success": #16a34a,
"danger": #dc2626,
"warning": #d97706,
"info": #0891b2,
"light": #f9fafb,
"dark": #111827,
);
// Сітка
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1280px,
xxl: 1536px,
);
// Контейнер максимальні ширини
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1200px,
xxl: 1400px,
);
// Відступи (spacer = 1rem)
$spacers: (
0: 0,
1: 0.25rem,
2: 0.5rem,
3: 0.75rem,
4: 1rem,
5: 1.5rem,
6: 2rem,
);
Структура типової сторінки
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Назва сайту</title>
<link rel="stylesheet" href="/assets/main.css" />
</head>
<body>
<!-- Навігація -->
<nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
<div class="container">
<a class="navbar-brand fw-bold" href="/">Logo</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#mainNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="mainNav">
<ul class="navbar-nav ms-auto align-items-lg-center gap-lg-2">
<li class="nav-item"><a class="nav-link" href="/about">Про нас</a></li>
<li class="nav-item"><a class="nav-link" href="/services">Послуги</a></li>
<li class="nav-item">
<a class="btn btn-primary btn-sm" href="/contact">Зв'язатися</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section class="py-9 py-lg-10 bg-light">
<div class="container">
<div class="row align-items-center g-5">
<div class="col-lg-6">
<h1 class="display-4 fw-bold mb-4">Заголовок hero-секції</h1>
<p class="lead text-secondary mb-5">
Підзаголовок з описом ценностного предложения.
</p>
<div class="d-flex gap-3 flex-wrap">
<a href="/start" class="btn btn-primary btn-lg">Почати</a>
<a href="/demo" class="btn btn-outline-secondary btn-lg">Демо</a>
</div>
</div>
<div class="col-lg-6">
<img src="/img/hero.webp" alt="Hero" class="img-fluid rounded-3 shadow" />
</div>
</div>
</div>
</section>
<!-- Карточки -->
<section class="py-7">
<div class="container">
<h2 class="text-center fw-semibold mb-6">Наші послуги</h2>
<div class="row g-4">
<div class="col-md-6 col-lg-4">
<div class="card h-100 border-0 shadow-sm">
<div class="card-body p-5">
<div class="mb-4 text-primary fs-1">
<i class="bi bi-code-slash"></i>
</div>
<h3 class="card-title h5 fw-semibold">Розробка</h3>
<p class="card-text text-secondary">Опис послуги.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="/assets/main.js"></script>
</body>
</html>
Bootstrap Icons
npm install bootstrap-icons
// У main.scss
@import "bootstrap-icons/font/bootstrap-icons";
Або SVG inline:
<svg class="bi text-primary" width="24" height="24" fill="currentColor">
<use href="/node_modules/bootstrap-icons/bootstrap-icons.svg#shield-check" />
</svg>
Використання Bootstrap у React
// Використовуйте react-bootstrap замість data-bs-* атрибутів
import { Modal, Button, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const ContactModal = ({ show, onHide }) => (
<Modal show={show} onHide={onHide} centered>
<Modal.Header closeButton>
<Modal.Title>Зв'язатися з нами</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form>
<Form.Group className="mb-3">
<Form.Label>Email</Form.Label>
<Form.Control type="email" placeholder="[email protected]" />
</Form.Group>
<Button type="submit" variant="primary" className="w-100">Отправить</Button>
</Form>
</Modal.Body>
</Modal>
);
Оптимізація розміру бандла
За замовчуванням Bootstrap CSS — близько 180 KB. Імпортуйте лише потрібні модулі:
// Мінімальний набір
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/utilities/api";
// Додавайте за необхідності:
// @import "bootstrap/scss/buttons";
// @import "bootstrap/scss/nav";
// @import "bootstrap/scss/card";
// @import "bootstrap/scss/modal";
Сроки
Налаштування Bootstrap з SCSS-кастомізацією: 2–3 години. Посадочна сторінка: 1–1.5 дня. Багатосторінковий корпоративний сайт: 3–5 днів. Bootstrap прискорює вёрстку стандартних елементів (форм, таблиць, модалок) за рахунок готових компонентів.