Написать пост

Краткое введение в Bootstrap

Аватар Сергей Штукатуров

Bootstrap — один из самых распространённых инструментов для фронтенд разработчиков. Мы рассказываем, как начать работать с этим фреймворком.

Обложка поста Краткое введение в Bootstrap

Bootstrap — свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Цель этого руководства — показать, как настроить систему для правильного использования JS- и CSS-компонентов Bootstrap.

Прим. перев. В статье не рассматривается целесообразность использования или не использования данного CSS фреймворка. Как и любое другое решение, Bootstrap обладает своими преимуществами и недостатками.

Несколько способов подключения CSS фреймворка

  • Скачать скомпилированные файлы JS и CSS. Скачав файлы на локальную машину, вы можете выбрать, какую версию включить в свой проект – минифицированную или стандартную. Этот вариант подходит при работе со своим проектом локально и не требует от проекта доступа в Интернет.
  • Скачать исходники файлов. Этот вариант подойдёт, если вы знакомы с работой менеджеров задач и сборщиками (Gulp, Grunt, webpack) и уже создали собственную конфигурацию. В таком случае вы вряд ли захотите копировать исходники Bootstrap в свой проект.
  • Включить в проект файлы через CDN. Похоже на первый вариант, но не придётся скачивать никаких файлов. Это самый быстрый способ использовать Bootstrap в своей разработке, но требует постоянного доступа к Интернету.
  • Подключить через npm. Вероятно, самый оптимальный вариант, особенно, если вы собираетесь создать полноценное приложение, а не просто опытный образец.
  • Варианты с использованием RubyGems, Composer и NuGet.

Стоит отметить, что Bootstrap предоставляет три готовых к использованию файла и может быть использован для:

  1. Создания прототипов или приложений.
  2. Реализации Reset (альтернативы Normalize.css).
  3. Вёрстки с помощью Grid.

При этом для использования двух последних опций нет необходимости включать в проект весь CSS фреймворк целиком. Для этого есть отдельные файлы.

Практика

Предполагается, что вы знакомы с Sass и каким-либо сборщиком. Кроме того, вам потребуется npm.

Смотрите также: Развёрнутое руководство по Sass/SCSS

Сначала нужно добавить в проект необходимые зависимости:

			npm init -y && npm i bootstrap jquery-slim popper.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 для начинающих».

Следите за новыми постами
Следите за новыми постами по любимым темам
25К открытий25К показов