В базовом курсе Bootstrap рассматривалась установка фреймворка с помощью простого подключения готового CSS-файла.
Такой способ позволяет использовать возможности бутстрап как библиотеки:
-
Добавление компонентов
-
Утилиты
-
Готовые базовые стили для страницы
При создании небольшого проекта, например, личной страницы, этих возможностей будет достаточно. Также Bootstrap подойдет, если вас устраивает дизайн-система и набор стандартных компонентов.
Если же задача состоит в создании нового дизайна в рамках системы Bootstrap, то необходимо использовать не готовый CSS-файл, а файлы препроцессора SASS.
В этом уроке мы узнаем, как добавить бутстрап в виде npm-пакета и подключить его к проекту.
Устанавливаем Bootstrap
Чтобы получить доступ к SASS-файлам, нужно установить проект в виде npm-зависимости. Для этого создайте директорию под проект и выполните команду npm install bootstrap. Предварительно инициализируйте npm-проект командой npm init:
Для удобной работы с Bootstrap в вашей системе должен быть установлен препроцессор SASS и любой удобный сборщик. В качестве сборщика в этом курсе будет использован Gulp. Главное — быстро конвертировать SASS в CSS.
Подключаем Bootstrap
В ближайших уроках мы будем подключать Bootstrap полностью, но это не обязательно. В уроке про оптимизацию проекта мы научимся подключать только те компоненты и части бутстрап, которые нужны в нашем проекте.
После установки пакета главный файл SASS будет располагаться по пути директория-вашего-проекта/node_modules/bootstrap/scss/bootstrap.scss. Вот возможная структура проекта:
bootstrap-project/
├── app/
│ ├── scss/
│ │ └── main.scss
| └── index.pug
├── build/
├── node_modules/
├── package-lock.json
├── package.json
└── gulpfile.jsВ этой структуре файл SASS находится внутри директории app/scss, значит, подключение будет выглядеть так:
@import "../../node_modules/bootstrap/scss/bootstrap.scss";После сборки проекта все стили будут переведены в обычный CSS. Для сборки используем Gulp с такой конфигурацией:
const { src, dest, parallel, watch } = require('gulp');
const concat = require('gulp-concat');
const sass = require('gulp-sass')(require('sass'));
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const browsersync = () => {
browserSync.init({
server: { baseDir: 'build/' },
notify: false,
online: true
});
watch('./app/**/*.js', scripts);
watch('./app/**/*.scss', sass2css);
watch('./app/**/*.pug', pug2html);
};
const scripts = () => {
return src([
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js.map',
])
.pipe(dest('./build/js/'))
.pipe(browserSync.stream())
};
const sass2css = () => {
return src([
'./app/scss/main.scss'
])
.pipe(sass())
.pipe(concat('main.css'))
.pipe(dest('./build/styles/'))
.pipe(browserSync.stream())
};
const pug2html = () => {
return src([
'./app/index.pug',
])
.pipe(pug())
.pipe(dest('./build/'))
.pipe(browserSync.stream())
};
exports.build = parallel(scripts, sass2css, pug2html);
exports.default = browsersync;Вы можете скопировать структуру из урока, установить нужные пакеты и использовать приведенный Gulp-файл.
Выводы
Если в проекте используется Bootstrap с собственным дизайном, то вместо исправления CSS-файла стоит подключить фреймворк с помощью npm. Для этого используется команда npm install bootstrap, которая установит последнюю версию бутстрапа.
Для подключения всего бутстрап достаточно подключить основной файл bootstrap.scss, который находится по пути node_modules/bootstrap/scss/.
Чтобы комфортно работать с бутстрап, необходимо иметь установленный препроцессор SASS, который сможет компилировать файлы препроцессора в CSS. Полезным будет использование сборщика проектов или таск-менеджера, например, Gulp.
В рамках обучения на Хекслете есть курсы по SASS и Gulp. Ссылки на курсы будут в конце этого урока.
Самостоятельная работа
-
Создайте новый npm-проект с помощью команды
npm init -
Установите в проект Bootstrap, Gulp и все необходимы зависимости. Можете установить зависимости позже, на этапе запуска задач Gulp
-
Создайте все недостающие файлы и папки, как указано в уроке. Скопируйте конфигурацию Gulp и подключите стили бутстрапа в файл main.scss, как указано в уроке
-
Добавьте в файл index.pug верстку, содержащую элементы бутстрапа. Например:
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 -
Запустите сборку проекта командой
npx gulp build. Затем запустите приложение командойnpx gulp. В результате должна открыться страница в браузере. Убедитесь, что стили бутстрапа корректно отображаются. Например, колонки из примера выше:
В следующих самостоятельных работах вы можете использовать этот проект или создавать новый.
Дополнительные материалы
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
