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

MyTetra Share

Делитесь знаниями!

Ссылка на оригинал

Время создания: 17.01.2022 18:13

Автор: alensav

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

Раздел: MyTetra - INTERNET - HTTM

Запись: alensav/MyTetra2/main/base/1642432437czm7jhkf5x/text.html на raw.githubusercontent.com

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

Александр Мальцев05.11.2021

161K

Содержание:

Минимальный набор инструментов для разработки на Bootstrap
Варианты установки Bootstrap
Подключение Bootstrap через CDN
Локальная установка Bootstrap
Комментарии

В этой статье мы разберём как скачать и подключить фреймворк Bootstrap (3, 4 и 5 версию) к сайту.

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

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

РЕКЛАМА•18+

Выделенный сервер в аренду

От 2 990 руб/мес! Надёжный дата-центр DataPro. Много конфигураций.

Узнать больше

smartape.ru

текстовый редактор для работы с кодом (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:

<!doctype html>

<head>

</head>

<body>

...

</body>

</html>

Целевая реклама для интернет-магазина строительной cферы

Попробуйте новый канал целевого трафика по строительному направлению! Тестируйте!

Узнать больше

lp.stroyportal.ru

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

<!doctype html>

<head>

</head>

<body>

...

</body>

</html>

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

<!doctype html>

<head>

</head>

<body>

...

</body>

</html>

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

<button type="button" class="btn btn-primary" data-toggle="popover" title="Сообщение" data-content="Ура, Bootstrap 4 работает">Поднеси ко мне курсор</button>

$(function () {

$('[data-toggle="popover"]').popover({trigger:'hover'});

});

</script>

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

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

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

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

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

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

v3.4.1;
v4.6.1;
v5.1.3.

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

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

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

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

Содержание архива Bootstrap v5.1.3:

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»). Он позволяет использовать этот фреймворк в качестве модуля:

import { Toast } from 'bootstrap.esm.min.js'

Array.from(document.querySelectorAll('.toast'))

.forEach(toastNode => new Toast(toastNode))

</script>

Иконочный шрифт 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.

Скачать Glyphicons (Bootstrap 3.4.1)

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

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

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

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

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

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

<!doctype html>

<head>

</head>

<body>

...

</body>

</html>

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

<!doctype html>

<head>

</head>

<body>

...

</body>

</html>

Если статья понравилась, то поделитесь ей в социальных сетях:

Так же в этом разделе:

MyTetra Share v.0.67