Быстро, доступно, безопасно!
Магазин готовых сайтов

Bootstrap — каркас клиентской части сайта

Bootstrap является одним из самых популярных фронтенд фреймворков для разработки веб-сайтов и веб-приложений. Разработчики выбирают Bootstrap за его удобство, адаптивность и обширный набор компонентов.

Веб-строительство -> Bootstrap

Что это: frontend framework — каркас для клиентской части веб-приложения. Буквально:

  • front end — "передняя часть", то есть часть системы, с которой непосредственно работает пользователь;
  • framework — "каркас", "основа", "структурная платформа".

Почему в конце 2026-го пора переходить на Bootstrap 5

Bootstrap 4 официально достиг End of Life и больше не является поддерживаемой веткой; последняя версия — 4.6.2. Актуальная ветка — Bootstrap 5.3, сейчас 5.3.8. Bootstrap 5 отказался от обязательной зависимости от jQuery, использует современный JavaScript, значительно шире применяет CSS custom properties, получил обновлённые компоненты, utilities и сетку и ориентирован на современные браузеры. Оставаться на BS4 означает сохранять устаревшую зависимость от jQuery и постепенно накапливать проблемы совместимости и технический долг; переход сейчас дешевле, чем поддерживать BS4 ещё несколько лет и затем мигрировать сразу через несколько поколений фронтенда.

Ключевые отличия между Bootstrap 4 и Bootstrap 5 можно посмотреть в таблице.

BS сегодня надо держать у себя, а не в CDN

Сегодня публичный CDN — это уже не нейтрально доступная для всех точка доставки. Один и тот же внешний домен может нормально открываться в одной стране и частично или полностью блокироваться в другой; доступ может зависеть от DNS-фильтрации, региональных ограничений, корпоративных сетевых политик, санкционных режимов, маршрутизации и решений конкретных операторов.

Если Bootstrap лежит на стороннем CDN, отказ доступа к этому домену может сломать оформление или интерактивные элементы сайта, хотя сам сайт при этом доступен. При локальном хранении CSS и JavaScript загружаются с того же домена, что и страница, поэтому сайт меньше зависит от того, на какие отдельные внешние сервисы пользователь вообще может выйти из своей части Интернета.

Кроме того, для bootstrap.min.css и bootstrap.bundle.min.js выигрыш от публичной CDN невелик: браузеру приходится отдельно выполнять DNS-разрешение и устанавливать TLS/HTTP-соединение с чужим доменом, а современное разделение HTTP-кэша по сайтам существенно уменьшило старое преимущество "Bootstrap уже закэширован после другого сайта".

Локальные файлы загружаются через уже установленное соединение с вашим сервером и полностью контролируются вами, не зависят от доступности других ресурсов. При HTTP/2 или HTTP/3, нормальном кэшировании и Brotli/Gzip для двух небольших статических файлов собственный хостинг обычно является более предсказуемой архитектурой. Bootstrap при этом официально допускает как CDN, так и локальную установку — это именно архитектурный выбор, а не требование самого Bootstrap.

Переходим в корневой каталог сайта и создаем необходимые папки: cd /home/example/public_html
mkdir -p bootstrap/5.3.8/css bootstrap/5.3.8/js

Находясь в этом же каталоге скачиваем необходимые файлы: curl -fL https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css -o bootstrap/5.3.8/css/bootstrap.min.css
curl -fL https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js -o bootstrap/5.3.8/js/bootstrap.bundle.min.jsЭто официальные скомпилированные файлы Bootstrap 5.3.8. Bootstrap отдельно распространяет готовые CSS/JS и исходники; для обычного сайта нужны именно готовые файлы.

Объяснение ключей curl:

  • -f = --fail
    Если сервер вернет HTTP-ошибку вроде 404 или 500, curl завершится с ошибкой и не будет считать ответ успешной загрузкой.
  • -L = --location
    Следовать HTTP-перенаправлениям (301, 302, 307, 308). Если jsDelivr перенаправит запрос на другой адрес, curl пойдет туда автоматически.
  • -o = --output
    Записать результат в указанный файл.

Файлы загружены, теперь их надо подключить на страницах сайта.

Подключаем файл с CSS внутри тега <head>: <link rel="stylesheet" href="/bootstrap/5.3.8/css/bootstrap.min.css">

Подключаем файл JS перед закрывающим тегом </body>: <script src="/bootstrap/5.3.8/js/bootstrap.bundle.min.js">

Теперь Bootstrap будет загружаться с вашего сайта без использования CDN.

Метки: bootstrap

Опрос

Адаптирован ли ваш сайт для смартфонов и планшетов? (голосов: 35)

  • Да - 4 (11%)
  • Нет - 2 (6%)
  • Не знаю - 1 (3%)
  • Нет сайта - 28 (80%)