Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Театр начинается с вешалки, а использование Bootstrap начинается с подключения к странице. Подключение происходит одним из нескольких доступных способов: от подключения готовых файлов CSS и JS до использования SASS препроцессора с возможностью подключения нужных компонентов.

2 <h2>Подключение с помощью CDN</h2>

3 Перед тем, как изучить подключение через CDN стоит разобраться с тем, что такое CDN.

4 CDN- сокращение отContent Delivery Network. Чаще всего система CDN представляет собой несколько серверов в разных странах мира. Они хранят в себе файлы, которые можно подключить к проекту. В зависимости от того, где находится пользователь, отдается файл с того сервера, который обеспечит минимальную задержку.

5 Для подключения Bootstrap с помощью CDN достаточно просто подключить необходимые файлы в HTML. Свежие ссылки для подключения находятся на странице документации Bootstrap. В настоящее время это выглядит следующим образом:

6 В процессе прохождения курса будет описано, какие именно компоненты требуют наличие JavaScript. Если не использовать такие компоненты, то возможно не подключать скрипты к странице, что положительно скажется на скорости загрузки сайта. Этот критерий очень важен при разработке. На него также ориентируются алгоритмы ранжирования сайта в поисковых системах.

7 <h2>Локальное подключение CSS</h2>

8 Разработчики не всегда хотят доверять внешним серверам, которые они не могут контролировать. Никто не может дать гарантию того, что CDN не подведет в самый нужный момент, когда на сайт пришли инвесторы с миллиардами. Чтобы избежать такой ситуации можно расположить все файлы Bootstrap у себя в рабочей директории и подключать их локально.

9 Скачать все необходимые файлы можно на официальной странице<a>Bootstrap</a>или через<a>репозиторий GitHub</a>. В случае с репозиторием нас интересует директорияdist.

10 Внутри директорииdistнаходится следующая структура CSS файлов:

11 В директорииcssнаходится больше файлов, чем при подключении Bootstrap через CDN. При таком подходе возможно подключать только необходимые части CSS.

12 <ul><li>bootstrap-grid.css. В файле находятся все стили, отвечающие за создание сеток. Если от Bootstrap в проекте необходима только сетка, то данного файла достаточно. В этом случае нет необходимости подключать все остальные зависимости, в том числе и JavaScript.</li>

13 <li>bootstrap-reboot.css. Файл, вопреки своему названию не сбрасывает стандартные стили браузеров, как это делаетreset.css, а устанавливает стандартные Bootstrap стили для всех элементов.</li>

14 <li>bootstrap-utilities.css. Файл содержит все атомарные классы и утилиты Bootstrap. Основные утилиты будут изучены в следующих уроках.</li>

15 <li>bootstrap.css. Компиляция всех стилей Bootstrap. Если необходимы все стили, то достаточно подключить именно этот файл. Так же файл содержит стили всех компонентов.</li>

16 </ul>Создадим проект, в котором используется только сетка и утилиты бутстрапа:

17 При подключении стилей к проекту лучше использовать минимизированные версии файлов. Они имеют дополнение в названии в виде.min. Эти файлы сжаты, что уменьшает вес стилей.