Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Bootstrap - большой фреймворк. Его можно воспринимать как дизайн-систему, как библиотеку с 12-колоночной сеткой или как набор компонентов.

2 Часто можно услышать, что Bootstrap годится только для сетки, а остальной CSS нужно писать самостоятельно. Это нормальная практика, но часто разработчики тянут в проекте не только сетку, но и стили всех компонентов фреймворка с помощью простого подключения через CDN. А это увеличивает размер скаченных файлов пользователем до нескольких сотен килобайт.

3 В этом уроке узнаем, как подключать только нужные части Bootstrap, и какие файлы являются обязательными. Рассмотрим это на примере использования сетки.

4 Легко узнать, какие файлы и в какой последовательности подключаются внутри Bootstrap. Для этого достаточно открыть главный файлпуть-к-пакету-bootstrap/scss/bootstrap.scss:

5 Файл разбит на четыре секции:

6 <ul><li>Configuration - здесь находятся SCSS-файлы с настройками всего Bootstrap: миксины, функции, переменные. Из этих файлов впоследствии берутся все настройки для компонентов</li>

7 <li>Layout & components - базовая секция со всеми компонентами и стилями страницы. Здесь находятся часто используемые функции Bootstrap: сброс стилей, типографика и сетка</li>

8 <li>Helpers - хелперы. Это небольшое ответвление от утилит, например, clearfix, который помогает очистить поток при использовании свойства float</li>

9 <li>Utilities - утилиты Bootstrap. Секция подключает файл с Utility API, который мы изучали в уроке про создание пользовательских утилит</li>

10 </ul>Большинство компонентов можно просто удалять, если они не используются в проекте. Важно сохранять секцию Configuration, так как без этих файлов не смогут скомпилироваться остальные файлы.

11 Помимо основного файла подключения разработчики Bootstrap оставили еще несколько файлов, которые подключают определенные части проекта. Рассмотрим эти файлы и подключим к проекту только сетку.

12 <h2>Как подключить в проекте только сетки</h2>

13 Есть несколько частых сценариев использования Bootstrap:

14 <ul><li>Только сетка</li>

15 <li>Только утилиты</li>

16 <li>Только сброс стандартных стилей</li>

17 <li>Использование всех частей фреймворка</li>

18 </ul>Для первых трех пунктов разработчики Bootstrap позаботились заранее, поэтому в директорииscss/находятся три файла:

19 <ul><li>scss/bootstrap-reboot.scss- для подключения сброса стандартных стилей браузера. Аналог проектаnormalize.css</li>

20 <li>scss/bootstrap-grid.scss- для подключения сетки Bootstrap. В этом случае мы получим знакомые классы container, col-*, row</li>

21 <li>scss/bootstrap-utilities.scss- для подключения всех утилит Bootstrap. В этом случае не будет подключена сетка и компоненты, но мы сможем пользоваться всеми утилитами и генерировать новые</li>

22 </ul>Если нужно что-то из перечисленного, то можно подключить один из этих файлов и скомпилировать проект. Это обеспечит экономию места для пользователя.

23 Сравним вес CSS всего Bootstrap и отдельного подключения сетки:

24 <ul><li>Весь Bootstrap: 265Кб</li>

25 <li>Сгенерированные стили при подключении толькоscss/bootstrap-grid.scss: 69Кб</li>

26 </ul>Разница почти в четыре раза. Если сжать и минифицировать CSS, то разница станет еще больше. При этом мы получаем полноценный функционал по построению сеток, в том числе утилиты margin, padding, gap, display.

27 Все подключаемые утилиты можно найти в переменной $utilities:

28 Если эти переменные не нужны, то можно скопировать все подключения из файлаscss/bootstrap-grid.scssи удалить подключение утилит. При этом не стоит удалять их из основного файла, так как так мы "сломаем" будущие обновления пакета в проекте.

29 <h2>Выводы</h2>

30 Если комбинировать различные подключения, можно оставить только те части фреймворка, которые нужны в проекте. Это уменьшит размер итогового CSS-файла, и нам не придется "тянуть в проекте" те части, которые никогда не будут использованы.

31 Чтобы посмотреть порядок загрузки файлов во фреймворке, можно открыть файлscss/bootstrap.scss. Если скопировать его в свой проект, то можно удалять или добавлять компоненты, утилиты, миксины.

32 Для распространенных схем подключения разработчиками Bootstrap создали отдельные файлы:

33 <ul><li>scss/bootstrap-reboot.scss- подключение сброса стандартных стилей браузера</li>

34 <li>scss/bootstrap-grid.scss- подключение сетки Bootstrap</li>

35 <li>scss/bootstrap-utilities.scss- подключение всех утилит Bootstrap</li>

36 </ul>