Назар Токар
Опубліковано: 9 Жовтня 2014
Оновлено: 4 Травня 2017

Из первого урока вы могли узнать о том, что такое 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.

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
Поширити у Фейсбуці
Надіслати у Messenger
Надіслати в Telegram
Надіслати у WhatsApp
Зберегти в Pocket

Додати коментар

Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

Ви вказали некоректні логін або пароль

Вибачте, для коментування необхідно увійти.

23 коментаря

спочатку нові
за рейтингом спочатку нові за хронологією

Информация, которую искала. Все четко и ясно.

Все очень понятно и доходчиво. Спасибо

Вот за это спс! А то непонятно что отмечать в кастомном бутстрапе )) А то мне нужен clearfix и грид система..

Сталкнулся с такими методами установки (подключения) bootstrap:

1. Вручную, посредством самостоятельного скачивания

2. С помощью указания файлов, находящихся на серверах CDN

3. С помощью Bower

4. С помощью npm

Можно услышать ВАШЕ мнение по ним! И стоит ли на сайте воспользоваться 2 способом (самым простым)?

Автор
Назар Токар

@Владимир, конечно, самый простой способ — подключить фреймворк из cdn. Для большинства сайтов он подходит, как и первый (скачать и поставить с локального каталога). Разницы почти никакой.

Спасибо за ваши уроки!
Я тот самый старик, верставший лет 10 назад :) уже умиляюсь.

Автор
Назар Токар

Рад, что вам они пригодились. Если вы верстаете 10 лет, то это напосинание, а не урок :)

Александр

Здравствуйте, пытаюсь поменять цвет фона в своем css, в body , а он не меняется, в чем проблема может быть ?

Здравствуйте.

Вот такой вопрос. Допустим я отключил все ненужные мне компоненты, скачал boot, сделал верстку, а потом к примеру мне понадобился компонент modals(я его изначально отключил).

Как его включить снова-добавить в бутстрап????

Спасибо.

@ed, так же можно использовать файл config.json. В нем сохранены настройки модулей bootstrap при скачивании. Загрузите это файл на вкладке 'Customize' и добавьте/удалите необходимые компоненты.

Автор
Назар Токар

@ed, скачать заново дистрибутив и заменить им существующий. Ваша вёрстка должна храниться в отдельном файле, её вы добавите после обновления.

Назар, спасибо! Только что впервые столкнулся с шаблоном на бутстрапе, а тут Ваши уроки очень вовремя подвернулись. Наслаждаюсь Вашим блогом :)

Спасибо большое за доходчивые уроки.

Назар, подскажите, пожалуйста, как с бутстрап сделать несколько разных модальных окон на одной странице?

Пример на сайте есть, с одним окном порядок. Не получается сделать другие окна на странице, только добавляя в html-код свои id. Нужно ли еще и дополнительно скрипт js писать?

Автор

@Наталия, ссылке вы указываете id модального окна, которое нужно вызвать. Добавляете в код столько окон, сколько нужно, и вызываете таким образом:

button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"

@Назар Токарь, так я потому и спросила, что для нового окна id изменено, к примеру, на myModal1 и, соответственно, data-target="#myModal1". И в консоли ошибка:

Uncaught Error: Syntax error, unrecognized expression: [name=].

Я понимаю что такое бутс трап и зачем он. Просто тему неудачную поставил

Сейчас нашел другую, буду разбираться.

Задумка хорошая, на практике пока - кака. Поставил wordpress, плагин twitter bootstrap, тему Customizr (вроде как под bootstrap. Хоть убей, не понимаю - как мне это все должно помочь?

Автор
Назар Токар

@Алексей, например, у вас есть готовая тема, созданная на основе бутстрапа :)

@Назар Токарь, Тема то есть, но в вордпрессе как то в этом всем теряется смысл. Толи я не такой, то ли лыжи не едут - в теории все понятно, а реально толку мне от бутстрапа в вордпрессе? Сейчас у меня есть крупный проект, думал применить там бутстрап, но реально не понимаю как его там использовать? В чем для меня принципиальное отличие от просто темы childishly-simple, в которой и так настраивается ширина колонок и цвета. Просто даже не понимаю с какой стороны подходить к бутстрапу в вордпрессе.

Автор
Назар Токар

Вы путаете глобальные понятия. Бутстрап — основа, костяк вашего текущего проекта. Если вы разберетесь с ним, любые новые элементы можно будет добавлять значительно быстрее и проще, чем без него.

Если ничего менять в теме вы не будете, то совершенно неважно, как и кем она написана. Так яснее?

Пока все понятно и доходчиво , ждем следующих уроков. Спасибо!

Ждем продолжения уроков по bootstrap :)

Автор
Назар Токар

@web11, спасибо, скоро будут :)