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
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
