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
Сначала нужно добавить в проект необходимые зависимости:
npm init -y && npm i bootstrap jquery-slim popper.js
Типовая структура проекта выглядит так:
. ├── src │ ├── scripts │ │ ├── app │ │ │ └── .gitkeep │ │ ├── vendor │ │ │ ├── bootstrap.js │ │ │ └── jquery.js │ │ ├── app.js │ │ └── vendor.js │ ├── styles │ │ ├── app │ │ │ ├── _base.scss │ │ │ └── _variables.scss │ │ ├── vendor │ │ │ └── bootstrap │ │ │ ├── _core.scss │ │ │ ├── _main.scss │ │ │ └── _variables.scss │ │ ├── app.scss │ │ └── vendor.scss │ └── index.html ├── package.json └── webpack.config.js
Стоит пояснить, какие преимущества предоставляет такая структура. Сначала рассмотрим папку styles
, а затем перейдём к scripts
.
Styles
Эта папка содержит две вложенные директории app
и vendor
, а также два файла с теми же именами.
- Папка
app
будет содержать все компоненты вашего приложения, переменные, настраиваемые стили и так далее. - Папка
vendor
используется для зависимостей. В данном случае это только Bootstrap, расположенный в соответствующей директории. Для каждой зависимости выделяется отдельная вложенная папка.
Необходимо подключить Bootstrap и код нашего приложения в файле app.scss
. Это делается следующим образом:
@import 'vendor/bootstrap/core';
@import 'app/variables';
@import 'app/base';
Теперь обратите внимание на папку styles/app
. Там всего два файла:
- В файле
_base
описываются стили. Может расширяться с помощьюNormalize.css
. - В
_variables
размещаются переменные приложения.
В vendor.scss
импортируются зависимости. Сейчас единственная наша зависимость — Bootstrap, поэтому этот файл содержит только одну строку.
@import 'vendor/bootstrap/main';
Рассмотрим файлы в папке styles/vendor/bootstrap
.
- В
_core
импортируются наши переменные и три основных файла Bootstrap, без которых CSS фреймворк не сможет работать:
@import 'variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
_main
импортирует файл_core.scss
вашего проекта в самом верху, а также все необходимые файлы Bootstrap SASS из папкиnode_modules
:
@import 'core';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';
В Webpack (автор использует этот сборщик) знак тильды (~) указывает, что файлы нужно искать в папке node_modules
. Если вы используете, например, Grunt, то нужно установить grunt-sass-tilde-importer. Если какие-то из представленных компонентов не использованы в проекте, ни в коем случае не надо удалять сами файлы, нужно лишь закомментировать их импорт.
_variables
изначально пуст. В нём переопределяют переменные Bootstrap под конкретный проект.
В каждой переменной Bootstrap установлен флаг !default
. Таким образом, если проект содержит заранее определённые переменные, то они будут использованы вместо дефолтных.
Scripts
Чтобы сделать скрипты модульными, нужно включить в проект только необходимые компоненты. Однако в Bootstrap это не такая простая задача. Подробно этот процесс описан в документации к CSS фреймворку.
Начать следует с файла scripts/vendor.js
, который просто импортирует файлы из папки vendor
:
import './vendor/jquery'
import './vendor/bootstrap'
Смотрите также: Как отказаться от jQuery в современном фронтенде
Необходимо инициализировать jQuery в объекте window, в противном случае Bootstrap не сможет скомпилироваться. Кроме того, это всё равно придётся сделать, если вы планируете использовать jQuery в приложении. Импорт jQuery в файле scripts/vendor/jquery.js
:
import jQuery from 'jquery'
window.$ = window.jQuery = jQuery
Как и в файле vendor
, придётся импортировать каждый модуль отдельно. Вы также можете закомментировать неиспользуемые компоненты, чтобы исключить их из проекта. Содержимое файла scripts/vendor/jquery.js
:
// Core
import Util from 'bootstrap/js/src/util'
// Components
import Alert from 'bootstrap/js/src/alert'
import Button from 'bootstrap/js/src/button'
import Carousel from 'bootstrap/js/src/carousel'
import Collapse from 'bootstrap/js/src/collapse'
import Dropdown from 'bootstrap/js/src/dropdown'
import Modal from 'bootstrap/js/src/modal'
import Popover from 'bootstrap/js/src/popover'
import Scrollspy from 'bootstrap/js/src/scrollspy'
import Tab from 'bootstrap/js/src/tab'
import Tooltip from 'bootstrap/js/src/tooltip'
Следует отметить, что модуль Util используется везде, кроме компонентов Button и Popover.
Таким образом, скомпилировав Bootstrap в отдельный файл, можно применять функции и переменные ядра CSS фреймворка в любом месте в проекте. Кроме того, благодаря реализации модульного принципа, ненужные компоненты легко отключить.
Примеры использования CSS фреймворка
SCSS
Миксины Bootstrap можно использовать в приложении глобально:
//styles/app/_base.scss
:root {
font-size: 14px;
@include media-breakpoint-up('md.) {
font-size: 16px;
}
}
Можно использовать дефолтные значения переменных и переопределять их:
// styles/app/_variables.scss
$font-family: 'Roboto Condensed', $font-family-sans-serif;
// styles/app/_base.scss
body {
font-family: $font-family;
}
JavaScript
Можно создавать экземпляры любых компонентов Bootstrap в файле scripts/app.js
:
$(function () {
$('#dummy-modal').modal('show')
})
Чтобы лучше разобраться, вы можете изучить полностью настроенный и функционирующий проект Webpack v4 Configuration, в котором реализована описанная логика. Это хороший пример того, как можно настроить Bootstrap под себя.
Также рекомендуем обратить внимание на видеокурс «Bootstrap для начинающих».
Перевод статьи Bootstrap Framework — Best Practices