Перед тем, как приступать к разработке сайта с использованием Bootstrap, нам необходимо сконфигурировать архив, который мы будем использовать в работе.

С опытом это будет занимать у Вас считанные секунды, но пока у нас данного опыта нет, нам нужно понять за что отвечает каждая галочка при настройке Bootstrap и решить нужна ли она нам.

Этот урок посвящен подробному освещению компонентов скачиваемого нами архива.

Зачем это нужно?

Судите сами, если мы просто скачаем все компоненты BS без предварительного отсекания ненужных файлов, то запакованный архив весит 628кб + необходимость подключить библиотеку jQuery, чтобы все корректно работало.

Не нужно быть пророком, чтобы предсказать увеличение длительности загрузки страницы минимум на секунду только из-за того, что нам было лень исходно подобрать необходимый нам функционал фреймворка.

Если Вас не смущают данные цифры, то Вы только начали осваивать азы фонт-энда. Все адекватные разработчики отлично понимают необходимость сокращения любой ценой размера страницы и количества обращений к серверу при ее загрузке.

Конфигурируем Bootstrap

Перейдя на официальный сайт продукта, перед нами открывается следующая картина:

Как мы видим, перед нами имеется три основных группы чекбоксов на выбор. Разберем их по-порядку:

Common CSS

Файлы CSS содержащие код для оформления всех базовых элементов страницы. Их можно смело оставлять подключенными. Впрочем, остановимся на каждом подробнее:

• Print media styles — когда страница сайта распечатывается, то ее оформление может значительно отличаться от того, что мы видим у себя на мониторе. CSS определяющий внешний вид документа при печати содержится в данном файле. Если нас что-то не устраивает в базовой поставке Bootstrap мы можем быстро подогнать все под себя воспользовавшись директивой @media print внутри нашего файла CSS:
  

  @media print {
  /*наше оформление*/
  }

• Typography — все, что связанно с форматированием текста (абзацные отступы, выделение заголовков, цитаты и многое другое). Отлично подходит для того, чтобы сделать текст читабельнее не потратив на это лишнего времени, а просто подключив этот файлик CSS.
  
  Больше информации: урок по оформлению текста с Bootstrap.
• Code — позволяет стилизовать код выводимый на странице. Для полноценной подсветки синтаксиса Вам по-прежнему придется воспользоваться специализированными плагинами, но в целом чтобы визуально выделить код (поместив его внутрь тегов <code>, <pre>, <kdb>) вполне подойдет.
• Grid system — один из мощнейших инструментов в Bootstrap. Позволяет за считаные минуты набросать структуру для сайта с адаптивной версткой используя определенную систему классов.
  
• Tables — оформление данных в таблице одна из самых рутинных задач в работе редко требующая изобретения «велосипеда» с 0. Стили из Tables позволяют неказистое стандартное оформление превратить в достаточно качественное и подходящее Вам путем навешивания буквально пары классов на таблицу:
  
  Подробнее: урок по оформлению таблиц с Bootstrap.
  
• Forms — решает не менее рутинную задачу с оформлением форм. Можно оформить все что угодно начиная от обычных текстовых полей и заканчивая чекбоксами, выпадающими списками и даже верно/не верно заполненными полями.
  
  Больше информации: урок по оформлению форм на Bootstrap
• Buttons — моментальное оформление кнопок используя подходящие нам комбинации классов.
  Больше можно узнать в уроке посвященном работе с кнопками на Bootstrap
• Responsive utilities — набор классов ускоряющий верстку сайта под различные типы устройств. Для этих целей мы имеем 4 классификатора в названиях классов отвечающих за определение разрешения экрана пользователя (xs — 766 px и менее; sm — 768-991 px; md - 992—1199 px; lg — 1200+ px;) и 2 сообщающих что должно произойти с тегом, к которому мы обращаемся (visible- виден только под данным разрешением экрана, а под остальными скрыт; hidden — скрыт только под данным разрешением экрана, а под остальными виден). Комбинируются они следующим образом: .visible-sm - блок виден только на устройствах с разрешением экрана 768-991 px; .hidden-md — блок виден на всех разрешениях экранов кроме 992—1199 px.

Components

Включает в себя набор файликов с кодом заточенным под решение достаточно узкоспециализированных задач. В большинстве своем за что отвечает каждый чекбокс в этой группе понятно из названия, но на всякий случай пройдемся и по ним:

• Glyphicons- подключение бутстраповского иконочного шрифта. Потому если Вы не планируете использовать его при оформлении, то можете смело его отключать. Особенно учитывая, что он весит более 200кб и далеко не всем нравится визуально.
  
• Button groups- используется для группировки кнопок в блоки.
• Input groups — оформление полей форм (input, textarea и тд).
• Navs — используется для оформления навигации сайта. Классы для оформления начинаются с .nav, далее уточняется как именно оформляется навигация. К примеру:
  
  Для своей работоспособности потребует подключения js компонентов.
• Navbar- также используется для оформления меню сайта. Включает в себя оформление выпадающих меню, различные цветовые гаммы, адаптацию под различные разрешения сайта и тд. Чтобы все работало также потребуется активация JS плагина.
• Breadcrumbs- не нужно быть Ностадамусом, чтобы понять что это оформление хлебных крошек на сайте.
• Pagination — оформление постраничной навигации на сайте.
  
• Pager- применяется для стилизации кнопок назад и вперед.
• Labels- различный лейблы. Что это такое проще понять рассматривая пример:
  
• Badge- отлично подходит для оформления виджета количества комментариев, количества товаров в рубрике, новых сообщений и много другое.
  
• Jumbotron- удобный, легко масштабирующийся компонент оформления сайта. Отлично подходит для оформления первого экрана сайта и промо-текстов.
• Thumbnails- оформление превью видео, картинок и прочего.
• Alerts — стилизация системных сообщений, диалоговых окон. К примеру:
  
• Progress bars- оформляет виджеты отображающие прогресс какого-либо процесса.
• Media items- используется для оформления имеющих «древовидную» структуру (блоки с различными отступами справа). Ярким примером могут быть комментарии на блоге.
• List groups- стилизуем списки.
• Panels- не самый необходимый нам компонент. Используется в случаях, когда нам необходимо поместить наш код в определенный контейнер. К примеру, отделить хедер от основного содержимого сайта и так далее.
• Responsive embed- создает «резиновые» элементы дизайна, которые будут менять свою ширину и высоту пропорционально размерам экрана.
• Wells- выделение определенных фрагментов кода, чаще всего текста. К примеру в случае различного рода подсказок и цитат.
• Close icon- стилизуем кнопку «закрыть»…

JavaScript components

Данные элементы ответственны за всевозможные динамические элементы на странице. К примеру слайдеры или же красиво всплывающие окна.
Для своей работоспособности требует подключенной библиотеки jQuery и файла bootstrap.min.js. Включает в себя:

• Component animations (for JS)- задает плавное движение элементов, анимации.
• Dropdowns- скрипт для выпадающих списков.
• Tooltips-маленькие подсказки появляющиеся по клику на чем-либо.
• Popovers- позволяет оформлять всплывающие подсказки. К примеру:
  
• Modals- стилизация всплывающих окон. Позволяет делать с ними что угодно, вплоть до смены текста.
• Carousel- знакомый многим слайдер-карусель. Мы можем стилизовать его и изменять характер движения картинок по своему усмотрению.

Часто задаваемые вопросы

Как можно модифицировать базовые параметры Bootstrap?

Самый простой способ просто перекрыть не подходящие нам стили из фреймворка в своем файле CSS.

Есть еще вариант настроить бутстрап исключительно под себя еще до его скачивания воспользовавшись блоком Less Variables.

Что делать если что-то из функционала исходно не было подключено в нашу сборку, а во время работы над проектом в этом возникла необходимость?

Для этого необходимо заново сконфигурировать архив с Бутстрапом, на этот раз выбрав все необходимые нам для работы элементы и заменить им тот, которым Вы пользовались при верстке.

Все будет отлично работать, если Вы правильно верстали свой сайт не залезая в файлы бутстрапа.

Есть еще вариант скачать необходимый нам файл и, подкорректировать настройки в config.json так, как нам нужно, чтобы все подключилось.

Подводя итоги

Грамотно настроив систему мы вполне можем сократить размер архива с необходимыми нам файлами килобайт до 100-150…

О том, как подключить скачанный архив для работы я уже рассказывал в конце вводного урока по Bootstrap.