Краткое введение в Bootstrap
Bootstrap — один из самых распространённых инструментов для фронтенд разработчиков. Мы рассказываем, как начать работать с этим фреймворком.
25К открытий25К показов
Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Цель этого руководства — показать, как настроить систему для правильного использования JS- и CSS-компонентов Bootstrap.
Прим. перев. В статье не рассматривается целесообразность использования или не использования данного CSS фреймворка. Как и любое другое решение, Bootstrap обладает своими преимуществами и недостатками.
Несколько способов подключения CSS фреймворка
- Скачать скомпилированные файлы JS и CSS. Скачав файлы на локальную машину, вы можете выбрать, какую версию включить в свой проект – минифицированную или стандартную. Этот вариант подходит при работе со своим проектом локально и не требует от проекта доступа в Интернет.
- Скачать исходники файлов. Этот вариант подойдёт, если вы знакомы с работой менеджеров задач и сборщиками (Gulp, Grunt, webpack) и уже создали собственную конфигурацию. В таком случае вы вряд ли захотите копировать исходники Bootstrap в свой проект.
- Включить в проект файлы через CDN. Похоже на первый вариант, но не придётся скачивать никаких файлов. Это самый быстрый способ использовать Bootstrap в своей разработке, но требует постоянного доступа к Интернету.
- Подключить через npm. Вероятно, самый оптимальный вариант, особенно, если вы собираетесь создать полноценное приложение, а не просто опытный образец.
- Варианты с использованием RubyGems, Composer и NuGet.
Стоит отметить, что Bootstrap предоставляет три готовых к использованию файла и может быть использован для:
- Создания прототипов или приложений.
- Реализации Reset (альтернативы Normalize.css).
- Вёрстки с помощью Grid.
При этом для использования двух последних опций нет необходимости включать в проект весь CSS фреймворк целиком. Для этого есть отдельные файлы.
Практика
Предполагается, что вы знакомы с Sass и каким-либо сборщиком. Кроме того, вам потребуется npm.
Смотрите также: Развёрнутое руководство по Sass/SCSS
Сначала нужно добавить в проект необходимые зависимости:
Типовая структура проекта выглядит так:
Стоит пояснить, какие преимущества предоставляет такая структура. Сначала рассмотрим папку styles
, а затем перейдём к scripts
.
Styles
Эта папка содержит две вложенные директории app
и vendor
, а также два файла с теми же именами.
- Папка
app
будет содержать все компоненты вашего приложения, переменные, настраиваемые стили и так далее. - Папка
vendor
используется для зависимостей. В данном случае это только Bootstrap, расположенный в соответствующей директории. Для каждой зависимости выделяется отдельная вложенная папка.
Необходимо подключить Bootstrap и код нашего приложения в файле app.scss
. Это делается следующим образом:
Теперь обратите внимание на папку styles/app
. Там всего два файла:
- В файле
_base
описываются стили. Может расширяться с помощьюNormalize.css
. - В
_variables
размещаются переменные приложения.
В vendor.scss
импортируются зависимости. Сейчас единственная наша зависимость — Bootstrap, поэтому этот файл содержит только одну строку.
Рассмотрим файлы в папке styles/vendor/bootstrap
.
- В
_core
импортируются наши переменные и три основных файла Bootstrap, без которых CSS фреймворк не сможет работать:
_main
импортирует файл_core.scss
вашего проекта в самом верху, а также все необходимые файлы Bootstrap SASS из папкиnode_modules
:
В Webpack (автор использует этот сборщик) знак тильды (~) указывает, что файлы нужно искать в папке node_modules
. Если вы используете, например, Grunt, то нужно установить grunt-sass-tilde-importer. Если какие-то из представленных компонентов не использованы в проекте, ни в коем случае не надо удалять сами файлы, нужно лишь закомментировать их импорт.
_variables
изначально пуст. В нём переопределяют переменные Bootstrap под конкретный проект.
В каждой переменной Bootstrap установлен флаг !default
. Таким образом, если проект содержит заранее определённые переменные, то они будут использованы вместо дефолтных.
Scripts
Чтобы сделать скрипты модульными, нужно включить в проект только необходимые компоненты. Однако в Bootstrap это не такая простая задача. Подробно этот процесс описан в документации к CSS фреймворку.
Начать следует с файла scripts/vendor.js
, который просто импортирует файлы из папки vendor
:
Смотрите также: Как отказаться от jQuery в современном фронтенде
Необходимо инициализировать jQuery в объекте window, в противном случае Bootstrap не сможет скомпилироваться. Кроме того, это всё равно придётся сделать, если вы планируете использовать jQuery в приложении. Импорт jQuery в файле scripts/vendor/jquery.js
:
Как и в файле vendor
, придётся импортировать каждый модуль отдельно. Вы также можете закомментировать неиспользуемые компоненты, чтобы исключить их из проекта. Содержимое файла scripts/vendor/jquery.js
:
Следует отметить, что модуль Util используется везде, кроме компонентов Button и Popover.
Таким образом, скомпилировав Bootstrap в отдельный файл, можно применять функции и переменные ядра CSS фреймворка в любом месте в проекте. Кроме того, благодаря реализации модульного принципа, ненужные компоненты легко отключить.
Примеры использования CSS фреймворка
SCSS
Миксины Bootstrap можно использовать в приложении глобально:
Можно использовать дефолтные значения переменных и переопределять их:
JavaScript
Можно создавать экземпляры любых компонентов Bootstrap в файле scripts/app.js
:
Чтобы лучше разобраться, вы можете изучить полностью настроенный и функционирующий проект Webpack v4 Configuration, в котором реализована описанная логика. Это хороший пример того, как можно настроить Bootstrap под себя.
Также рекомендуем обратить внимание на видеокурс «Bootstrap для начинающих».
25К открытий25К показов