Вы здесь: Главная » Bootstrap » Bootstrap 4. Начало работы. Шаблон

Bootstrap 4. Начало работы. Шаблон

Фреймворк Bootstrap получил очень широкое распространение благодаря массе факторов, главным из которых являлось использование классов для быстрого построения адаптивной сетки, основанной на 12 столбцах. Также Bootstrap предоставляет в своем составе набор плагинов jQuery, позволяющий простым добавлением кода вставить такие интерактивные элементы, как карусель (или слайдер), вплывающие подсказки, модальные окна и др.

Огромное количество сайтов было сделано на основе версии 3, последней из которых является Bootstrap 3.3.7 (перейти на официальный сайт). Более года разрабатывался Bootstrap 4, который был доступен для скачивания в alpha-версии. На данный момент  можно использовать версию 4.1.1 Bootstrap-4. Лучше всего скачивать его с официального сайта, хотя вы можете это сделать и на русскоязычном сайте, если с английским пока беда.

Загрузка и подключение файлов Bootstrap 4

Bootstrap 4 доступен для скачивания в скомпилированном виде, т.е. файлы, которые вы получите после распаковки архива будут в формате css и js, причем они будут размещены в соответствующих папках css и js.

Можно также скачать исходные файлы, которые подойдут для разработчиков, знакомых с SASS (SCSS). Этот вариант лучше подходит для тех, кто будет менять значение переменных для создания собственных параметров сетки, цветов, отступов или шрифтов. Если вы пока не разбираетесь в принципах SASS, имеет смысл подключать стандартную версию Bootstrap 4 и переопределять некоторые правила в собственном стилевом файле. Также можно будет подключать различные темы Bootstrap.

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

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

Для тех, кто использует npm или  другие системы управления пакетами (например, Composer), существует ряд вариантов загрузок через пакетные менеджеры, представленные на официальном сайте или его русскоязычной версии.

Содержимое архива с Bootstrap 4

Внутри папки css вы найдете ряд файлов, внутреннее содержимое которых состоит из разных составляющих. Точнее - в папках css и js будут представлены следующие файлы:

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

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

Если вам нужна только сетка Bootstrap 4, имеет смысл подключать только файл bootstrap-grid.min.css.

Карты исходного кода CSS (bootstrap.*.map) доступны для использования лишь с определенными инструментами разработчика в браузере. Для их использования необходимо знание работы препроцессоров.

Файлы в папке js имеют также разное содержимое. Для использования файла bootstrap.min.js необходимо подключить jQuery и Popper, а файлы bootstrap.bundle.js и минимизированный bootstrap.bundle.min.js уже включают Popper, но не jQuery.

В таблице ниже представлен список включенных в различные css-файлы компонентов:

CSS файлы Разметка Содержание Компоненты Утилиты
bootstrap.css
bootstrap.min.css
Включены Включены Включены Включены
bootstrap-grid.css
bootstrap-grid.min.css
Только Система сеток Не включены Не включены Только flex утилиты
bootstrap-reboot.css
bootstrap-reboot.min.css
Не включены Только Reboot Не включены Не включены

Следующая таблица содержит список включенных js-компонентов:

JS-файлы Popper jQuery
bootstrap.bundle.js
bootstrap.bundle.min.js
Включены Не включены
bootstrap.js
bootstrap.min.js
Не включены Не включены

Поддержка Bootstrap 4

4-ая версия Bootstrap построена, в основном, на использовании технологии Flexbox, которая на данный момент поддерживается большинством современных браузеров, в том числе и Internet Explorer версий 10-11 / Microsoft Edge. Для поддержки младших версий IE необходимо использовать Botstrap 3. Существует ряд нюансов, связанный с нормальным отображением ряда элементов в мобильных браузерах на платформах iOS и Android, которые необходимо рассмотреть в документации BS4.

Шаблон страницы Bootstrap 4

При верстке страницы на основе Bootstrap 4 следует указывать Doctype стандарта HTML5 и meta-тег veiwport, чтобы страницы адаптировались к разрешениям экрана на различных устройствах. Также в нижней части страницы необходимо подключить jQuery и Popper, и уже после них bootstrap.js. Сделать это можно 2-мя основными способами: указав относительный путь к файлам, скачанным на ваш компьютер или используя файлы Bootstrap CDN.

Шаблон на основе Bootstrap CDN

Шаблон на основе файлов из папки скомпилированных файлов Bootstrap 4

Скачать оба варианта можно по ссылке.

Использование Reboot

Reboot - это комплекс css-стилей, не использующий классов, а основанный на стилизации элементов для единого их отображения в различных браузерах. Он основан на  normalize.css,  который уже давно используется для унификации стилей основных элементов. Reboot также переводит все единицы измерения в remвместо em, устанавливает значение свойства box-sizing как border-box для всех элементов, а также псевдоэлементов  :*::before и *::after.

Эти css-стили входят в bootstrap.css и минифицированный bootstrap.min.css, поэтому подключать его отдельно не нужно.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *