Bootstrap в примерах

Сильвио Морето

Bootstrap 
в примерах

Bootstrap  
By Example

Master Bootstrap 4's frontend framework  
and build your websites faster than  
ever before

Silvio Moreto

BIRMINGHAM - MUMBAI

Bootstrap 
в примерах

Освойте клиентский фреймворк 
Bootstrap 4 и создавайте веб-сайты 
быстрее, чем прежде

Сильвио Морето

Москва, 2017

УДК  004.738.5:004.42Bootstrap
ББК  32.973.4

М79

М79     Сильвио Морето

Bootstrap в примерах. / Пер. с англ. Рагимов Р. Н. / Науч. ред. 
Киселев А. Н. – М.: ДМК Пресс, 2017. – 314 с.: ил.

             ISBN 978-5-97060-423-6

Данная книга содержит различные примеры и пошаговое 

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

Издание адресовано разработчикам внешних интерфейсов, 

не знакомым с Bootstrap. Тем не менее, подразумеваются базовые знания HTML, CSS и JavaScript, приветствуется знакомство с другими фреймворками, например, с JQuery.

УДК  004.738.5:004.42Bootstrap
ББК  32.973.4

Original English language edition published by Published by Packt Publishing 

Ltd., Livery Place, 35 Livery Street, Birmingham B3 2PB, UK. Copyright © 2016 
Packt Publishing. Russian-language edition copyright © 2016 by DMK Press. All 
rights reserved.

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

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

ISBN 978-1-78528-887-6 (англ.)                     Copyright © 2016 Packt Publishing 
ISBN 978-5-97060-423-6 (рус.)                       © Оформление, перевод на русский язык,

          ДМК Пресс, 2017

ОГЛАВЛЕНИЕ

Об авторе ........................................................ 10

О техническом рецензенте ................................. 11

Предисловие ................................................... 12

О чем рассказывается в этой книге ............................................... 13
Что потребуется для работы с книгой ............................................ 13
Кому адресована эта книга ............................................................ 14
Соглашения................................................................................... 14
Отзывы и пожелания ..................................................................... 15
Загрузка исходного кода примеров ............................................... 15
Список опечаток............................................................................ 16
Нарушение авторских прав ........................................................... 16
Вопросы ........................................................................................ 16
Загрузка цветных изображений для книги ..................................... 16

Глава 1. Начало ................................................ 17

Получение Bootstrap ...................................................................... 17
Установка фреймворка .................................................................. 20
Структура папок .................................................................................... 20
Простой пример ................................................................................... 21
Теги, необходимые Bootstrap ................................................................ 23

Создание первого примера с использованием Bootstrap .............. 25
Тег контейнера ...................................................................................... 26

Необязательность использования CDN ......................................... 28
Деятельность сообщества ............................................................. 30
Инструменты ........................................................................................ 31

Bootstrap и веб-приложения .......................................................... 31
Совместимость с браузерами ....................................................... 32
Итоги ............................................................................................ 33

Глава 2. Создание надежной основы .................... 34

Суть сеточной системы ................................................................. 34
Построение основы ....................................................................... 35

Оглавление

Настройка ............................................................................................. 35
Смещение столбцов ............................................................................. 38
Завершение строк сетки ....................................................................... 39
Вложение строк .................................................................................... 39
Завершение сетки ................................................................................ 40

Контейнер container-fluid ............................................................... 42
Нам не хватает оформления! ......................................................... 43
Заголовки повсюду ............................................................................... 45
Поиграем с кнопками ............................................................................ 46
Подробнее об оформлении и тегах ....................................................... 47

Управление таблицами.................................................................. 52
Стилизация кнопок ............................................................................... 56

Как босс! ....................................................................................... 56
Заключительные соображения ...................................................... 58
Расчет размеров ................................................................................... 58
Выравнивание плавающих элементов ................................................... 59
Метод сlearfix ........................................................................................ 59
Определение шрифтов для оформления .............................................. 60

Итоги ............................................................................................ 60

Глава 3. Да, в первую очередь для мобильных 
устройств ........................................................ 62

Что делает его великим ................................................................. 62
Bootstrap и разработка в первую очередь для мобильных  
устройств ...................................................................................... 64
Отладка для различных областей просмотра в браузере ............... 64
Наведение порядка ....................................................................... 67
Создание целевой страницы для разных устройств ....................... 68
Мобильные и сверхмалые устройства ................................................... 69
Планшеты и малые устройства .............................................................. 74
Настольные и большие устройства ....................................................... 77

Итоги ............................................................................................ 78

Глава 4. Применение стилей Bootstrap ................. 80

Изменение компоновки сетки ....................................................... 80
Начало создания сеточной системы ...................................................... 81
Формирование форм ............................................................................ 95
Изображения ...................................................................................... 103
Вспомогательные классы .................................................................... 105

Итоги .......................................................................................... 108

Глава 5. Что делает его фантастическим ............ 109

Использование значков в Bootstrap ............................................. 109

Оглавление

Займемся навигацией ................................................................. 113
Свертывание панели навигации .......................................................... 114
Иные способы размещения ................................................................ 116
Цвет навигационной панели ................................................................ 117

Раскрывающееся меню ............................................................... 117
Настройка кнопок с раскрывающимся списком................................... 120

Группировка элементов ввода ..................................................... 121
Готовимся к использованию разметки Flexbox! ............................ 123
Основные понятия Flexbox .................................................................. 124
Эксперименты с Bootstrap и Flexbox .................................................... 125

Итоги .......................................................................................... 126

Глава 6. Можно ли создать веб-приложение? ...... 128

Что такое веб-приложение .......................................................... 128
Создание структуры кода .................................................................... 129

Добавление навигации ................................................................ 129
Добавление поля ввода для поиска ..................................................... 132
Пришло время создания пунктов меню! .............................................. 133
Настройка навигационной панели ....................................................... 134
Вам нужен бейдж! ............................................................................... 137
Решение проблем навигационной панели ........................................... 138

И снова сетка .............................................................................. 141
Эксперименты с карточками ....................................................... 142
Карточки в Bootstrap 4 ......................................................................... 142
Создание собственных карточек ......................................................... 143
Добавление карточки в веб-приложение ............................................. 145
Карточка с миниатюрами .................................................................... 148

Наполнение содержимым основного раздела ............................. 150
Создание ленты .................................................................................. 151
Разделение списка сообщений на страницы ....................................... 156

Создание навигационной цепочки ............................................... 158
Добавление контента в колонку справа ....................................... 158
Итоги .......................................................................................... 163

Глава 7. Конечно можно создать веб-приложение! .. 164

Сообщения в веб-приложении .................................................... 164
Отключаемые сообщения ................................................................... 166
Настройка сообщений ........................................................................ 166

Индикатор выполнения  ............................................................... 168
Параметры индикатора выполнения ................................................... 169
Анимация индикатора выполнения ..................................................... 170

Создание страницы с настройками ............................................. 171
Вертикальное навигационное меню .................................................... 172

Оглавление

Вкладки в середине ............................................................................ 176
Наполнение вкладки с информацией о пользователе .......................... 179
Столбец статистики ............................................................................ 182
Этикетки и бейджи .............................................................................. 183

Итоги .......................................................................................... 185

Глава 8. Работа с JavaScript .............................. 187

Введение в плагины на JavaScript ................................................ 187
Зависимости ...................................................................................... 188
Атрибуты данных ................................................................................. 188
JavaScript-события в Bootstrap ............................................................ 189

Потрясающая реализация модальности в Bootstrap .................... 189
Общие сведения о модальности и модальный контент ........................ 191
Заголовок модальной панели.............................................................. 191
Тело модальной панели ...................................................................... 192
Нижний колонтитул модальной панели ............................................... 193

Создание собственной модальной панели .................................. 193
Инструмент для вывода подсказок .............................................. 195
Парящие над всеми ..................................................................... 198
События всплывающих панелей .......................................................... 202

Создание аффикса меню ............................................................ 203
Завершение веб-приложения ..................................................... 205
Итоги .......................................................................................... 210

Глава 9. Введение в продвинутый режим ............ 212

Общий план ................................................................................. 212
Последняя навигационная панель с Flexbox ................................ 214
Поиск .................................................................................................. 217
Меню навигации ................................................................................. 219
Просмотр учетной записи ................................................................... 223

Наполнение основного плавающего раздела .............................. 225
Боковое вертикальное меню ............................................................... 226
Левое меню отлично смотрится! ......................................................... 227
Плагин сворачивания .......................................................................... 229
Использование продвинутых CSS-стилей ........................................... 232

Добавление основного контента ................................................. 234
Круговые диаграммы .......................................................................... 236
Создание карточки оперативной статистики ....................................... 239
Радиальная диаграмма ....................................................................... 241

Параллельная загрузка ............................................................... 244
Исправление вывода кнопки переключения на мобильных 
устройствах ................................................................................. 245
Итоги .......................................................................................... 247

Оглавление

Глава 10. Оживление компонентов .................... 248

Создание карточек в основном разделе ...................................... 248
Создание карточки из компонентов Bootstrap ..................................... 252
Создание последней карточки ............................................................ 255

Исправление неправильного отображения на мобильных 
устройствах ................................................................................. 256
Исправление навигационного меню.................................................... 260
Оформление списка оповещений ....................................................... 263
Добавление потерянного левого меню ............................................... 264
Выравнивание круговых диаграмм ..................................................... 266

Знакомство с другими продвинутыми плагинами ........................ 267
Использование каруселей Bootstrap ................................................... 268
Отслеживание прокрутки в Bootstrap .................................................. 274

Итоги .......................................................................................... 278

Глава 11. Переделка на свой лад ....................... 280

Настройка компонентов Bootstrap ............................................... 280
Настройка кнопки ............................................................................... 281
Использование кнопок-переключателей ............................................. 282
Кнопки-переключатели в виде флажков .............................................. 283
Кнопка в качестве радиокнопки........................................................... 284
Настройка с помощью JavaScript ........................................................ 285

Настройка плагинов .................................................................... 285
Дополнительные плагины Bootstrap ............................................ 291
Создание плагина Bootstrap ........................................................ 291
Создание основы плагина ................................................................... 293

Определение методов плагина ................................................... 297
Инициализация и проверка подключаемого модуля ............................ 297
Добавление шаблона Bootstrap ........................................................... 298
Создание оригинального шаблона ...................................................... 300
Инициализация оригинального плагина .............................................. 303
Запуск плагина в работу ...................................................................... 304

Добавление методов в плагин ..................................................... 306
Итоги .......................................................................................... 308

Предметный указатель .................................... 310

ОБ АВТОРЕ

Сильвио Морето (Silvio Moreto), разработчик с более чем 7-летним 
опытом работы в области веб-технологий, создал множество вебсайтов и веб-приложений с использованием фреймворка Bootstrap. 
Постоянно применяет Bootstrap для создания простых и сложных 
страниц.
Он также является создателем плагина bootstrap-select (http://
silviomoreto.github.io/bootstrap-select/), очень популярного среди 
членов сообщества. Этот плагин превращает элемент выбора в кнопку 
Bootstrap с раскрывающимся меню. Сильвио предугадал, что именно 
такого плагина не хватает фреймворку, и он пригодится другим членам сообщества. Поэтому он создал плагин, а члены сообщества помогают его поддерживать.
Кроме того, он очень активный член сообщества разработчиков 
программ с открытым исходным кодом, принимает участие в работе 
нескольких общедоступных репозиториев и сообществ взаимопомощи, таких как Stack Overflow. Занял третье место на всемирном ежегодном соревновании Django Dash 2013.

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

О ТЕХНИЧЕСКОМ 
РЕЦЕНЗЕНТЕ

Паула Барканте (Paula Barcante), 23-летняя проектировщица пользовательских интерфейсов с особой тягой к веб-интерфейсам. Обучается разработке, читая книги и посещая бесплатные онлайн-курсы. 
Начала пользоваться Bootstrap четыре года назад и продолжает применять его до сих пор. Паула с увлечением проектирует и разрабатывает красивые и удобные интерфейсы для пользователей по всему 
миру. Недавно поступила на работу в Amazon.com в качестве проектировщика пользовательских интерфейсов. Она всегда рада пообщаться с теми, кто увлечен дизайном или разработкой веб-интерфейсов. 
Ее работы можно найти на сайте paulabarcante.com.

ПРЕДИСЛОВИЕ

Разработку веб-приложений можно разделить на два периода, до и после появления Bootstrap. В 2011 году был выпущен величайший из всех 
клиентских фреймворков. В том же году значительно расширилась область применения фреймворка, охватив почти все сегменты рынка.
Причина проста: представьте, насколько сложно было создать просто красивую кнопку. Для этого требовалось объявить массу классов 
и стилей. Теперь всем этим занимается фреймворк Bootstrap, созданный разработчиками из Twitter. Он изменил саму парадигму разработки быстро меняющихся веб-интерфейсов.
Превосходство Bootstrap основывается на трех аспектах. Первый – 
таблица стилей, содержащая базовую CSS-разметку практически для 
каждого HTML-элемента, обеспечивающую их единообразный привлекательный вид.
Второй аспект – компоненты. Их можно использовать многократно простым копированием и вставкой кода. И последний аспект –подключаемые модули, или плагины на JavaScript, позволяющие создавать дополнительные элементы, которые больше нигде нельзя найти.
Разобраться в тонкостях клиентского фреймворка Bootstrap вам 
помогут примеры, демонстрирующие применение каждого элемента 
и компонента. Ознакомившись с примерами, вы лучшее поймете происходящее и определите свои цели.
Примеры, описанные в книге, позволят освоить фреймворк и научиться применять его в наиболее типичных ситуациях. К ним относятся целевые страницы, веб-приложения и панели мониторинга, 
созданием которых занимаются 10 из 10 веб-разработчиков. Разработчики имеют дело с такого рода страницами постоянно, и с помощью Bootstrap вы сможете сделать их привлекательнее, включить в 
них компоненты, анимационные эффекты, обработку событий и интеграцию с внешними библиотеками.
Мы начнем с основ, но не ограничимся ими и будем двигаться 
дальше, к полноценному освоению фреймворка. Самостоятельная 
проработка примеров из книги гарантировано сделает вас мастером 
Bootstrap.

Что потребуется для работы с книгой

Эта книга в первую очередь ориентирована на версию Bootstrap 4. 
Но в ней также предусматривается поддержка версии 3. Таким образом, она подготовит вас к встрече с любой ситуацией.

О чем рассказывается в этой 
книге

Глава 1, «Начало», знакомит с фреймворком Bootstrap и научит, как 
настроить окружение разработки.
Глава 2, «Создание надежной основы», начинает пример создания 
целевой страницы с применением приемов сеточной верстки.
Глава 3, «Да, в первую очередь для мобильных устройств», рассказывает о принципе разработки в первую для мобильных устройств и 
его реализации.
Глава 4, «Применение стилей Bootstrap», рассматривает применение тем оформления и нескольких элементов Bootstrap.
Глава 5, «Что делает его фантастическим», описывает добавление 
новых элементов Bootstrap в пример целевой страницы.
Глава 6, «Можно ли создать веб-приложение?», рассматривает процесс создания веб-приложения с помощью Bootstrap.
Глава 7, «Конечно можно создать веб-приложение!», посвящена 
созданию страницы веб-приложения с помощью только элементов и 
компонентов Bootstrap.
Глава 8, «Работа с JavaScript», начинает описание использования 
встроенных модулей на JavaScript в примере веб-приложения.
Глава 9, «Введение в продвинутый режим», начинает рассмотрение 
примера панели мониторинга с использованием современных компонентов и плагинов.
Глава 10, «Оживление компонентов», завершает пример панели мониторинга, охватывая окончательную настройку веб-страницы.
Глава 11, «Переделка на свой лад», содержит заключительный пример, демонстрирующий настройку существующих  и создание новых 
плагинов Bootstrap.

Что потребуется для работы 
с книгой

Для работы с примерами из этой книги вам понадобится веб-браузер, 
предпочтительно Google Chrome, так как именно он был использо

Предисловие

ван при подготовке примеров. Но можно использовать и другие браузеры.
Кроме того, вам потребуются базовые знания HTML, CSS и JavaScript. Несмотря на то, что сначала мы не торопясь пройдемся по этим 
технологиям, знание основных понятий очень поможет вам.
Еще одним плюсом станет знакомство с библиотекой JQuery, 
которая используется фреймворком Bootstrap. Хотя, библиотека 
JQuery будет использована в главе 7, «Конечно можно создать вебприложение!», и на очень простых примерах, навыки работы с JQuery 
будут кстати.

Кому адресована эта книга

Книга «Bootstrap в примерах» адресована программистам, интересующимся возможностями быстрой и адаптивной разработки, в первую 
очередь для мобильных устройств. Bootstrap – один из самых популярных клиентских фреймворков, с большим сообществом, которое 
радо будет принять вас в мир поддержки различных устройств, разрешений, браузеров и готовых компонентов. С помощью этой книги 
вы вступите в него и покажете себя профессионалом.

Соглашения

В этой книге используется несколько разных стилей оформления 
текста для выделения разных видов информации. Ниже приводятся 
примеры этих стилей и объясняется назначение.
Программный код в тексте, имена таблиц баз данных, имена папок 
и файлов, расширения файлов, пути к каталогам в файловой системе, 
фиктивные адреса URL, пользовательский ввод и ссылки в Twitter 
будут выглядеть так: «Затем, создадим тег <div> с классом .navbarright, чтобы подключить правила CSS и сместить список вправо, 
расположив его в том же месте, где он находился раньше».
Блоки программного кода будут оформляться так:

<html>
<head></head>
<body>Hello World!</body>
</html>

Когда потребуется привлечь ваше внимание к определенному 
фрагменту в блоке программного кода, он будет выделяться жирным 
шрифтом:

Предисловие

<html>
<head></head>
<body>Hello World!</body>
</html>

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

Так будут оформляться предупреждения и важные 
примечания.

Так будут оформляться советы и рекомендации.

Отзывы и пожелания

Мы всегда рады отзывам наших читателей. Расскажите нам, что вы 
думаете об этой книге – что понравилось или может быть не понравилось. Отзывы важны для нас, чтобы выпускать книги, которые будут 
для вас максимально полезны.
Вы можете написать отзыв прямо на нашем сайте www.dmkpress.
com, зайдя на страницу книги и оставить комментарий в разделе «Отзывы и рецензии». Также можно послать письмо главному редактору 
по адресу dmkpress@gmail.com, при этом напишите название книги в 
теме письма. 
Если есть тема, в которой вы квалифицированы, и вы заинтересованы в написании новой книги, заполните форму на нашем сайте по 
адресу http://dmkpress.com/authors/publish_book/ или напишите в 
издательство по адресу dmkpress@gmail.com.

Загрузка исходного кода 
примеров

Загрузить файлы с дополнительной информацией для книг издательства «ДМК Пресс» можно на сайте www.dmkpress.com или www.
дмк.рф в разделе «Читателям – Файлы к книгам».