эффективная разработка веб‐сайтов. Bootstrap

E-Book Overview

Учебное пособие. — СПб: Университет ИТМО, 2015.– 71 с.Учебное пособие предназначено как для начинающих разработчиков, так и для специалистов, уже занимающихся разработкой Web?сайтов. В курсе «Эффективная разработка веб?сайтов. Bootstrap» подробно рассмотрена работа с фреймворком Bootstrap. Bootstrap на данный момент является самым распространенным фреймворком для проектирования веб?приложений. Он пользуются популярностью не только у разработчиков сайтов, но и у заказчиков, которые убедившись в его надежности, отдают ему предпочтение при создании новых проектов. Разработчики оценили скорость веб?разработки, которая значительно увеличивается при использовании Bootstrap, так как большинство элементов, которые требуются при создании веб?приложений, уже готовы и адаптированы для различных браузеров. Учебное пособие используется при изучении дисциплины «Языки разработки приложений для Web» магистерских программ «Web?технологии» и «Компьютерная графика и Web?дизайн» в рамках направления подготовки 09.04.02 «Информационные системы и технологии». Пособие предназначено для тех учащихся, которые не имеют доступ к специальным учебным файлам (ресурсам), размещенным в аудиториях Университета ИТМО или в центре дистанционного обучения Академии методов и техники управления (ЛИМТУ) — de.ifmo-online.ru.Содержание <strong>Введение Bootstrap О курсе Начало работы Поддержка браузеров и мобильных устройств Поддерживаемые браузеры <strong>Модульная сетка Первоначальные настройки HTML5 Первая мобильная версия Шрифты и ссылки Сброс настроек Контейнеры Модульная сетка Медиа запросы Варианты сетки Средняя сетка Сетка для мобильных устройств и компьютеров Сетка для мобильных устройств, планшетов и компьютеров Перенос модулей Отступы модулей Вложенные модули Порядок расположения модулей Управление просмотром модулей Управление печатью модулей <strong>Практические задания к теме: Создание фиксированной модульной сетки Создание сетки для мобильных устройств Создание сетки с отступами Работа с порядком расположения модулей <strong>Самостоятельные задания к теме: Создание резиновой модульной сетки Создание резиновой модульной сетки <strong>Текст, код, таблица Работа с текстом Использование строчных элементов Заголовки Выравнивание текста Трансформация текста Аббревиатура и акроним Адреса Цитаты Списки Оформление кода в тексте Таблицы Базовая таблица Таблица с выделенными строками Таблица с границами Динамическое выделение строк Оформление строк таблиц Адаптивная таблица <strong>Практические задания к теме: Работа со строчными элементами Работа с заголовками <strong>Самостоятельные задания к теме: Работа с текстом Создание таблицы <strong>Формы, кнопки, изображения Формы Базовые настройки Встроенная форма Горизонтальные формы Поддерживаемые элементы управления Элементы уведомлений Размеры элементов форм Дополнительный текст Кнопки Типы кнопок Размеры кнопок Активная кнопка Кнопки, как ссылки Изображения <strong>Практические задания к теме: Стандартная и встроенная форма Элементы формы Создание элементов уведомлений Создание элементов уведомлений Работа с изображениями <strong>Компоненты Выпадающее меню Кнопки Группировка кнопок Размеры групп кнопок Группы кнопок с выпадающим меню Элементы формы Добавление текста к элементу ввода Добавление кнопок к элементу ввода Кнопки навигации Вкладки Кнопки Панели навигации Элементы ввода и кнопки в панели навигации Текст и ссылки в панели навигации Привязка панели навигации к верхней или нижней части страницы Статичная панель навигации в верхней части страницы Инверти