Подключение фреймворка 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.65