18.07.2026

8

Bootstrap как подключить

Установка Bootstrap — Bootstrap 5: Основы верстки

Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.

Подключение с помощью CDN

Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.

CDN — сокращение от Content Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.

Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:

  lang="ru">  charset="UTF-8">  name="viewport" content="width=device-width, initial-scale=1.0"> Подключение Bootstrap  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">

В процессе прохождения курса будет описано, какие именно компоненты требуют наличие JavaScript. Если не использовать такие компоненты, то возможно не подключать скрипты к странице, что положительно скажется на скорости загрузки сайта. Этот критерий очень важен при разработке. На него также ориентируются алгоритмы ранжирования сайта в поисковых системах.

Локальное подключение CSS

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

Скачать все необходимые файлы можно на официальной странице Bootstrap или через репозиторий GitHub . В случае с репозиторием нас интересует директория dist.

Внутри директории dist находится следующая структура CSS файлов:

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.min.css │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.min.css │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.min.css │ ├── bootstrap.css │ └── bootstrap.min.css

В директории css находится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.

  • bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.
  • bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делает reset.css, а устанавливает стандартные Bootstrap стили для всех элементов.
  • bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.
  • bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.

Создадим проект, в котором используется только сетка и утилиты бутстрапа:

  lang="ru">  charset="UTF-8">  name="viewport" content="width=device-width, initial-scale=1.0"> Подключение Bootstrap  rel="stylesheet" href="bootstrap/css/bootstrap-grid.min.css">  rel="stylesheet" href="bootstrap/css/bootstrap-utilities.min.css">

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Загрузка

Загрузите Bootstrap, чтобы получить скомпилированный CSS и JavaScript исходный код или включите его с вашими любимыми менеджерами пакетов, такими как npm, Bower, RubyGems и другие.

Компилированные CSS и JS

Загружайте компилированный, готовый к использованию код Bootstrap v4.0.0 (для легкого внедрения в ваш проект), включающие:

  • Компилированные и «облегченные» бандлы (Смотрите Сравнение файлов CSS)
  • Компилированные и «облегченные» плагины JS.

Сюда не входит документация, исходники или сторонние JS-«зависимости» Зависимости передаются (внедряются) сервису в момент его создания (jQuery или Popper.js). Зависимости передаются (внедряются) сервису в момент его создания.

Исходные файлы

Компилируйте Bootstrap со своим «файлопроводом», загружая наши исходники Sass, JS и файлы документации. Это потребует некоторого дополнительного инструментария:

  • Компилятор Sass (поддерживаются: Libsass или Ruby Sass) для компиляции ваших CSS.
  • Постпроцессоры для создания своих нестандартных свойств CSS. (-webkit-, -moz-, -o-, и т.д.)

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

Bootstrap CDN

Пользуйтесь кэшированной версией Bootstrap для «облегчения» страницы и ускорения загрузки.

 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">

Если вы пользуетесь нашим компилированным JS, не забудьте подключить наши CDN версии jQuery и Popper.js перед вашими JS-файлами.

 src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">

Системы управления пакетами (Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — всё это заменяется парой команд в терминале)

Используйте исходники Bootstrap в любом проекте с помощью популярных систем управления пакетами. С любой системой управления пакетами Bootstrap потребует компилятор Sass (препроцессор) и постпроцессор для правильной установки наших компилированных версий.

npm

Устанавливайте Bootstrap в вашем приложении на движке Node с помощью пакета npm:

npm install bootstrap

require(‘bootstrap’) ) загрузит все плагины JS Bootstrap в объект jQuery. Модуль bootstrap сам не экспортирует ничего. Вы можете вручную загрузить плагины JS Bootstrap, загружая файлы /js/*.js в корневую папку пакета.

пакет.json Bootstrap содержит некоторые дополнительные метаданные со следующими ключами:

  • sass — путь к главным исходникам Sass Bootstrap
  • style — путь к полной версии CSS Bootstrap, которая предварительно откомпилирована с помощью установок по умолчанию (без настройки)

RubyGems

Устанавливайте Bootstrap в ваши приложения на Ruby с помощью Bundler (рекомендовано) и системы управления пакетами «RubyGems», просто добавив следующую строку в ваш Gemfile :

gem 'bootstrap', '~> 4.0.0'

Еще один способ – если вы не используете Bundler, вы можете установить gem-файл такой командой:

gem install bootstrap -v 4.0.0

Composer

Вы также можете устанавливать и управлять Sass и JS в Bootstrap c помощью пакетного менеджера уровня приложений для языка программирования PHP:

composer require twbs/bootstrap:4.0.0

NuGet

Если вы занимаетесь разработкой в .NET, вы также можете устанавливать и управлять базами CSS, Sass и JS в вашем Bootstrap с помощью NuGet:

Install-Package bootstrap
Install-Package bootstrap.sass

Bootstrap как подключить

Бутстрап — это бесплатный фреймворк с набором готовых CSS стилей, HTML и JS примеров кода, для быстрой и красивой верстки адаптивных дизайнов под мобильные устройства и десктоп устройства.

Все это собрано в одну компактную библиотеку и используются разработчиками и компаниями, занимающимися разработкой дизайнов красивых сайтов и мобильных приложений.

Как подключить (Quick start)

Для того чтобы использовать bootstrap на сайте, он должен быть правильно внедрен в html-код сайта. Для этого файл CSS bootstrap 5 должен быть помещен в head> /head> части вашего проекта.

Javascript файл можно подключить как между тегами head так и внутри body . Мы рассмотрим примеры подключения дальше.

Где взять файлы для подключения

Можно использовать любой из следующих трех вариантов.:

  1. Загрузите исходные файлы со страницы загрузок.
  2. Используйте менеджер пакетов для получения полного пакета.
  3. Используйте бесплатную CDN от jsDelivr. На их серверах содержаться уже готовые файлы, пригодные для использования на сайте.

CDN-ссылки

Используйте данный ссылки для получения скомпилированных и минимизированных файлов.

Версия: 5.2.1

Подключение CSS файла стилей

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

Прежде чем начать, создайте файл index.html в корне вашего проекта с примерно таким содержимым.

Копировать

     Bootstrap 5 демонстрационная страница  
Привет мир!

Это будет базовый макет html страницы демо-сайта. Запустите этот файл в браузере.

Обратим ваше внимание, что в шаблоне присутствует тег meta name=»viewport»> необходимый для правильного реагирования на мобильных устройствах.

Чтобы подключить css стили к вашему сайту, необходимо подключить файл таблицы стилей через тег link> в head> части вашей html страницы. В примере мы будем использовать подключение файлов с CDN.

Копировать

     Bootstrap 5 демонстрационная страница    
Привет мир!

Для того, чтобы стили bootstrap 5 были основными, необходимо подключать файл css перед всеми другими стилями. Это исключит возможность замены совпадающих имен из других файлов и позволить правильно отобразить стили фреймворка.

Запустите еще раз файл index.html в своем браузере. Вы сможете заметить, что стиль текста поменялся. Это применились css правила подключенного вами файла bootstrap.min.css .

Подключение JS скриптов

Так как многие компоненты bootstrap используют для своей работы JavaScript, то для них требуются собственные плагины JavaScript и Popper. Посмотрите варианты подключения скриптов описанных ниже и подключите выбранный вариант в конце вашей страницы, прямо перед закрывающимся тегом /body> .

Пакетное подключение (Bundle)

Необходимые плагины и зависимости Bootstrap JavaScript могут быть подключены с помощью одного из двух пакетов: bootstrap.bundle.js и bootstrap.bundle.min.js , которые содержат всплывающие подсказки и Поппер для отображения модальных окон. О том, что входит в Bootstrap, смотрите в разделе «Содержание».

Измените содержимое файла index.html на:

Копировать

     Bootstrap 5 демонстрационная страница   
Привет мир!
    
 
Закрыть

Мы добавили в пример подключение bootstrap.bundle.min.js файла из CDN и добавили код компонента «Модальное окно» для демонстрации работы js bootstrap.

Если вы не планируете использовать Dropdown, Modal или всплывающие подсказки, вы можете сэкономить несколько килобайт, не включая Popper.

Для этого подключите файл JS: bootstrap.min.js вместо bootstrap.bundle.min.js .

Ручное подключение скриптов

Если вы решите подключать скрипты отдельно, не используя файл bundle .

Сначала подключите скрипт Popper (если вы используете всплывающие подсказки или всплывающие окна), а затем плагины JavaScript bootstrap.min.js .

Копировать

     Bootstrap 5 демонстрационная страница   
Привет мир!
 Тут какой то код .

Если вы не хотите использовать CDN, то вы можете скачать файлы к себе в проект и подключить их напрямую со своего сайта. Создайте папку /bootstrap в корне проекта и поместите туда файлы bootstrap.min.css и bootstrap.bundle.min.js

Теперь подключение будет выглядеть так:

Копировать

     Bootstrap 5 демонстрационная страница   
Привет мир!
 Тут какой то код .
Компоненты бутстрап

Некоторые компоненты, требуют обязательного подключения собственного javascript и Poper. Ознакомьтесь со списком ниже, чтобы быть уверенным в правильности подключения.

Важные глобальные переменные

Bootstrap 5 использует некоторые важные глобальные стили и настройки, которые необходимо учитывать при его использовании.

Большинство из них посвящено кроссбраузерной нормализации стилей. Давайте посмотрим.

Тип документа HTML5 doctype

Для правильного отображения стилей и нормальной работы javaScript, bootstrap требует указания типа документа HTML5. Установите тип документа !doctype html> .

Копировать

Метатег адаптивности

Так как стратегия бутстрап изначально была как: Сначала делаем код под мобильные устройства, а уже потом масштабируем необходимое с помощью медиа-запросов CSS, то необходимо добавить метатег адаптивности окна.

Для этого в head> часть вашего html документа необходимо вставить метатег: meta name=»viewport» content=»width=device-width, initial-scale=1″>

Копировать

Свойство Box-sizing

Для упрощения настройки размеров в CSS используется глобальное box-sizing значение с content-box на border-box .

Это гарантирует, что padding не влияет на ширину конечного вычисляемого элемента, но может вызвать проблемы с некоторыми программами сторонних производителей, такими как Google Maps и система пользовательского поиска Google.

В случаях, когда вам необходимо переопределить это свойство, используйте примерно такой код:

Копировать

.selector

В приведенном выше примере, вложенные элементы, включая сгенерированный контент с помощью ::before и ::after , будут наследовать указанные box-sizing для .selector .

Настройка стилей по умолчанию (Reboot)

Для одинакового отображения элементов html в разных браузерах, бутстрап 5 использует CSS Reboot стили, обеспечивая полный сброс стилей элементов и приведения их к единому стилю в разных браузерах.

2. Подключение Bootstrap в шаблоне. Блок «container»

В данном уроке мы рассмотрим способы подключения Bootstrap и создадим первый блок — container.

Для того, что подключить Bootstrap переходим на официальный сайт и верхней части сайта, справа выбираем версию (по умолчанию выбрана последняя версия) и жмем по кнопке «Download».

Далее, на странице описания нам предлагается несколько способов подключения:

  1. скачать скомпилированные файлы css и js себе на компьютер;
  2. подключить файлы из Bootstrap CDN;
  3. скачать файлы из удаленного репозитория через npm (данный способ он более продвинутый и мы его рассматривать не будем).

Я выберу способ — подключение файлов из Bootstrap CDN, так как он наиболее прост. Копируем ссылки на основные файлы Bootstrap, а также ссылки на дополнительные библиотеки: jQuery и PopperJs. Без данных библиотек плагины бутстрап работать не будут.

Стили бутстрап подключаем в секции , а скрипты до закрывающего тега . При подключении скриптов порядок имеет значение — сначала идет библиотека jQuery, далее библиотека popperJs и затем плагины бутстрап.

      Подключаем Bootstrap и размечаем основной контейнер  .

Далее, первое что мы сделаем — создадим блок с классом контейнер.

Это основной блок и служит он для горизонтального выравнивания контента по центру страницы. Как правило, он является дочерним элементом кого-то резинового блока. Например, тег body является родительским резиновым блоком, а его дочерний элемент блок с классом .container.

Если обратится к документации контейнера, то .container помимо основного класса имеет также модификации.

Читать:
Кто такой админ в группе

Похожие записи

Как очистить кэш ssl в яндекс браузере

admin

Как включить демонстрацию экрана в телеграмме

admin

Secure vpn что это

admin