Bootstrap в примерах
Прочтя книгу, вы: - научитесь использовать компоненты и элементы Bootstrap, настраивать их для применения в своих проектах; - узнаете о лучших методиках современных клиентских фреймворков и рекомендуемых моделях разработки; - создадите веб-страницы для любого вида устройств; - разработаете подобное Twitter приложение, параллельно узнавая о продвинутых компонентах Bootstrap; - объедините мощь JavaScript и Bootstrap-приложения для увеличения функциональности; - узнаете разницу между версиями Bootstrap; - создадите панель мониторинга веб-приложения с помощью подключаемых модулей Bootstrap на JavaScript; - расширите свои знания о внешних подключаемых модулях Bootstrap, их присоединении и использовании. Когда потребуется привлечь ваше внимание к определенному фрагменту в блоке программного кода, он будет выделяться жирным шрифтом: 13 Предисловие 15 hello World! В том же году значительно расширилась область применения фреймворка, охватив почти все сегменты рынка.
Тем не менее, подразумеваются базовые знания HTML, CSS и JavaScript, приветствуется знакомство с другими фреймворками, например, с JQuery. CDN это аббревиатура от Content Delivery Network Сеть доставки контента термин, определяющий сеть компьютеров, которые совместно обеспечивают доставку контента.
Bootstrap в примерах - Так будут оформляться советы и рекомендации.
ISBN Данная книга содержит различные примеры и пошаговое описание создания различных веб-приложений с помощью клиентского фреймворка Bootstrap. Рассматривается сеточная система, основные компоненты Bootstrap, HTML-элементы и настройка компонентов для адаптивной разработки. Описывается создание мониторинговой панели веб-приложения с помощью продвинутых возможностей Bootstrap, включая настройку компонентов, обработку событий и расширенную интеграцию библиотек. Издание адресовано разработчикам внешних интерфейсов, не знакомым с Bootstrap. Тем не менее, подразумеваются базовые знания HTML, CSS и JavaScript, приветствуется знакомство с другими фреймворками, например, с JQuery. Copyright 2016 Packt Publishing. Russian-language edition copyright 2016 by DMK Press. Любая часть этой книги не может быть воспроизведена в какой бы то ни было форме и какими бы то ни было средствами без письменного разрешения владельцев авторских прав. Материал, изложенный в данной книге, многократно проверен. Но, поскольку вероятность технических ошибок все равно существует, издательство не может гарантировать абсолютную точность и правильность приводимых сведений. В связи с этим издательство не несет ответственности за возможные ошибки, связанные с использованием книги. Copyright 2016 Packt Publishing Оформление, перевод на русский язык, ДМК Пресс, 2017 3 ОГЛАВЛЕНИЕ Об авторе О техническом рецензенте Предисловие О чем рассказывается в этой книге Что потребуется для работы с книгой Кому адресована эта книга Соглашения Отзывы и пожелания Загрузка исходного кода примеров Список опечаток Нарушение авторских прав Вопросы Загрузка цветных изображений для книги Глава 1. Начало Получение Bootstrap Установка фреймворка Структура папок Простой пример Теги, необходимые Bootstrap Создание первого примера с использованием Bootstrap Тег контейнера Необязательность использования CDN Деятельность сообщества Инструменты Bootstrap и веб-приложения Совместимость с браузерами Итоги Глава 2. Создание надежной основы Суть сеточной системы Построение основы... Заголовки повсюду Поиграем с кнопками Подробнее об оформлении и тегах Управление таблицами Стилизация кнопок Как босс! Заключительные соображения Расчет размеров Выравнивание плавающих элементов Метод сlearfix Определение шрифтов для оформления Итоги Глава 3. Да, в первую очередь для мобильных устройств Что делает его великим Bootstrap и разработка в первую очередь для мобильных устройств Отладка для различных областей просмотра в браузере Наведение порядка Создание целевой страницы для разных устройств Мобильные и сверхмалые устройства Планшеты и малые устройства Настольные и большие устройства Итоги Глава 4. Применение стилей Bootstrap Изменение компоновки сетки Начало создания сеточной системы Формирование форм Изображения Вспомогательные классы Итоги Глава 5. Что делает его фантастическим Использование значков в Bootstrap 5 Оглавление 7 Займемся навигацией Свертывание панели навигации Иные способы размещения Цвет навигационной панели Раскрывающееся меню Настройка кнопок с раскрывающимся списком Группировка элементов ввода Готовимся к использованию разметки Flexbox! Основные понятия Flexbox Эксперименты с Bootstrap и Flexbox Итоги Глава 6. Можно ли создать веб-приложение? Что такое веб-приложение Создание структуры кода Добавление навигации Добавление поля ввода для поиска Пришло время создания пунктов меню! Настройка навигационной панели Вам нужен бейдж! Решение проблем навигационной панели И снова сетка Эксперименты с карточками Карточки в Bootstrap Создание собственных карточек Добавление карточки в веб-приложение Карточка с миниатюрами Наполнение содержимым основного раздела Создание ленты Разделение списка сообщений на страницы Создание навигационной цепочки Добавление контента в колонку справа Итоги Глава 7. Конечно можно создать веб-приложение! Сообщения в веб-приложении Отключаемые сообщения Настройка сообщений Индикатор выполнения Параметры индикатора выполнения Анимация индикатора выполнения Создание страницы с настройками Вертикальное навигационное меню 6 8 Оглавление Вкладки в середине Наполнение вкладки с информацией о пользователе Столбец статистики Этикетки и бейджи Итоги Глава 8. Работа с JavaScript Введение в плагины на JavaScript Зависимости Атрибуты данных JavaScript-события в Bootstrap Потрясающая реализация модальности в Bootstrap Общие сведения о модальности и модальный контент Заголовок модальной панели Тело модальной панели Нижний колонтитул модальной панели Создание собственной модальной панели Инструмент для вывода подсказок Парящие над всеми События всплывающих панелей Создание аффикса меню Завершение веб-приложения Итоги Глава 9. Введение в продвинутый режим Общий план Последняя навигационная панель с Flexbox Поиск Меню навигации Просмотр учетной записи Наполнение основного плавающего раздела Боковое вертикальное меню Левое меню отлично смотрится! Плагин сворачивания Использование продвинутых CSS-стилей Добавление основного контента Круговые диаграммы Создание карточки оперативной статистики Радиальная диаграмма Параллельная загрузка Исправление вывода кнопки переключения на мобильных устройствах Итоги 7 Оглавление 9 Глава 10. Оживление компонентов Создание карточек в основном разделе Создание карточки из компонентов Bootstrap Создание последней карточки Исправление неправильного отображения на мобильных устройствах Исправление навигационного меню Оформление списка оповещений Добавление потерянного левого меню Выравнивание круговых диаграмм Знакомство с другими продвинутыми плагинами Использование каруселей Bootstrap Отслеживание прокрутки в Bootstrap Итоги Глава 11. Переделка на свой лад Настройка компонентов Bootstrap Настройка кнопки Использование кнопок-переключателей Кнопки-переключатели в виде флажков Кнопка в качестве радиокнопки Настройка с помощью JavaScript Настройка плагинов Дополнительные плагины Bootstrap Создание плагина Bootstrap Создание основы плагина Определение методов плагина Инициализация и проверка подключаемого модуля Добавление шаблона Bootstrap Создание оригинального шаблона Инициализация оригинального плагина Запуск плагина в работу Добавление методов в плагин Итоги Предметный указатель 8 ОБ АВТОРЕ Сильвио Морето Silvio Moreto , разработчик с более чем 7-летним опытом работы в области веб-технологий, создал множество вебсайтов и веб-приложений с использованием фреймворка Bootstrap. Постоянно применяет Bootstrap для создания простых и сложных страниц. Этот плагин превращает элемент выбора в кнопку Bootstrap с раскрывающимся меню. Сильвио предугадал, что именно такого плагина не хватает фреймворку, и он пригодится другим членам сообщества. Поэтому он создал плагин, а члены сообщества помогают его поддерживать. Кроме того, он очень активный член сообщества разработчиков программ с открытым исходным кодом, принимает участие в работе нескольких общедоступных репозиториев и сообществ взаимопомощи, таких как Stack Overflow. Занял третье место на всемирном ежегодном соревновании Django Dash Прежде всего, я хочу поблагодарить мою жену, поддерживавшую меня на протяжении всего периода работы над книгой. Также хочу сказать спасибо моей собаке, находившейся рядом каждую ночь, когда я писал, и натолкнувшей меня на идеи для нескольких сценариев. Наконец, я хочу выразить признательность редакции издательства Packt за понимание и помощь в работе над книгой. Обучается разработке, читая книги и посещая бесплатные онлайн-курсы. Начала пользоваться Bootstrap четыре года назад и продолжает применять его до сих пор. Паула с увлечением проектирует и разрабатывает красивые и удобные интерфейсы для пользователей по всему миру. Недавно поступила на работу в Amazon. Она всегда рада пообщаться с теми, кто увлечен дизайном или разработкой веб-интерфейсов. Ее работы можно найти на сайте paulabarcante. В 2011 году был выпущен величайший из всех клиентских фреймворков. В том же году значительно расширилась область применения фреймворка, охватив почти все сегменты рынка. Причина проста: представьте, насколько сложно было создать просто красивую кнопку. Для этого требовалось объявить массу классов и стилей. Теперь всем этим занимается фреймворк Bootstrap, созданный разработчиками из Twitter. Он изменил саму парадигму разработки быстро меняющихся веб-интерфейсов. Превосходство Bootstrap основывается на трех аспектах. Первый таблица стилей, содержащая базовую CSS-разметку практически для каждого HTML-элемента, обеспечивающую их единообразный привлекательный вид. Их можно использовать многократно простым копированием и вставкой кода. И последний аспект подключаемые модули, или плагины на JavaScript, позволяющие создавать дополнительные элементы, которые больше нигде нельзя найти. Разобраться в тонкостях клиентского фреймворка Bootstrap вам помогут примеры, демонстрирующие применение каждого элемента и компонента. Ознакомившись с примерами, вы лучшее поймете происходящее и определите свои цели. Примеры, описанные в книге, позволят освоить фреймворк и научиться применять его в наиболее типичных ситуациях. К ним относятся целевые страницы, веб-приложения и панели мониторинга, созданием которых занимаются 10 из 10 веб-разработчиков. Разработчики имеют дело с такого рода страницами постоянно, и с помощью Bootstrap вы сможете сделать их привлекательнее, включить в них компоненты, анимационные эффекты, обработку событий и интеграцию с внешними библиотеками. Мы начнем с основ, но не ограничимся ими и будем двигаться дальше, к полноценному освоению фреймворка. Самостоятельная проработка примеров из книги гарантировано сделает вас мастером Bootstrap. Но в ней также предусматривается поддержка версии 3. Таким образом, она подготовит вас к встрече с любой ситуацией. О чем рассказывается в этой книге Глава 1, «Начало», знакомит с фреймворком Bootstrap и научит, как настроить окружение разработки. Глава 2, «Создание надежной основы», начинает пример создания целевой страницы с применением приемов сеточной верстки. Глава 3, «Да, в первую очередь для мобильных устройств», рассказывает о принципе разработки в первую для мобильных устройств и его реализации. Глава 4, «Применение стилей Bootstrap», рассматривает применение тем оформления и нескольких элементов Bootstrap. Глава 5, «Что делает его фантастическим», описывает добавление новых элементов Bootstrap в пример целевой страницы. Глава 6, «Можно ли создать веб-приложение? », рассматривает процесс создания веб-приложения с помощью Bootstrap. Глава 7, «Конечно можно создать веб-приложение! », посвящена созданию страницы веб-приложения с помощью только элементов и компонентов Bootstrap. Глава 8, «Работа с JavaScript», начинает описание использования встроенных модулей на JavaScript в примере веб-приложения. Глава 9, «Введение в продвинутый режим», начинает рассмотрение примера панели мониторинга с использованием современных компонентов и плагинов. Глава 10, «Оживление компонентов», завершает пример панели мониторинга, охватывая окончательную настройку веб-страницы. Глава 11, «Переделка на свой лад», содержит заключительный пример, демонстрирующий настройку существующих и создание новых плагинов Bootstrap. Что потребуется для работы с книгой Для работы с примерами из этой книги вам понадобится веб-браузер, предпочтительно Google Chrome, так как именно он был использо- 12 14 Предисловие ван при подготовке примеров. Но можно использовать и другие браузеры. Кроме того, вам потребуются базовые знания HTML, CSS и Java- Script. Несмотря на то, что сначала мы не торопясь пройдемся по этим технологиям, знание основных понятий очень поможет вам. Еще одним плюсом станет знакомство с библиотекой JQuery, которая используется фреймворком Bootstrap. Хотя, библиотека JQuery будет использована в главе 7, «Конечно можно создать вебприложение! », и на очень простых примерах, навыки работы с JQuery будут кстати. Кому адресована эта книга Книга «Bootstrap в примерах» адресована программистам, интересующимся возможностями быстрой и адаптивной разработки, в первую очередь для мобильных устройств. Bootstrap один из самых популярных клиентских фреймворков, с большим сообществом, которое радо будет принять вас в мир поддержки различных устройств, разрешений, браузеров и готовых компонентов. С помощью этой книги вы вступите в него и покажете себя профессионалом. Соглашения В этой книге используется несколько разных стилей оформления текста для выделения разных видов информации. Ниже приводятся примеры этих стилей и объясняется назначение. Программный код в тексте, имена таблиц баз данных, имена папок и файлов, расширения файлов, пути к каталогам в файловой системе, фиктивные адреса URL, пользовательский ввод и ссылки в Twitter будут выглядеть так: «Затем, создадим тег с классом. Блоки программного кода будут оформляться так: hello World! Когда потребуется привлечь ваше внимание к определенному фрагменту в блоке программного кода, он будет выделяться жирным шрифтом: 13 Предисловие 15 hello World! Новые термины и важные слова будут выделены жирным. Текст, отображаемый на экране, например в меню или в диалогах, будет оформляться так: «На предыдущем скриншоте показан окончательный вид раздела Features». Так будут оформляться предупреждения и важные примечания. Так будут оформляться советы и рекомендации. Отзывы и пожелания Мы всегда рады отзывам наших читателей. Расскажите нам, что вы думаете об этой книге что понравилось или может быть не понравилось. Отзывы важны для нас, чтобы выпускать книги, которые будут для вас максимально полезны. Вы можете написать отзыв прямо на нашем сайте com, зайдя на страницу книги и оставить комментарий в разделе «Отзывы и рецензии». Также можно послать письмо главному редактору по адресу при этом напишите название книги в теме письма. Если есть тема, в которой вы квалифицированы, и вы заинтересованы в написании новой книги, заполните форму на нашем сайте по адресу или напишите в издательство по адресу Загрузка исходного кода примеров Загрузить файлы с дополнительной информацией для книг издательства «ДМК Пресс» можно на сайте или www. Если вы найдёте ошибку в одной из наших книг возможно, ошибку в тексте или в коде мы будем очень благодарны, если вы сообщите нам о ней. Сделав это, вы избавите других читателей от расстройств и поможете нам улучшить последующие версии этой книги. Если вы найдёте какие-либо ошибки в коде, пожалуйста, сообщите о них главному редактору по адресу и мы исправим это в следующих тиражах. Нарушение авторских прав Пиратство в Интернете по-прежнему остается насущной проблемой. Издательства ДМК Пресс и Packt очень серьезно относится к вопросам защиты авторских прав и лицензирования. Если вы столкнетесь в Интернете с незаконно выполненной копией любой нашей книги, пожалуйста, сообщите нам адрес копии или веб-сайта, чтобы мы могли принять меры. Пожалуйста, свяжитесь с нами по адресу электронной почты со ссылкой на подозрительные материалы. Мы высоко ценим любую помощь по защите наших авторов, и помогающую нам предоставлять вам качественные материалы. Вопросы Вы можете присылать любые вопросы, касающиеся данной книги, по адресу или Мы постараемся разрешить возникшие проблемы. Загрузка цветных изображений для книги Для вас также подготовлен файл в формате PDF с цветными скриншотами, рисунками и диаграммами, использованными в этой книге. Цветные изображения помогут вам отчетливее увидеть разницу в выводе. Начало С появлением и ростом популярности мобильных устройств, разработчики должны были приспособиться к решению новых проблем, таких как использование разных компоновок для разных разрешений, новый подход к работе с пользователем и оптимизация производительности для поддержки соединений с низкой пропускной способностью. При этом, оставалась еще масса старых проблем, связанных с совместимостью браузеров и отсутствием единых шаблонов проектирования. Решение этих проблем и было поставлено во главу угла при проектировании фреймворка Bootstrap. Основной целью разработчиков из Twitter было создание клиентского фреймворка для адаптивной разработки, совместимого с основными браузерами. Веб-разработчики приняли его с восторгом и немедленно начали использовать. Чтобы достичь главной цели этой книги показать приемы использования фреймворка Bootstrap для быстрой разработки адаптивных веб-сайтов, в первую очередь предназначенных для мобильных устройств, необходимо начать с создания рабочего окружения. Поэтому в данной главе мы рассмотрим следующие темы: получение Bootstrap; подключение Bootstrap к веб-странице; создание первого примера с использованием Bootstrap; тег элемента контейнера; источники поддержки; совместимость фреймворка. Получение Bootstrap Существует несколько версий фреймворка, но в этой книге, будет использоваться последняя версия Bootstrap 3 то есть, версия 3. Начало также новейшая версия Bootstrap 4 версия alpha. Когда в книге будут упоминаться элементы или компоненты, по-разному поддерживаемые этими версиями, это будет отмечаться особо. Кроме того, загрузить файлы с примерами кода для этой книги можно с помощью своей учетной записи по адресу: Если вы приобрели эту книгу в другом месте, зарегистрируйтесь на странице и файлы будут высланы вам по электронной почте. Чтобы загрузить файлы, выполните следующие действия: Войдите или зарегистрируйтесь на нашем веб-сайте с помощью вашего адреса электронной почты и пароля. Перейдите на вкладку SUPPORT Поддержка. Введите название книги в поле Search Поиск. Выберите книгу, для которой вы хотите загрузить файлы кодов. Выберите в раскрывающемся меню место, где вы приобрели эту книгу. Щелкните на кнопке Code Download Загрузить код. Перед вами откроется другая страница со следующими кнопками: Download Bootstrap Загрузить Bootstrap : для загрузки скомпилированной версии; 17 Получение Bootstrap 19 Рис Download source Загрузить исходный код : для загрузки исходного кода, который вы сможете изменить и настроить под себя, но для этого потребуется знание языка Less; Download Sass Загрузить код Sass : для загрузки исходного кода на языке Sass. Щелкните на кнопке Download Bootstrap Загрузить Bootstrap , так как мы будем рассматривать использование готового фреймворка, без Sass, только HTML, CSS и JavaScript. После загрузки распакуйте архив, и вы увидите, что фреймворк разбит на отдельные папки. Там же вы найдете информацию о дополнительных возможностях и сведения о событиях в сообществе. Если вы захотите опробовать версию 4, перейдите по адресу: v4-alpha. После извлечения файлов из архива, вы увидите несколько папок. Первой по алфавиту будет папка css. В ней находится главный CSSфайл bootstrap. Начало css, содержащий определение простой темы оформления, используемой компонентами Bootstrap. Имеется также папка fonts с файлами пиктограмм, которые мы рассмотрим в следующих главах. И, наконец, папка js, где можно найти файл bootstrap. Утилита npm популярный диспетчер пакетов для JavaScript. Она используется как диспетчер пакетов по умолчанию в среде Node. Установка фреймворка А теперь, после загрузки фреймворка и знакомства с его структурой, перейдем к подключению Bootstrap в веб-страницах. Структура папок Для начала, поясним структуру папок, которая будет использоваться для примеров в этой книге. Папки Bootstrap содержат файлы шрифтов, CSS и JavaScript. Структура папок фреймворка показана на рис Рис. Откройте файл страницы в текстовом редакторе и добавьте в него следующую разметку HTML: hello World! Hello World Затем внутрь тега head добавьте код для загрузки css-файла: hello World! Hello World И в конце тега body загрузите JavaScript-файл: hello World! В браузере Chrome, это можно сделать, щелкнув на кнопке 20 22 Глава 1. Начало Options Настройки кнопка с пиктограммой бутерброда в правом верхнем углу. Затем выберите в меню пункт More Tools Developer Tools Прочие инструменты Инструменты разработчика , как показано на рис. Вы увидите сообщение Bootstrap s JavaScript requires jquery JavaScript-файлу Bootstrap требуется JQuery , как показано на рис Рис JQuery кросс-платформенная библиотека JavaScript, и это единственная зависимость Bootstrap от сторонних поставщиков. Bootstrap требует версию 1. Можете использовать версию 2. В этой книге будет использоваться версия Скопируйте файл jquery в папку js и добавьте его загрузку его в конце тега body, перед загрузкой файла bootstrap. Они определяют кодировку текста и обеспечивают улучшенное отображение на мобильных устройствах: Тег viewport связан с философией разработки в первую очередь для мобильных устройств. Он гарантирует надлежащее отображение в мобильных устройствах и масштабирование касанием. В этом случае пользователи смогут только прокручивать веб-страницу, как при использовании обычного мобильного приложения. Если вы решили воспользоваться таким тегом, убедитесь, что пользователям не понадобится функция масштабирования и это не затруднит их работу. Пользуйтесь им с осторожностью. Также, если потребуется предусмотреть поддержку старых версий браузера Internet Explorer IE предшествовавших версии 9 , добавьте библиотеки, обеспечивающие обратную совместимость элементов HTML5 и CSS3, посредством CDN, как это рекомендуется в документации к Bootstrap. Для этого вставьте следующие строки в тег : На этом этапе файл должен выглядеть следующим образом: 22 24 Глава 1. Это и есть пример базовой страницы! Сохраните его, поскольку он станет основой для всех примеров в книге и прочих ваших вебстраниц. Вы знаете, что такое CDN? CDN это аббревиатура от Content Delivery Network Сеть доставки контента термин, определяющий сеть компьютеров, которые совместно обеспечивают доставку контента. Задачей CDN является обеспечение высокой надежности и производительности. Следует подчеркнуть, что фреймворк Bootstrap требует наличия тега doctype перед тегом в стиле HTML5:... Замените строку Hello World! Начало Рис Примите поздравления! Вы создали первую страницу с использованием Bootstrap. Это очень простая страница, но здесь важно было понять, как правильно настроить фреймворк. Кроме того, в этот пример были добавлены несколько компонентов, которые будут рассмотрены в следующих главах, но уже сейчас дают вам возможность познакомиться с CSS-классами и размещением элементов. Тег контейнера Наверное вы обратили внимание, что содержимое страницы в этом примере слишком близко расположено к левому краю, без полей и отступов. Так получилось потому, что в пример не был включен обязательный элемент Bootstrap container. Тег container должен обертывать содержимое сайта и вложенную сеточную систему сеточная система будет рассмотрена в следующей главе. Существует два варианта использования элемента контейнера. Первый вариант используется при создании веб-страниц с фиксированной шириной. В этом случае контейнер добавит адаптивные поля, учитывающие ширину области просмотра устройства:... Если нужен контейнер, занимающий всю ширину области просмотра, используйте класс. В нашем примере создается адаптивный веб-сайт с фиксированной шириной. Поэтому его реализация выглядит, как показано ниже: hello World! Bootstrap by Example, Chapter 1 Рис. Я рекомендую для практики и лучшего понимания заменить класс. Начало происшедшие при этом изменения. Измените размеры области просмотра, изменив размеры окна браузера, и посмотрите, как Bootstrap адаптирует отображение страницы: Рис. Обратите внимание на различия в ширине боковых полей. Изучать основы Bootstrap и приемы его использования в веб-страницах мы будем постепенно. Следующий пример наша первая цель разработка целевой страницы. Просто имейте в виду, что во всех примерах будет использована одна и та же основа, представленная в этой главе. Необязательность использования CDN Bootstrap поддерживает возможность загрузки фреймворка из сети CDN. Это наиболее простой вариант установки, но требует определенных пояснений. Загрузка CSS в теге в этом случае должна осуществляться из CDN, как показано ниже: 27 Необязательность использования CDN 29 Рис Аналогично, загрузка JavaScript-файла в теге должна выполняться иначе: Существует разные мнения о том, следует или не следует использовать CDN. Мы не будем вдаваться в обсуждение этого вопроса, но главным доводом «за» является обеспечение высокой доступности. А главный довод «против» заключается в потере прямого контроля над предоставляемым контентом и зависимости от ненадежного импортированного кода. Начало Решение использовать или не использовать CDN зависит от конкретного случая. Нужно рассмотреть разные аргументы и сделать выбор, оптимальный для вашей веб-страницы. Не существует однозначного правильного или неправильно выбора, имеются только различные точки зрения. Деятельность сообщества Обсуждение фреймворка Bootstrap можно найти на нескольких сайтах в Интернете. Важно иметь доступ к заинтересованному обществу, которое занимается развитием фреймворка и его поддержкой. Вы можете получить помощь и узнать больше с помощью, например, следую щих ресурсов: Официальный репозиторий Bootstrap. Одно из лучших средств получения помощи в решении возникших проблем. Поищите вопросы, близкие к вашим, и если вы не найдете готовый ответ, задайте свой вопрос и вы очень быстро получите на него ответ. В Интернете существует множество других подходящих ресурсов. Используйте их с пользой для себя, и вы оцените возможность быстрой разработки, основанной на лучшем современном клиентском фреймворке. Он проверяет дерево DOM на наличие ошибок использования элементов и компонентов Bootstrap. Подключите Bootlint, чтобы избежать ошибок, мешающих разработке. Инструкции по установке и использованию можно найти в репозитории. Bootstrap и веб-приложения Bootstrap один из лучших фреймворков для создания веб-приложений. Он позволяет использовать единый шаблон компоновки для всего веб-приложения. С помощью предварительно подготовленных классов и тем оформления, предоставляемых фреймворком, можно значительно увеличить скорость разработки, обеспечив при этом согласованность элементов. После выхода фреймворка, разработчики Twitter адаптировали под него множество других веб-приложений. Начало Совместимость с браузерами Фреймворк Bootstrap поддерживает самые последние версии популярных браузеров. Однако, в разных браузерах отображаемые элементы не всегда выглядят одинаково, например, в версиях браузеров Chrome и Firefox для Linux. Старые версии Internet Explorer IE не поддерживают некоторых свойств CSS3 и HTML5, используемых фреймворком, поэтому следует учесть это, обеспечивая поддержку этих браузеров. Определить совместимость с браузерами можно по табл. Кроме того, в новой версии 4 фреймворка будет убрана совместимость с некоторыми версиями браузеров. Например, было решено отказаться от поддержки IE8, так как она тормозит добавление новых возможностей, зато теперь Bootstrap получит возможность использовать новые функции CSS. В связи с этим, версия 4 перешла от измерения размеров в пикселях к единицам rem и em, чтобы упростить адаптивность и изменение размеров, но при этом была исключена поддержка ios 6, как следует из табл Таблица 1. Chrome Firefox Internet Explorer Opera Safari Android Есть Есть НЕ ПРИМЕНЯЕТСЯ Нет НЕ ПРИМЕНЯЕТСЯ ios Есть НЕ НЕ ПРИМЕНЯЕТСЯ Нет Есть ios 7+ для v4 ПРИМЕНЯЕТСЯ OS X Есть Есть НЕ ПРИМЕНЯЕТСЯ Есть Есть Windows Есть Есть Есть IE 9+ для v4 Есть Нет Единицы em и rem Единицы em и rem превратились из тенденции в реальность! Они необходимы, поскольку уже присутствуют в наших контекстах, а сейчас стали поддерживаться и Bootstrap. Главная особенность единиц em и rem в том, что они являются относительными единицами, в отличие от пикселей. Причем единица em определена относительно размера родительского шрифта, а единица rem относительно размера корневого элемента, что наилучшим образом подходит для разработки адаптивного контекста. Они являются ключевыми в создании высококачественных веб-сайтов. Углубленное их понимание даст вам огромное преимущество и поможет решать любые задачи в будущем. Целью этой главы было показать рекомендованные настройки фреймворка Bootstrap, размещение тегов, необходимые библиотеки и пример создания очень простой веб-страницы. Помните, что согласованность веб-сайта вот главная особенность Bootstrap, которая сэкономит вам драгоценное время. Кроме того, приступая к работе над новой веб-страницей, удостоверьтесь в правильном размещении основных тегов и компонентов, независимо от того как она создана вручную, из шаблона или как-то еще. Использование фундамента с изъянами повлечет за собой множество проблем. Здесь также было перечислено несколько ресурсов, где можно узнать дополнительную информацию или получить необходимую помощь. Вы стали членом большого открытого сообщества, на которое всегда можете рассчитывать. А теперь можно переходить к решению практических задач! В следующей главе, будет начата разработка часто встречающегося примера целевой страницы, в которой будут использованы несколько компонентов Bootstrap, HTML-элементы и сеточные системы.
Прочтя книгу, вы:- научитесь использовать компоненты и элементы Bootstrap, настраивать их для применения в своих проектах;- узнаете о лучших методиках современных клиентских фреймворков и рекомендуемых моделях разработки;- создадите веб-страницы для любого вида устройств;- разработаете подобное Twitter приложение, параллельно узнавая о продвинутых компонентах Bootstrap;- объедините мощь JavaScript и Bootstrap-приложения для увеличения функциональности;- узнаете разницу между версиями Bootstrap;- создадите панель мониторинга веб-приложения с помощью подключаемых модулей Bootstrap на JavaScript;- расширите свои знания о внешних подключаемых модулях Bootstrap, их присоединении и использовании. Не зря выход книги сопровождался таким бурным обсуждением. Рейтинг книги составляет 1. Данная книга содержит различные примеры и пошаговое описание создания различных веб-приложений с помощью клиентского фреймворка Bootstrap, тем не менее, подразумеваются базовые знания HTML, CSS и JavaScript, приветствуется знакомство с другими фреймворками, например, с JQuery. Основной целью разработчиков из Twitter было создание клиентского фреймворка для адаптивной разработки, совместимого с основными браузерами. После выхода фреймворка, разработчики Twitter адаптировали под него множество других веб-приложений. Черно-белые иллюстрации в русском печатном издании. Наконец, я хочу выразить признательность редакции издательства Packt за понимание и помощь в работе над книгой.