Bootstrap 5 как пользоваться

Уроки Bootstrap

Уроки по Bootstrap для начинающих! Новый видеокурс, в котором мы будет изучать фреймворк Bootstrap от базовых классов и до написания JavaScript скриптов. За курс вы узнаете как верстать сайты с помощью Bootstrap и какими характеристика обладаете данная технология.

Видеоурок

Полезные ссылки:

• Видеокурс по HTML ;
• Видеокурс по изучению CSS ;
• Видеокурс по изучению JavaScript ;
• Официальный сайт Bootstrap;
• CDN для Bootstrap;
• Обзор текстового редактора Atom .

Информация про Bootstrap

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

Изначально разрабатывался для популярнейшей соцсети Twitter, но его роль выходит далеко за пределы одного сервиса. Сегодня является одним из самых используемых и эффективных фреймворков CSS. Бутстрап включает и другие широко известные языки – HTML и Javascript .

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

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

Bootstrap верстка – популярный способ быстро создать веб сайт. А даптивная верстка Bootstrap – часть данной работы. Все сайты, что строятся на Бутстрап имеют продуманную структуру и являются адаптивными по умолчанию.

Почему используют Bootstrap?

Bootstrap содержит множество готовых стилей и JavaScript скриптов для создания веб сайта. Написание стилей для сайта можно значительно сократить за счёт использования уже готовых решений от Bootstrap.

Благодаря быстрой реализации стилей многие разработчики полюбили Bootstrap и используют его для разнообразных проектов.

Как работать с Bootstrap?

Принцип работы с Bootstrap прост. Вам предстоит:

• скачать или подключить Bootstrap при помощи CDN;
• выполнить верстку сайта с помощью Bootstrap, используя подготовленные стили.

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

Версии Bootstrap

На сегодняшний день существует несколько основных версий Bootstrap. Последние крупные обновления это:

• Bootstrap 3 – добавлены классы для работы со множеством HTML5 объектов;
• Bootstrap 4 – представлена возможность строить адаптивную верстку Bootstrap на основе FlexBox;
• Bootstrap 5 – улучшены и добавлены стили к HTML объектам. Уменьшен код, увеличина производительность.

План курса

За курс мы ознакомимся с фреймворком Bootstrap. Мы изучим все основные классы, что содержаться в фреймворке. Также изучим использование подготовленных JavaScript скриптов. На основе практических Bootstrap примеров верстки вы сможете построить веб сайт и изучить B ootstrap с нуля.

Наши B ootstrap уроки отлично подойдут как новичкам, так и тем, кто хочет подтянуть свои знания в разработке адаптивных веб сайтов.

К концу курса у вас будет достаточно знаний чтобы использовать Bootstrap в ваших проектах.

Простой сайт на Bootstrap

            
Привет, вы на сайте itProger 
Привет, вы на сайте itProger
 
  

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

Минимальный набор инструментов для разработки на Bootstrap

Перед подключением Bootstrap и создании на его основе дизайна сайтов и веб-приложений необходимо иметь следующий минимальный набор программ:

• текстовый редактор для работы с кодом (Visual Studio Code, Sublime Text, Atom или др.) или IDE (WebStorm, NetBeans или др.);
• браузер (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Opera или др.).

Варианты установки Bootstrap

Создание дизайна веб-проекта, в основу которого положен Bootstrap всегда начинается с его установки.

Подключить Bootstrap к сайту можно разными способами, например:

• с помощью CDN (в этом варианте помещать файлы непосредственно в проект не нужно);
• локально с настройками по умолчанию (для этого необходимо скачать дефолтную готовую сборку Bootstrap с GitHub, извлечь из неё необходимые файлы и подключить их к HTML странице);
• локально со своими настройками (для этого необходимо скачать исходные коды и программу для сборки frontend).

Какой способ выбрать зависит конечно от вашей конкретной задачи, знаний и опыта.

Сборка из исходных кодов

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

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

При этом загрузить исходные файлы Bootstrap можно как вручную с GitHub, так и с помощью пакетного менеджера (npm, yarn, RubyGems, Composer или NuGet).

Для загрузки исходных кодов Bootstrap с помощью npm нужно ввести следующую команду в консоль:

npm install bootstrap

Подробная инструкция по сборке проекта из исходных кодов Bootstrap v4 с помощью Gulp приведена на этой странице.

Подключение Bootstrap через CDN

Подключение через CDN — это самый простой вариант установки Bootstrap. Здесь скачивать ничего не нужно. Необходимо лишь вставить в HTML ссылки на файлы, размещенные на CDN серверах.

Подключение Bootstrap 5:

Пример подключения Bootstrap 4 с помощью CDN:

Подключение Bootstrap 3 к странице:

Для проверки работоспособности фреймворка , создадим кнопку, при поднесении к которой будет показываться всплывающая подсказка popover.

Поднеси ко мне курсор   

Скачать пример

Локальная установка Bootstrap

Для локальной установки Bootstrap (с настройками по умолчанию) необходимо:

1. скачать готовую сборку с GitHub;
2. распаковать полученный архив и скопировать из него минимизированные версии файлов («bootstrap.min.css» и «bootstrap.bundle.min.js») в свой проект;
3. подключить эти файлы к HTML странице.

1. Скачивание готовой сборки Bootstrap

Скачать дефолтную готовую к использованию сборку Bootstrap можно по следующим ссылкам (загрузка осуществляется с GitHub):

Эти сборки содержат скомпилированные и готовые к использованию файлы CSS и JavaScript.

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

2. Распаковка загруженного архива

После скачивания архива его необходимо распаковать.

bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/ ├── bootstrap.bundle.js ├── bootstrap.bundle.js.map ├── bootstrap.bundle.min.js ├── bootstrap.bundle.min.js.map ├── bootstrap.esm.js ├── bootstrap.esm.js.map ├── bootstrap.esm.min.js ├── bootstrap.esm.min.js.map ├── bootstrap.js ├── bootstrap.js.map ├── bootstrap.min.js └── bootstrap.min.js.map

В каталоге css находятся стили фреймворка Bootstrap, а в js – плагины необходимые для работы различных компонентов.

Плагины начиная с Bootstrap 5 написаны без использования библиотеки jQuery. Если вы используете фреймворк Bootstrap v3 или v4, то для работы его JavaScript файла необходима библиотека jQuery. Её нужно подключить перед Bootstrap JS.

В большинстве случаев из архива нам нужны только эти 2 файла: «bootstrap.min.css» и «bootstrap.bundle.min.js»

Зачем другие файлы?

Минимизированные файлы

Как вы можете заметить, в архиве есть 2 версии CSS и JavaScript файлов, с суффиксом min и без него. Версия файла с min ничем ни отличается от без min, она просто минимизирована (сжата).

В продакшене (на рабочем сайте) лучше использовать минимизированные версии файлов. Эти файлы имеют меньший размер, и, следовательно, обеспечивают более быструю загрузку страниц сайта.

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

CSS файлы Bootstrap

Файлы «bootstrap.css», «bootstrap.rtl.css» и их минимизированные версии – это полные версии. Они включают в себя все стили фреймворка.

Остальные используются, когда вы хотите использовать не целый CSS фреймворк, а только какую-то его часть:

• bootstrap-grid.* – сетка;
• bootstrap-utilities.* – утилиты;
• bootstrap-reboot.* – набор стилей для исправления различий дефолтных стилей браузеров (предназначен для облегчения кроссбраузерной вёрстки).

JavaScript файлы Bootstrap

«bootstrap.bundle.min.js» – это версия, которая включает в себя «bootstrap.min.js» и библиотеку «popper.min.js».

«bootstrap.min.js» – это версия без библиотеки «popper.min.js», от которой он зависит.

В случае использования «bootstrap.min.js» необходимо «popper.min.js» подключить самостоятельно:

Поддержка RTL-языков в Bootstrap

Файлы, содержащие rtl предназначены для разработки сайтов, заточенных под RTL-языки, т.е. языки, которые пишутся и читаются справа налево.

Исходные карты файлов в Bootstrap

Файлы с map – это исходные карты, содержащие данные в JSON формате, которые нужны для связывания css и js файлов с их исходными файлами. Они используются для того, чтобы можно было вживую выполнять отладку исходных файлов прямо в веб-браузере.

Использования Bootstrap 5 в качестве модуля

В Bootstrap 5 добавлен скрипт, построенный как ESM («bootstrap.esm.js» и «bootstrap.esm.min.js»). Он позволяет использовать этот фреймворк в качестве модуля:

JavaScript

Иконочный шрифт Glyphicons в Bootstrap

В Bootstrap 3, кроме CSS и JavaScript файлов, содержится ещё иконочный шрифт «Glyphicons». Шрифт «Glyphicons» насчитывает более 250 иконок из набора «Glyphicon Halflings». Этот шрифт представлен в архиве посредством 4 файлов: «glyphicons-halflings-regular.eot», «glyphicons-halflings-regular.svg», «glyphicons-halflings-regular.ttf», «glyphicons-halflings-regular.woff».

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

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.

В Bootstrap v4 и v5 не содержится иконочный шрифт. Если он нужен, то его нужно подключить самостоятельно.

Например, вместо него можно использовать FontAwesome, Octicons, IcoMoon или любой другой иконочный шрифт.

Если же нужен Glyphicons, то его можно взять из архива Bootstrap 3, а стили с GitHub.

Иконки SVG с открытым исходным кодом сейчас имеются от самих разработчиков Bootstrap. Можно воспользоваться ими. Официальная страница Bootstrap Icons: https://icons.getbootstrap.com/

Если нужен шрифт, состоящий из определённого количества иконок, то можете создать свой. Как это сделать описано в этой статье.

Про иконки в формате шрифта, а также, про то какие они имеют достоинства и недостатки, можно почитать в этой статье.

Отличия содержимого архива Bootstrap v3 и v4

Архив фреймворка Bootstrap v4 от v3 отличается тем, что:

• не включает иконочный шрифт «Glyphicons»:
• содержит файлы «bootstrap-grid.css» и «bootstrap-reboot.css» .

Данные файлы необходимы только тем, кому нужен не целый фреймворк, а только его часть.

Первый файл ( «bootstrap-grid.css» ) содержит сетку Bootstrap, а второй ( bootstrap-reboot.css ) — нормализатор, который устанавливает базовые стили, для того чтобы они у всех HTML-элементов во всех браузерах были одинаковыми.

3. Копирование файлов в проект и подключение их к странице

После распаковки загруженного архива скопируйте нужные файлы в проект.

Для Bootstrap v3 и v4 дополнительно загрузите библиотеку jQuery.

Пример локального подключения Bootstrap 4 к странице:

Пример локального подключения Bootstrap 5 к странице:

Вступление

Начните работу с Bootstrap, самой популярной в мире платформой для создания адаптивных, ориентированных на мобильные устройства сайтов, с jsDelivr и начальной страницей шаблона.

На этой странице

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте jsDelivr, бесплатный CDN с открытым исходным кодом. Используете менеджер пакетов или вам нужно скачать исходные файлы? Перейдите на страницу загрузок.

Стили

Скопируйте и вставьте таблицу стилей в Ваш перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.

link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 

Скрипты

Многие из наших компонентов требуют использования JavaScript для работы. В частности, для них требуются наши собственные плагины JavaScript и Popper. Поместите один из следующих в конце Ваших страниц, прямо перед закрывающим тегом , чтобы включить их.

Связка

Включите каждый плагин Bootstrap JavaScript и зависимости в один из двух наших пакетов. Наши bootstrap.bundle.js и bootstrap.bundle.min.js включают Popper. Для получения дополнительной информации о том, что входит в Bootstrap, см. наш раздел содержимое.

script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">script> 

Раздельно

Если Вы решите использовать отдельное решение для сценариев, сначала должен быть Popper.js (если Вы используете всплывающие подсказки или всплывающие окна), а затем наши плагины JavaScript.

script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous">script> script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous">script> 

Модули

Компоненты

Интересно, какие компоненты явно требуют нашего JavaScript и Popper? Кликните на ссылку “Показать компоненты” ниже. Если Вы совсем не уверены в общей структуре страницы, продолжайте читать, чтобы найти образец шаблона страницы.

• Alerts (Уведомления) для отклонения
• Buttons (Кнопки) для переключения состояний и функционала флажка/радио
• Carousel (Карусель) для любого поведения слайдов, элементов управления и индикаторов
• Collapse (Сворачиваемое) для переключения видимости содержимого
• Dropdowns (Выпадающие списки) для отображения и позиционирования (также требуется Popper)
• Modals (Модальные окна) для отображения, позиционирования и прокрутки
• Navbar (Панель навигации) для расширения нашего плагина Сворачиваемое для реализации адаптивного поведения
• Offcanvases (Внехолста) для отображения, позиционирования и поведения прокрутки
• Toasts (Тосты) для показа и отклонения
• Tooltips (Всплывающие подсказки) и popovers (всплывающие окна) для отображения и позиционирования (также требуется Popper)
• Scrollspy (Отслеживание прокрутки) для поведения прокрутки и обновлений навигации

Стартовый шаблон

Убедитесь, что Ваши страницы настроены в соответствии с последними стандартами дизайна и разработки. Это означает использование документа HTML5 и включение метатега области просмотра для правильного реагирования. Сложите все вместе, и Ваши страницы должны выглядеть так:

 html lang="ru"> head> meta charset="utf-8"> meta name="viewport" content="width=device-width, initial-scale=1"> link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> title>Привет мир!title> head> body> h1>Привет мир!h1>  script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">script>      --> body> html> 

Чтобы узнать о следующих шагах, посетите документацию по макету или наши официальные примеры, чтобы начать макет Вашего сайта содержание и компоненты.

Глобально важно

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

Тип текущего документа

Bootstrap требует использования doctype HTML5. Без него Вы увидите несколько забавных неполных стилей, но его включение не должно вызывать каких-либо серьезных сбоев.

 html lang="ru"> . html> 

Адаптивный метатег

Bootstrap разработан mobile first (сначала мобильный), стратегия, в которой мы сначала оптимизируем код для мобильных устройств, а затем масштабируем компоненты по мере необходимости с помощью медиа-запросов CSS. Чтобы обеспечить правильный рендеринг и сенсорное масштабирование для всех устройств, добавьте метатег адаптивного окна просмотра (viewport) к Вашему .

meta name="viewport" content="width=device-width, initial-scale=1"> 

Вы можете увидеть пример этого в действии в стартовом шаблоне.

Свойство Box-sizing

Для более простого изменения размеров в CSS мы переключаем глобальное значение box-sizing с content-box на border-box . Это гарантирует, что padding не влияет на окончательную вычисленную ширину элемента, но может вызвать проблемы с некоторым сторонним программным обеспечением, таким как Google Maps и Google Custom Search Engine.

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

.selector-for-some-widget  box-sizing: content-box; > 

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

Перезагрузка

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

Сообщество

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

• Обсуждайте в чате Telegram @getbootstrap_ru.
• Читайте и подписывайтесь на Официальный блог Bootstrap.
• Присоединиться к официальной комнате Slack.
• Общайтесь с другими Bootstrappers в IRC. На сервере irc.libera.net , в канале ##bootstrap .
• Справку по реализации можно найти на сайте Stack Overflow (с тегом bootstrap-5 ).
• Разработчикам следует использовать ключевое слово bootstrap в пакетах, которые изменяют или расширяют функциональность Bootstrap при распространении через npm или аналогичные механизмы доставки для максимальной узнаваемости.

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

• Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
• Код под лицензией MIT, документация CC BY 3.0.
• Текущая версия v5.1.3.

Знакомство с Bootstrap: установка и подходящие сценарии использования

Bootstrap — бесплатный HTML/CSS/JavaScript фреймворк для быстрого создания адаптивного дизайна сайта. У разработчиков к нему неоднозначное отношение. С одной стороны, Bootstrap позволяет с минимальными знаниями создавать интерфейсы, которые работают во всех популярных браузерах и не ломаются при изменении разрешения экрана. С другой стороны, фреймворк тащит в проект кучу ненужного кода, который увеличивает вес сборки.

Что нужно знать о Bootstrap перед началом работы

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

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

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Какую версию Bootstrap выбрать?

Последняя стабильная версия — 4.5.0. Ее и стоит использовать. Сетка в ней построена на Flexbox, это достаточно распространенная технология. Сервис Can I Use показывает , что верстка на флексах поддерживается всеми современными версиями браузеров. Частичная поддержка есть в Internet Explorer 10 и 11.

В третьей версии Bootstrap сетка построена на Float. Это устаревшая технология, которая не дает такой гибкости, как Flexbox. Зато на флоатах можно верстать для старых браузеров, вплоть до Internet Explorer 6. Если вашему проекту нужна такая поддержка (вряд ли), то используйте Bootstrap 3.4.1.

В июне 2020 года появилась новость о выпуске Bootstrap 5 alpha. Когда из нее сделают стабильную версию — непонятно. Но есть несколько моментов, о которых нужно знать всем, кто работает или собирается работать с фреймворком.

• В пятой версии не будет поддержки Internet Explorer.
• Из Bootstrap пропадет библиотека jQuery, с помощью которой в предыдущих версиях реализовывалось большинство возможностей JavaScript.

Радует, что фреймворк развивается. Разработчики обещают, что в пятой версии будет более быстрый JavaScript, меньшее количество зависимостей, улучшенные API. Но пока она находится на стадии альфа-тестирования, мы будем пользоваться последней стабильной сборкой — Bootstrap 4.5.1.

Читайте также

Как установить Bootstrap

Установить Bootstrap можно несколькими способами:

• Подключить компилированные файлы c помощью BootstrapCDN.
• Скачать скомпилированные файлы CSS и JS, подключить их к проекту через ссылки и верстать. Это отличный вариант для того, чтобы познакомиться с фреймворком.
• Скачать исходные файлы. Эта сборка удобнее для верстки, потому что позволяет гибко кастомизировать компоненты. Однако она требует использования дополнительных инструментов: компилятора Sass и постпроцессоров.
• Установить исходники через npm, yarn, RubyGems, Composer, NuGet.

Мы не будем подробно рассматривать все способы — они описаны в документации Bootstrap. Вот версия на русском языке . Она обновляется немного позже официальной инструкции на английском, но порядок установки не меняется годами, так что вся информация актуальна.

Посмотрим способы подключения, которые позволяют быстро получить работающий фреймворк и приступить к изучению его особенностей.

Самый простой метод установки — подключение через BootstrapCDN. Вам не нужно скачивать файлы в проект. Просто создайте шаблон HTML и разместите внутри него ссылку на фреймворк.

Код может быть таким:

          
Привет, мир!  подключаем jQuery, Popper и Bootstrap JS, чтобы работали интерактивные компоненты -->     

Еще один простой способ установки — скачивание скомпилированных файлов. Внутри архива (его нужно распаковать) две папки: css и js.

В папке css — файлы стилей.

• bootstrap.css — стили фреймворка. Файл bootstrap.min.css — минифицированная версия.
• bootstrap-grid.css — сетка Bootstrap. Файл bootstrap-grid.min.css — минифицированная версия.
• bootstrap-reboot.css — нормализатор Bootstrap, устанавливающий базовые стили, чтобы во всех браузерах верстка смотрелась одинаково. Файл bootstrap-reboot .min. css — минифицированная версия.

В папке js — файлы для работы JavaScript.

• bootstrap.bundle.js — компилированные файлы JavaScript с Popper (плагином всплывающих подсказок). Файл bootstrap.bundle.min.js — минифицированая версия.
• bootstrap.js — компилированные файлы JavaScript без Popper. Файл bootstrap.js — минифицированая версия.

В четвертой версии Bootstrap для работы с JavaScript требуется библиотека JQuery. Она подключается перед Bootstrap JS.

Файл проекта index.html, к которому мы будем подключать Bootstrap, нужно разместить в той же директории, что и подключаемые файлы CSS и JavaScript.

Код шаблона может быть таким:

         
Привет, мир!      

Обратите внимание — я подключил не минифицированные файлы (с суффиксом min), а обычные. Так удобнее работать со стилями и скриптами. Однако на рабочем проекте нужно использовать минифицированные версии — они меньше весят и обеспечивают более быструю загрузку страницы. После редактирования стилей вам нужно самостоятельно минифицировать файл, заменив шаблонную версию.

Начинаем верстать с помощью Bootstrap

Для работы с Bootstrap нужен текстовый редактор и браузер, в котором вы будете видеть результат верстки с помощью фреймворка.

Для удобства рекомендую скачать примеры. Они помогают понять возможности фреймворка. Примеры можно использовать для верстки прототипов, особенно в ситуации, когда макет нужно было сдать еще вчера.

Допустим, я хочу быстро собрать слайдер. В примерах есть карусель. Внутри папки — два файла: index.html и carousel.css. Я открываю их в редакторе и исправляю так, как мне нужно.

Например, в моей карусели будет не три карточки, а пять. Для этого достаточно в файле index.html добавить еще два компонента.

Изначально карусель выглядит вот так.

Открываем файл index.html через любой текстовый редактор (я предпочитаю Visual Studio Code) и начинаем его править.

Находим в коде карусель. Вот она:

Добавляем в список с классом carousel-indicators два элемента с номерами 3 и 4. Они нужны для того, чтобы в карусели отображалось пять кнопок переключения между слайдами.

Далее находим блок слайда с классом carousel-item. Копируем все, что находится внутри, и вставляем в конце.

Дальше мы можем редактировать слайды так, как нравится: переписать заголовки и описания, добавить фоновое изображение или изменить цвет, настроить шрифт и отступы, изменить высоту контейнера. Все стили доступны в файле carousel.css.

Вся работа заняла пару минут. При этом компоненты имеют адаптивный дизайн. Вам не нужно настраивать даже медиа-запросы — они уже прописаны в исходных файлах Bootstrap. Такой подход позволяет значительно сэкономить время на верстку.

Конечно, редактирование шаблона — это не верстка. Но я могу взять код той же карусели и внедрить его в свой проект, к которому подключен Bootstrap. В этом главный плюс фреймворка.

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