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.