9 Жовтень 2014
Рубрика: уроки

Уроки по Bootstrap. Урок №2: из чего состоит и как его настроить

Сегодня на уроке: настройка внешнего вида Bootstrap перед скачиванием, выбор компонентов. Ещё вы узнаете, какие элементы вам нужны и какие — нет. Хотя нужны они все, но всему своё время.

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

Это начало практической работы над Bootstrap и основа любого проекта на его основе. Знания этого урока необходимы, но далеко не достаточны, поэтому рекомендую начать с первого занятия и постепенно изучать остальные, ведь сложность увеличивается по мере накопленных вами знаний. А объяснять я стараюсь максимально простым языком. То есть так, чтобы я смог понять всё с первого раза. Итак…

Зачем настраивать Bootstrap

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

Причин две: во-первых, скорее всего вам понадобятся не все компоненты Bootstrap, а во-вторых, вес такого шаблона даже в сжатом виде немал — 530 Кб. Добавьте 90 Кб jQuery, без которого js-компоненты работать откажутся. Такой роскоши ни один фронт-енд разработчик позволить себе не может, поэтому будем удалять всё лишнее.

К слову, убирать лишнее нужно всегда.

Выбор компонентов

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

bootstrap компоненты

Сейчас я объясню, какие части бутстрапа используются для тех или иных целей.

Базовые стили Bootstrap (Common CSS)

Это набор основных элементов, которые нужны для базовой вёрстки. Их я бы рекомендовал всегда оставлять отмеченными.

Стили для печати (Print media styles)

Это стили, которые будет использовать браузер при подготовке страницы к печати. Настроить их по своему усмотрению вы можете в отдельных стилях в таком формате:
@media print {
/* ваши стили */
}

Стили для текста (Typography)

Базовое оформление текста: отступы, абзацы, цитаты, выделение кода, отформатированного текста, заголовки, под- и надстрочный текст — всё это будет оформлено этим набором стилей.

Даже если вы не будете использовать классы на странице, её содержимое будет оформлено в bootstrap-стиле. Это удобно для тех случаев, когда вы не можете или не хотите копаться в старом коде. Достаточно подключить библиотеку, чтобы текст стал более читаемым.

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

Вот как изменится обычный текст без каких-либо дополнительных стилей:

пример оформления текста на bootstrap

Оформления кода (Code)

Оформление кода на страницах. Конечно, здесь нет подсветки синтаксиса, для этого придётся пользоваться отдельным плагином (никак, кстати, не связанным с бутстрапом), но отличить код от обычного текста можно будет, заключив его в тегах <code>, <pre> или <kdb>.

Подробно читайте в этом уроке: оформление текста в Bootstrap.

Блочная система (Grid system)

Магия любого css-фреймворка до сих пор приводит в умиление стариков, которые верстали лет 10 назад и перед началом вёрстки думали, верстать таблицами или блоками. Простым добавлением нужных классов вы получаете адаптивную (responsive) вёрстку для вашего сайта за 10 минут.

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

Сейчас же покажу вам пример того, как это может выглядеть:

bootstrap блочная верстка

Подробно читайте в уроке о вёрстке макетов в Bootstrap.

Таблицы (Tables)

Табличная вёрстка давно осталась в прошлом, но табличные данные должны отображаться соответственно, если не оговорено обратное. Без надлежащего оформления таблицы выглядят крайне непривлекательно. Старайтесь избегать такого:

таблица без bootstrap

После простого добавления Bootstrap без изменений в html таблица станет выглядеть так:

таблица с bootstrap

Подробно о таблицах вы можете узнать из урока о таблицах в Bootstrap.

Формы (Forms)

Если вам нужно оформлять формы, Bootstrap умеет и это:

форма на bootstrap

Отмечайте этот элемент, если вам придётся оформлять формы.

Подробно читайте в уроке о формах в Bootstrap.

Кнопки (Buttons)

Кнопки в Bootstrap — это тема для отдельного разговора: по умолчанию есть 4 размера и 7 видов кнопок. Кроме того, в наличии кнопки с выпадающим меню, блоки из кнопок и так далее. Повторяя материал первого урока, напомню, что кнопки по умолчанию выглядят так:

bootstrap buttons

Узнать всё о кнопках в бутстрапе можно из этого урока.

Отзывчивые элементы (Responsive utilities)

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

“Отзывчивые компоненты” позволят существенно сэкономить код и состоят из таких компонентов:

Очень мелкие экраны
Телефоны (до 768 px)
Маленькие экраны
Планшеты (≥768px)
Средние экраны
Настольные (≥992px)
Большие экраны
Настольные (≥1200px)
.visible-xs-*ВидимыйСкрытыйСкрытыйСкрытый
.visible-sm-*СкрытыйВидимыйСкрытыйСкрытый
.visible-md-*СкрытыйСкрытыйВидимыйСкрытый
.visible-lg-*СкрытыйСкрытыйСкрытыйВидимый
.hidden-xsСкрытыйВидимыйВидимыйВидимый
.hidden-smВидимыйСкрытыйВидимыйВидимый
.hidden-mdВидимыйВидимыйСкрытыйВидимый
.hidden-lgВидимыйВидимыйВидимыйСкрытый

Как видите, один и тот же блок можно спрятать на планшете и показывать только на десктопе и мобильном.

Как создавать отзывчивые изображения, читайте в отдельном уроке.

Компоненты (Components)

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

  1. Glyphicons: иконочный шрифт. Весит порядка 250 кб и используется нечасто. Поэтому если не нужен — отключайте.
  2. Button groups: блоки, объединяющие несколько кнопок.
  3. Input groups: расширение для текстовых блоков и полей, например, так:bootstrap form
  4. Navs, табы, вкладки: навигация с табами, потребует подключения js-модуля.
  5. Navbar: навигация главного меню; может быть закрепленным, светлым или тёмным.
  6. Breadcrumbs: хлебные крошкиbootstrap хлебные крошки
  7. Pagination: постраничная навигация; особенно полезна для блогов.
  8. Pager: кнопки “вперёд” и “назад”.
  9. Labels: 6 видов “наклеек”:bootstrap badges
  10. Badges: сноски. Например, для обозначения непрочитанных писем.
  11. Jumbotron: большой блок с текстовым приветствием. Обычно используется на промо-сайтах для краткого описания проекта.
  12. Thumbnails: оформление уменьшенных копий фотографий.
  13. Alerts: уведомления (успех, ошибка, информация, подсказка).
  14. Progress bars: прогресс, указывается в процентах, можно добавить анимацию и полосатый фон.
  15. Media items: оформление блоков с комментариями, твитами и так далее. Это обычно списки с элементами вложенности, которая отличается отступом с левого края. Как у обычных древовидных комментариев.
  16. List groups: оформление списков с дополнительными возможностями: сноски, список из ссылок, уведомления (смотрите п. “labels”)
  17. Panels: блоки с заголовком, основным контентом и футером. Могут использоваться как для расширенных уведомлений, так и для элементов управления или форм.
  18. Responsive embed: “отзывчивые” объекты умеют растягиваться на разных размерах экрана, чтобы отображать видео в правильном соотношении сторон и без явного указания размеров.
    <!-- видео с соотношением сторон 16:9 -->
    <div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="…"></iframe>
    </div>
    
    <!-- видео с соотношением 4:3 -->
    <div class="embed-responsive embed-responsive-4by3">
    <iframe class="embed-responsive-item" src="…"></iframe>
    </div>
  19. Wells: вставки с подсказками, альтернативное оформление цитат и так далее.
  20. Close icon: думаю, здесь всё ясно.

JavaScript компоненты

Bootstrap расширяет функционал динамическими функциями. Эта часть фреймворка работает на основе jQuery и требует, чтобы он был подключён до bootstrap.min.js. Состоит из таких компонентов:

  1. Component animations (for JS): плавные переходы, анимация.
  2. Collapse: сворачивание блоков, спойлеры
  3. Dropdowns: выпадающие списки.
  4. Tooltips: небольшие всплывающие подсказки.
    bootstrap подсказки
  5. Popovers: всплывающие подсказки, в которых можно добавлять динамический контент, заголовок и основной текст:
    bootstrap popover
  6. Modals: всплывающие окна. Можно менять размеры, добавлять заголовок, основной текст и футер. И модифицировать как угодно. Выглядит по умолчанию так:
    модальное окно bootstrap
  7. Carousel: простой слайдер с несколькими вариантами движения.
  8. Tabs.js, создание вкладок и табов

Кстати, я ранее писал, как сделать слайдер своими силами на jQuery.

Настройка переменных

Вы можете модифицировать стандартные параметры как угодно. Можно создать свою тему Bootstrap двумя способами:

  1. создать свой style.css и в нём указывать стили, которые “перекроют” стандартные;
  2. в блоке Less Variables поменять параметры на нужные и скачать архив с бутстрапом, настроенным только для вас.

Как скачать

После окончания настройки в самом низу жмём “Compile and download”, в полученном архиве будут только выбранные вами элементы. Я сравнил, что если мелкий проект использует только часть всего функционала, то вес фреймворка легко уменьшить с 600 до 100 Кб. Полученные файлы сохраняем в папку с проектом, подключаем bootstrap.min.css и (если нужно) bootstrap.min.js.

На этом настройка окончена, можно верстать проект. Подробно о компонентах я буду рассказывать в следующих уроках.

Тепер я хочу бачити коментарі 23