Bootstrap — большой фреймворк. Его можно воспринимать как дизайн-систему, как библиотеку с 12-колоночной сеткой или как набор компонентов.
Часто можно услышать, что Bootstrap годится только для сетки, а остальной CSS нужно писать самостоятельно. Это нормальная практика, но часто разработчики тянут в проекте не только сетку, но и стили всех компонентов фреймворка с помощью простого подключения через CDN. А это увеличивает размер скаченных файлов пользователем до нескольких сотен килобайт.
В этом уроке узнаем, как подключать только нужные части Bootstrap, и какие файлы являются обязательными. Рассмотрим это на примере использования сетки.
Что подключает Bootstrap
Легко узнать, какие файлы и в какой последовательности подключаются внутри Bootstrap. Для этого достаточно открыть главный файл путь-к-пакету-bootstrap/scss/bootstrap.scss:
// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "variables-dark";
@import "maps";
@import "mixins";
@import "utilities";
// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";
// Helpers
@import "helpers";
// Utilities
@import "utilities/api";
// scss-docs-end import-stackФайл разбит на четыре секции:
-
Configuration — здесь находятся SCSS-файлы с настройками всего Bootstrap: миксины, функции, переменные. Из этих файлов впоследствии берутся все настройки для компонентов
-
Layout & components — базовая секция со всеми компонентами и стилями страницы. Здесь находятся часто используемые функции Bootstrap: сброс стилей, типографика и сетка
-
Helpers — хелперы. Это небольшое ответвление от утилит, например,
clearfix, который помогает очистить поток при использовании свойстваfloat -
Utilities — утилиты Bootstrap. Секция подключает файл с Utility API, который мы изучали в уроке про создание пользовательских утилит
Большинство компонентов можно просто удалять, если они не используются в проекте. Важно сохранять секцию Configuration, так как без этих файлов не смогут скомпилироваться остальные файлы.
Помимо основного файла подключения разработчики Bootstrap оставили еще несколько файлов, которые подключают определенные части проекта. Рассмотрим эти файлы и подключим к проекту только сетку.
Как подключить в проекте только сетки
Есть несколько частых сценариев использования Bootstrap:
-
Только сетка
-
Только утилиты
-
Только сброс стандартных стилей
-
Использование всех частей фреймворка
Для первых трех пунктов разработчики Bootstrap позаботились заранее, поэтому в директории scss/ находятся три файла:
-
scss/bootstrap-reboot.scss — для подключения сброса стандартных стилей браузера. Аналог проекта normalize.css
-
scss/bootstrap-grid.scss — для подключения сетки Bootstrap. В этом случае мы получим знакомые классы
container,col-*,row -
scss/bootstrap-utilities.scss — для подключения всех утилит Bootstrap. В этом случае не будет подключена сетка и компоненты, но мы сможем пользоваться всеми утилитами и генерировать новые
Если нужно что-то из перечисленного, то можно подключить один из этих файлов и скомпилировать проект. Это обеспечит экономию места для пользователя.
Сравним вес CSS всего Bootstrap и отдельного подключения сетки:
-
Весь Bootstrap: 265Кб
-
Сгенерированные стили при подключении только scss/bootstrap-grid.scss: 69Кб
Разница почти в четыре раза. Если сжать и минифицировать CSS, то разница станет еще больше. При этом мы получаем полноценный функционал по построению сеток, в том числе утилиты margin, padding, gap, display.
Все подключаемые утилиты можно найти в переменной $utilities:
$utilities: map-get-multiple(
$utilities,
(
"display",
"order",
"flex",
"flex-direction",
"flex-grow",
"flex-shrink",
"flex-wrap",
"justify-content",
"align-items",
"align-content",
"align-self",
"margin",
"margin-x",
"margin-y",
"margin-top",
"margin-end",
"margin-bottom",
"margin-start",
"negative-margin",
"negative-margin-x",
"negative-margin-y",
"negative-margin-top",
"negative-margin-end",
"negative-margin-bottom",
"negative-margin-start",
"padding",
"padding-x",
"padding-y",
"padding-top",
"padding-end",
"padding-bottom",
"padding-start",
)
);Если эти переменные не нужны, то можно скопировать все подключения из файла scss/bootstrap-grid.scss и удалить подключение утилит. При этом не стоит удалять их из основного файла, так как так мы «сломаем» будущие обновления пакета в проекте.
Выводы
Если комбинировать различные подключения, можно оставить только те части фреймворка, которые нужны в проекте. Это уменьшит размер итогового CSS-файла, и нам не придется «тянуть в проекте» те части, которые никогда не будут использованы.
Чтобы посмотреть порядок загрузки файлов во фреймворке, можно открыть файл scss/bootstrap.scss. Если скопировать его в свой проект, то можно удалять или добавлять компоненты, утилиты, миксины.
Для распространенных схем подключения разработчиками Bootstrap создали отдельные файлы:
-
scss/bootstrap-reboot.scss — подключение сброса стандартных стилей браузера
-
scss/bootstrap-grid.scss — подключение сетки Bootstrap
-
scss/bootstrap-utilities.scss — подключение всех утилит Bootstrap
Самостоятельная работа
Создайте новый проект или используйте проект из предыдущих самостоятельных работ. Подключите в проект только сетку Bootstrap. Сделайте шаблон страницы, использующий сетку. Например:
doctype html
html(lang="ru")
head
meta(charset="UTF-8")
title Bootstrap Advanced
meta(name="viewport" content="width=device-width,initial-scale=1")
meta(name="description" content="")
link(rel="stylesheet" type="text/css" href="styles/main.css")
body
div.container
div.row
div.col Column 1
div.col Column 2
div.col Column 3
div.row
div.col First
div.col Second
div.col ThirdУбедитесь, что страница отображается корректно. Так же проверьте, что размер итогового файла стилей значительно меньше, чем если бы подключался весь Bootstrap.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
