Вёрстка сайта с использованием 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;
$border-radius-lg: 0.75rem;
$font-family-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
$font-size-base: 1rem;
$line-height-base: 1.6;
$box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
$enable-smooth-scroll: true;
$enable-negative-margins: true;
// 2. Импорт Bootstrap
@import "bootstrap/scss/bootstrap";
// 3. Свои стили поверх
// main.ts — импорт JS только нужных компонентов
import 'bootstrap/js/dist/modal';
import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/tooltip';
// Не импортировать весь 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,
7: 3rem,
8: 4rem,
9: 6rem,
10: 8rem,
);
Структура типовой страницы
<!DOCTYPE html>
<html lang="ru">
<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 — использовать react-bootstrap, не data-bs-* атрибуты
import { Modal, Button, Form } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
interface ContactModalProps {
show: boolean;
onHide: () => void;
}
const ContactModal: FC<ContactModalProps> = ({ 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>
<Form.Group className="mb-3">
<Form.Label>Сообщение</Form.Label>
<Form.Control as="textarea" rows={4} />
</Form.Group>
<Button type="submit" variant="primary" className="w-100">Отправить</Button>
</Form>
</Modal.Body>
</Modal>
);
Оптимизация размера bundle
По умолчанию Bootstrap CSS — около 180 KB. Импорт только нужных модулей:
// Минимальный набор
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/root";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";
// Добавлять по необходимости:
// @import "bootstrap/scss/buttons";
// @import "bootstrap/scss/nav";
// @import "bootstrap/scss/navbar";
// @import "bootstrap/scss/card";
// @import "bootstrap/scss/modal";
// @import "bootstrap/scss/forms";
Сроки
Настройка Bootstrap с SCSS-кастомизацией: 2–3 часа. Посадочная страница: 1–1.5 дня. Многостраничный корпоративный сайт: 3–5 дней. Bootstrap ускоряет вёрстку стандартных элементов (форм, таблиц, модалок) за счёт готовых компонентов.