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 за понимание и помощь в работе над книгой.