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