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

Возможностей подключения фреймворка bootstrap великое множество. Но в любом случае, необходимо посетить официальный сайт проекта bootstrap (там же представлены все возможные варианты установки). Свежая версия фрейворка bootstrap 4 находится здесь - https://getbootstrap.com/docs/4.3/getting-started/download/. Выбор способа установки фреймворка зависит от вашего желания, опыта или конкретной ситуации.

Вариант 1 (Compiled CSS and JS). Первая ссылка (кнопка Download) содержит готовые к использованию файлы CSS и JavaScript. Это полная сборка, которую удобно использовать для изучения фреймворка, поскольку она содержит полный набор инструментов. Она также годится для использования в проектах, дизайн которых выполнен в стилях заложенных авторами бутсрапа по умолчанию.

Вариант 2 (Source files). Вторая ссылка (кнопка Download source) ведет на исходники файлов. Эта версия подойдет для разработки крупных проектов. Она позволяет изменить стили, цветовую гамму компонентов, выполнить их настройку, но все это достаточно трудозатратно. Перед тем как использовать исходные файлы, их необходимо скомпилировать и минимизировать. Данный процесс можно автоматизировать с помощью Gulp.

Вариант 3 (Bootstrap CDN). Воспользоваться кэшированной версией Bootstrap. На мой взгляд, это самый простой и прагматичный способ (не требуется даже скачивание проекта). Кроме своей простоты он "облегчает" страницы и ускоряет загрузку, поскольку в его основе используется принцип CDN (что такое CDN можно почитать здесь - https://ru.wikipedia.org/wiki/Content_Delivery_Network). При этом, для изменения заложенных разработчиками стилей, можно подключить свой пользовательский CSS

Вариант 4 (Package managers). Воспользоваться одной из систем установки пакетов. Создатели фрейворка bootstrap предлагаю воспользоваться: npm, RubyGems, Composer или NuGet. Все варианты загрузок подробно описаны на странице.

Результатом любого варианта установки будет создание и подключение CSS и JS файлов, которые входят в состав фрейморка. В случае же использование CDN достаточно просто подключить уже готовые файлы CDN (скачивать при этом Bootstrap в проект не нужно).

Кроме самих файлов бутсрап, с большой долей вероятности, вам понадобятся дополнительные инструменты, такие как jQuery, Popper. Их также можно подключить с помощью CDN.

Делается это следующим образом:


<!DOCTYPE html>
<html lang="ru">
<head>

<!-- Не забываем  title, description, кодировка, viewport, icon и т.п.-->

<!-- Подключаем Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
<!-- При необходимости подключаем пользовательский CSS -->    

</head>
<body>

<!-- Здесь находится ваш контент -->
    
<!-- Подключаем jQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<!-- Подключаем плагин Popper -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    
<!-- Подключаем Bootstrap JS -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>
</html>

Подключаем и наслаждаемся прекрасным фрейворком bootstrap