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 к сайту

Минимальный набор инструментов для разработки на 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, чтобы получить скомпилированный исходный код CSS и JavaScript или включите его в свои любимые менеджеры пакетов, такие как npm, Bower, RubyGems или другие.

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

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

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

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

Сюда не входит документация, исходники или сторонние JavaScript-«зависимости», такие как Popper.

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

Скомпилируйте Bootstrap с Вашим собственным конвейером ресурсов, загрузив наши исходные файлы Sass, JavaScript и документации. Этот вариант требует дополнительных инструментов:

• Компилятор Sass для компиляции исходных файлов Sass в файлы CSS.
• Автопрефиксатор для создания своих нестандартных CSS.

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

Примеры

Если вам интересны наши примеры, то вы можете скачать их одним архивом:

CDN через jsDelivr

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

link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">script> 

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

script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous">script> script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous">script> 

Менеджеры пакетов

Загрузите исходные файлы Bootstrap в любой проект с помощью популярных менеджеров пакетов. Независимо от менеджера пакетов, Bootstrap потребуется компилятор Sass (препроцессор) и Autoprefixer (постпроцессор) для правильной установки наших скомпилированных версий.

npm

Установите Bootstrap в приложения на базе Node.js с помощью пакета npm:

npm install bootstrap

const bootstrap = require(‘bootstrap’) или import bootstrap from ‘bootstrap’ загрузит все плагины Bootstrap в объект начальной загрузки. Сам bootstrap модуль начальной загрузки экспортирует все наши плагины. Вы можете вручную загрузить плагины Bootstrap по отдельности, загрузив файлы /js/dist/*.js в корневую папку пакета.

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

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

yarn

Установите Bootstrap в свои приложения на Node.js с пакетом yarn:

yarn add bootstrap

RubyGems

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

gem 'bootstrap', '~> 5.0.2' 

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

gem install bootstrap -v 5.0.2 

Composer

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

composer require twbs/bootstrap:5.0.2

NuGet

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

Install-Package bootstrap 

Install-Package bootstrap.sass