1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>В базовом курсе Bootstrap рассматривалась установка фреймворка с помощью простого подключения готового CSS-файла.</p>
1
<p>В базовом курсе Bootstrap рассматривалась установка фреймворка с помощью простого подключения готового CSS-файла.</p>
2
<p>Такой способ позволяет использовать возможности бутстрап как библиотеки:</p>
2
<p>Такой способ позволяет использовать возможности бутстрап как библиотеки:</p>
3
<ul><li>Добавление компонентов</li>
3
<ul><li>Добавление компонентов</li>
4
<li>Утилиты</li>
4
<li>Утилиты</li>
5
<li>Готовые базовые стили для страницы</li>
5
<li>Готовые базовые стили для страницы</li>
6
</ul><p>При создании небольшого проекта, например, личной страницы, этих возможностей будет достаточно. Также Bootstrap подойдет, если вас устраивает дизайн-система и набор стандартных компонентов.</p>
6
</ul><p>При создании небольшого проекта, например, личной страницы, этих возможностей будет достаточно. Также Bootstrap подойдет, если вас устраивает дизайн-система и набор стандартных компонентов.</p>
7
<p>Если же задача состоит в создании нового дизайна в рамках системы Bootstrap, то необходимо использовать не готовый CSS-файл, а файлы препроцессора SASS.</p>
7
<p>Если же задача состоит в создании нового дизайна в рамках системы Bootstrap, то необходимо использовать не готовый CSS-файл, а файлы препроцессора SASS.</p>
8
<p>В этом уроке мы узнаем, как добавить бутстрап в виде npm-пакета и подключить его к проекту.</p>
8
<p>В этом уроке мы узнаем, как добавить бутстрап в виде npm-пакета и подключить его к проекту.</p>
9
<p>Чтобы получить доступ к SASS-файлам, нужно установить проект в виде npm-зависимости. Для этого создайте директорию под проект и выполните команду npm install bootstrap. Предварительно инициализируйте npm-проект командой npm init:</p>
9
<p>Чтобы получить доступ к SASS-файлам, нужно установить проект в виде npm-зависимости. Для этого создайте директорию под проект и выполните команду npm install bootstrap. Предварительно инициализируйте npm-проект командой npm init:</p>
10
<h3>Инициализация проекта</h3>
10
<h3>Инициализация проекта</h3>
11
<h3>Установка Bootstrap</h3>
11
<h3>Установка Bootstrap</h3>
12
<p>Для удобной работы с Bootstrap в вашей системе должен быть установлен препроцессор SASS и любой удобный сборщик. В качестве сборщика в этом курсе будет использован Gulp. Главное - быстро конвертировать SASS в CSS.</p>
12
<p>Для удобной работы с Bootstrap в вашей системе должен быть установлен препроцессор SASS и любой удобный сборщик. В качестве сборщика в этом курсе будет использован Gulp. Главное - быстро конвертировать SASS в CSS.</p>
13
<h2>Подключаем Bootstrap</h2>
13
<h2>Подключаем Bootstrap</h2>
14
<p>В ближайших уроках мы будем подключать Bootstrap полностью, но это не обязательно. В уроке про оптимизацию проекта мы научимся подключать только те компоненты и части бутстрап, которые нужны в нашем проекте.</p>
14
<p>В ближайших уроках мы будем подключать Bootstrap полностью, но это не обязательно. В уроке про оптимизацию проекта мы научимся подключать только те компоненты и части бутстрап, которые нужны в нашем проекте.</p>
15
<p>После установки пакета главный файл SASS будет располагаться по пути<em>директория-вашего-проекта/node_modules/bootstrap/scss/bootstrap.scss</em>. Вот возможная структура проекта:</p>
15
<p>После установки пакета главный файл SASS будет располагаться по пути<em>директория-вашего-проекта/node_modules/bootstrap/scss/bootstrap.scss</em>. Вот возможная структура проекта:</p>
16
<p>В этой структуре файл SASS находится внутри директории<em>app/scss</em>, значит, подключение будет выглядеть так:</p>
16
<p>В этой структуре файл SASS находится внутри директории<em>app/scss</em>, значит, подключение будет выглядеть так:</p>
17
<p>После сборки проекта все стили будут переведены в обычный CSS. Для сборки используем Gulp с такой конфигурацией:</p>
17
<p>После сборки проекта все стили будут переведены в обычный CSS. Для сборки используем Gulp с такой конфигурацией:</p>
18
<p>Вы можете скопировать структуру из урока, установить нужные пакеты и использовать приведенный Gulp-файл.</p>
18
<p>Вы можете скопировать структуру из урока, установить нужные пакеты и использовать приведенный Gulp-файл.</p>
19
<h2>Выводы</h2>
19
<h2>Выводы</h2>
20
-
<p>Если в проекте используется Bootstrap с собственным дизайном, то вместо исправления CSS-файла стоит подклю��ить фреймворк с помощью npm. Для этого используется команда npm install bootstrap, которая установит последнюю версию бутстрапа.</p>
20
+
<p>Если в проекте используется Bootstrap с собственным дизайном, то вместо исправления CSS-файла стоит подключить фреймворк с помощью npm. Для этого используется команда npm install bootstrap, которая установит последнюю версию бутстрапа.</p>
21
<p>Для подключения всего бутстрап достаточно подключить основной файл<em>bootstrap.scss</em>, который находится по пути<em>node_modules/bootstrap/scss/</em>.</p>
21
<p>Для подключения всего бутстрап достаточно подключить основной файл<em>bootstrap.scss</em>, который находится по пути<em>node_modules/bootstrap/scss/</em>.</p>
22
<p>Чтобы комфортно работать с бутстрап, необходимо иметь установленный препроцессор SASS, который сможет компилировать файлы препроцессора в CSS. Полезным будет использование сборщика проектов или таск-менеджера, например, Gulp.</p>
22
<p>Чтобы комфортно работать с бутстрап, необходимо иметь установленный препроцессор SASS, который сможет компилировать файлы препроцессора в CSS. Полезным будет использование сборщика проектов или таск-менеджера, например, Gulp.</p>
23
<p>В рамках обучения на Хекслете есть курсы по SASS и Gulp. Ссылки на курсы будут в конце этого урока.</p>
23
<p>В рамках обучения на Хекслете есть курсы по SASS и Gulp. Ссылки на курсы будут в конце этого урока.</p>