Bootstrap в примерах (2000,00 руб.)

Стр.5

Стр.6

Стр.7

Стр.8

Стр.9

Стр.10

УДК 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 (англ.) ISBN 978-5-97060-423-6 (рус.) Copyright © 2016 Packt Publishing © Оформление, перевод на русский язык, ДМК Пресс, 2017

Стр.5

ОГЛАВЛЕНИЕ Об авторе ........................................................ 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

Стр.6

6 Оглавление Настройка ............................................................................................. 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

Стр.7

Оглавление 7 Займемся навигацией ................................................................. 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

Стр.8

8 Оглавление Вкладки в середине ............................................................................ 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

Стр.9

Оглавление 9 Глава 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

Стр.10