Учебное пособие СанктПетербург 2015 министерство образования и науки российской федерации университет итмо
 Скачать 0.7 Mb.
|
Заголовок 1 Полужирный 36pxЗаголовок 2 Полужирный 30pxЗаголовок 3 Полужирный 24pxЗаголовок 4 Полужирный 18pxЭффективная разработка веб‐сайтов. Bootstrap 33 Заголовок 5 Полужирный 14pxЗаголовок 6 Полужирный 12pxЗаголовки, заданные через класс Заголовок 1 .h1 >Заголовок 2 .h2 Заголовок 3 .h3 Заголовок 4 .h4 Заголовок 5 .h5 Заголовок 6 .h6 Тема 3. Текст, код, таблица 34 Самостоятельные задания к теме 3 Самостоятельное задание 3.1 Работа с текстом Создайте файл «independentBootstrap3_1.html» и сохраните в папку Bootstrap. Оформите текст, как на рисунке ниже. Самостоятельное задание 3.2 Создание таблицы Создайте файл «independentBootstrap3_2.html» и сохраните в папку Bootstrap. Создайте адаптивную таблицу, как на рисунке ниже. Эффективная разработка веб‐сайтов. Bootstrap 35 Тема 4. Формы, кнопки, изображения Формы Базовые настройки Все основные элементы формы при использовании Bootstrap получают единое оформление. Ширина элементов ввода, таких как , Предназначен для большого количества те Для указания используется атрибут ro Флажки Для создания фл расположенных на строке используется .checkbox‐inline к тегу la Переключатели disabled"> Для со переключателей, расположенных на строке используется .radio‐inline к тегу label. Меню выбора Для отображения неск вариантов одновре используется атрибут m тега selection. Элементы формы рассматриваются в практическом задании 4.2 Элементы уведомлений Bootstrap содержит три типа полей уведомлений: уведомление об успешном вводе, о вводе с предупреждением и уведомление о вводе с ошибкой. Для создания уведомления об успешном вводе следует применить класс .has‐ success к материнскому элементу формы с классом .control‐label или .form‐ control. Тема 4. Формы, кнопки, изображения 38 Например: Для создания элемента о вводе с предупреждением следует применить класс .has‐warning к материнскому элементу формы с классом .control‐label или .form‐control. Например: Для создания элемента о вводе с ошибкой следует применить класс .has‐error к материнскому элементу формы с классом .control‐label или .form‐control. Например: Внешний вид элементов управления показан на рисунке 4.1. Рисунок 4.1 Элементы управления Так же можно добавить к полям уведомлений значки. Для этого следует добавить класс .has‐feedback к классу уведомлений и описание иконки, как показано ниже: Эффективная разработка веб‐сайтов. Bootstrap 39 Описание иконки успешного ввода выглядит так: Описание иконки с предупреждением выглядит так: Описание иконки с ошибкой выглядит так: В результате поля уведомлений будут выглядеть как на рисунке 4.2. Рисунок 4.2 Иконки уведомлений Размеры элементов форм Для указания высоты элемента используются классы .input‐lg и .input‐sm. Дополнительный текст Для создания дополнительного текста, распологающегося ниже элемента формы, используется тег span c классом . help‐block. Этот элемент формы предупреждения с иконкой и установленной шириной col‐sm‐5 Тема 4. Формы, кнопки, изображения 40 Создание элементов уведомлений рассматривается в практическом задании 4.3 Кнопки Типы кнопок Bootstrap позволяет создавать семь видов кнопок, все они представлены в таблице 4.2. Для создания кнопки Bootstrap к тегу button с типом button добавляется класс btn, который определяет кнопку Bootstrap и дополнительный класс, определяющий тип кнопки. Например, простая кнопка прописывается так: Таблица 4.2 Кнопки Bootstrap Тип кнопки Вид кнопки Код Простая кнопка Основная Успех Информация Предупреждение Опасность Ссылка Размеры кнопок К любому из типов кнопок можно добавить один из трёх классов, определяющих размер кнопки. Самую большую кнопку определяет класс .btn‐ lg, далее следует кнопка по умолчанию, маленькую кнопку задаёт класс .btn‐sm, а самую маленькую класс .btn‐xs. Например: На рисунке 4.3 показаны все размеры кнопок. Эффективная разработка веб‐сайтов. Bootstrap 41 Рисунок 4.3 Размеры кнопок Для создания кнопки по ширине равной родительскому элементу используется класс .btn‐block. Активная кнопка Для создания активной кнопки любого типа следует добавить класс active. Например: Активные кнопки показаны на рисунке 4.4. Рисунок 4.4 Активные кнопки Кнопки, как ссылки Для создания кнопок‐ссылок следует использовать тег <а> и добавить к нему классы, такие же, как и к тегу button. Например: Основная кнопка Создание кнопок рассматривается в практическом задании 4.4 Изображения Для управления внешним видом изображений в Bootstrap предназначены три класса: img‐rounded ‐ задаёт закругление углов изображения img‐circle – создаёт круглую маску на изображении img‐thumbnail – задаёт рамку вокруг изображения Например: В результате изображения будут выглядеть, как на рисунке 4.4 Рисунок 4.5 Изображения Bootstrap Тема 4. Формы, кнопки, изображения 42 Для создания адаптивного изображения, подстраивающегося под размер родительского блока, используется класс img‐responsive. В результате использования этого класса к изображению применяются свойства max‐width: 100%; и height: auto;, что приводит к масштабированию изображения. Работа с изображениями рассматривается в практическом задании 4.5 Эффективная разработка веб‐сайтов. Bootstrap 43 Практические задания к теме 4 Практическое задание 4.1 Стандартная и встроенная форма В этой практической работе создаётся стандартная и встроенная формы. Создайте файл «practiceBootstrap4_1.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Практическое задание 4.2 Элементы формы В этой практической работе рассмотрены элементы формы. Создайте файл «practiceBootstrap4_2.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Практическое задание 4.3 Создание элементов уведомлений В этой практической работе рассмотрено создание элементов уведомлений. Создайте файл «practiceBootstrap4_3.html» и сохраните в папку Bootstrap. Тема 4. Формы, кнопки, изображения 46 Введите в файл следующий код: Практическое задание 4.4 Создание элементов уведомлений В этой практической работе рассмотрено создание кнопок. Создайте файл «practiceBootstrap4_4.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Типы кнопокЭффективная разработка веб‐сайтов. Bootstrap 47 Размеры кнопокАктивные кнопкиПрактическое задание 4.5 Работа с изображениями В этой практической работе рассмотрена работа с изображениями. Создайте файл «practiceBootstrap4_5.html» и сохраните в папку Bootstrap. Введите в файл следующий код: Тема 5. Компоненты 48 Тема 5. Компоненты Выпадающее меню Рассмотрим создание выпадающего меню на основе следующего примера:
Результат, показан на рисунке 5.1: Рисунок 5.1 Выпадающее меню Все меню должно быть заключено в элемент с классом .dropdown или в элемент с относительным позиционированием position: relative;. С помощью тега button создадим элемент, при нажатии на который будет активизироваться выпадающее меню. Для создания эффекта выпадения используется запись data‐toggle="dropdown", которая ссылается на JavaScript, использование которого рассматривается в следующих темах. Для размещения пиктограммы стрелки рядом с надписью меню используется пустой тег span с Эффективная разработка веб‐сайтов. Bootstrap 49 классом .caret. Само меню строится на основе тегов маркированного списка ul и li. Меню начинается с тега ul, для которого применяется класс . dropdown‐menu. При необходимости можно создать заголовок раздела меню, используя тег li с классом dropdown‐header. Сами пункты меню создаются с помощью тега li и вложенного тега a. При необходимости можно разделить пункты меню, используя тег li с классом divider, в этом случае появится разделитель, как между 3 и 4 пунктом меню в примере. Если нужно создать неактивный пункт меню, то следует применить класс disabled для тега li. Кнопки В этой теме рассматриваются дополнительные возможности по управлению кнопками. Создание кнопок было рассмотрено в предыдущей теме. Группировка кнопок Для размещения кнопок в группе следует разместить их в элементе с классом btn‐group, как показано на примере ниже. При группировке кнопок расстояние между кнопками исчезает. На рисунке 5.2 показаны справа несгруппированные кнопки и слева кнопки в группе. Так же видно, что у группы кнопок единая граница, а у отдельных кнопок своя отдельная граница. Рисунок 5.2 Группировка кнопок Так же можно создать панель кнопок состоящую из групп кнопок, для этого группы кнопок следует разместить внутри элемента с классом btn‐toolbar. Размеры групп кнопок Для указания размеров групп кнопок к классу btn‐group следует добавить один из трёх классов, определяющих размер группы: btn‐group‐lg – большой размер кнопок группы btn‐group‐sm – малый размер кнопок группы btn‐group‐sx – самый малый размер кнопок группы Размеры групп кнопок показаны на рисунке 5.3. Тема 5. Компоненты 50 Рисунок 5.3 Размеры групп кнопок Группы кнопок с выпадающим меню В группу кнопок можно добавить выпадающее меню. Рассмотрим создание группы кнопок с выпадающим меню на следующем примере:
Результат: Рисунок 5.4 Группа кнопок с выпадающим меню В примере создана группа кнопок из двух кнопок и вложенной группы кнопок, которая и будет выпадающим меню. Внутри группы кнопок создана кнопка с классом dropdown‐toggle, который определяет эту кнопку, как кнопку, активизирующую выпадающее меню. Для функционирования, выпадающего меню следует применить data‐toggle="dropdown" для кнопки. После кнопки объявлен маркированный список, определяющий пункты меню. Для выравнивания группы кнопок по вертикали следует указать класс btn‐group‐ vertical вместо btn‐group. Для расположения кнопок по всей ширине окна браузера к классу btn‐group следует добавить класс btn‐group‐justified. Работа с кнопками рассматривается в практическом задании 5.1 Эффективная разработка веб‐сайтов. Bootstrap 51 Элементы формы В этой теме рассматриваются дополнительные возможности по созданию элементов форм. Создание элементов формы было рассмотрено в предыдущей теме. Добавление текста к элементу ввода Текст к элементу ввода можно разместить слева, справа или одновременно слева и справа от элемента. Для добавления текста к элементу формы сперва следует создать группу, используя класс input‐group в которую следует разместить элемент формы и текст. Текст следует расположить в строчном элементе, например в теге span, и добавить к нему класс input‐group‐addon. Текст можно располагать до или после элемента, а так же с обеих сторон. Например: E‐mail @ Помимо текста к элементам ввода можно присоединять флажки и переключатели. Для этого в строчный элемент с классом input‐group‐addon следует разместить флажок или переключатель. Для указания размеров элементов форм используются два класса input‐group‐lg и input‐group‐sm, которые применяются совместно с input‐group. Добавление кнопок к элементу ввода Рассмотрим добавление кнопок к элементу ввода на следующем примере: Результат: Рисунок 5.5 Элемент ввода с кнопкой Для добавления кнопки к элементу ввода, так же следует сгруппировать элемент ввода и кнопку с помощью элемента с классом input‐group. Кнопку можно разместить до или после элемента ввода, предварительно разместив её Тема 5. Компоненты 52 внутри строчного элемента с классом input‐group‐btn. Для создания кнопки с выпадающим меню рассмотрим следующий пример:
Результата: Рисунок 5.6 Элемент ввода с выпадающим меню Внутри элемента с классом input‐group создан элемент с классом input‐group‐ btn, определяющий выпадающее меню. Кнопка с классом btn btn‐default dropdown‐toggle определяет копку выпадающего меню, к которой применён атрибут data‐toggle="dropdown", определяющий действие раскрытия меню. С помощью строчного элемента с классом caret к тексту кнопки добавляется символ стрелки. Далее следует описание маркированного списка с пунктами, определяющими пункты выпадающего меню. Работа с элементами ввода рассматривается в практическом задании 5.2 Кнопки навигации Все типы кнопок навигации Bootstrap имеют схожую разметку и заключены в маркированный список с классом .nav. Для изменения типа кнопок навигации используются дополнительные классы, которые и определяют внешний вид кнопок. В этой теме рассматривается создание вкладок, их функционирование рассматривается в следующей теме, посвящённой JavaScript. Вкладки Для создания кнопок навигации в виде вкладок к классу .nav следует добавить Эффективная разработка веб‐сайтов. Bootstrap 53 класс .nav‐tabs. Например:
Результат: Рисунок 5.7 Навигация из вкладок Обратите внимание на класс .active, который выделяет вынося на передний план вкладку и класс .disabled, который делает вкладку неактивной, выделяя её серым цветом и изменяя курсор при наведении (рисунок 5.7). Кнопки Для создания навигации в виде кнопок используется маркированный список, для которого помимо класса .nav добавляется класс nav‐pills. Например:
Результат: Рисунок 5.8 Навигация из кнопок Как показано на рисунке 5.8 панель из кнопок создаётся аналогично панели из выкладок и к ней так же можно применять классы .active и .disabled. Для размещения кнопок вертикально следует добавить класс .nav‐stacked. Для распределения кнопок навигации по ширине нужно добавить класс .nav‐ justified. При экранах с шириной менее 768px кнопки выравниваются вертикально. В навигацию из кнопок и вкладок можно внедрять выпадающие меню, просто добавляя их внутрь класса .nav. Панели навигации В панели навигации можно добавлять элементы форм, кнопки, текст, ссылки. Элементы ввода и кнопки в панели навигации Тема 5. Компоненты 54 Рассмотрим создание панели навигации с полем ввода на следующем примере: Результат: Рисунок 5.9 Навигация с формой Навигация с элементом ввода размещается внутри тега form, к которому применяется класс . navbar‐form. Класс .navbar‐form определяет вертикальное выравнивание на больших экранах и сжатие на узких экранах. С помощью класса .navbar‐left навигация выравнивается по левому краю модульного блока в котором находится, так же можно использовать класс .navbar‐right для выравнивания по правому караю модуля. Далее создаётся группа элементов форм с помощью блочного элемента с классом form‐group, внутри которого располагается элемент формы. При необходимости, после блочного элемента, можно расположить кнопку. Текст и ссылки в панели навигации Рассмотрим размещение текста и ссылок на следующем примере: Вы вошли как Иван Иванов Результат: Рисунок 5.9 Панель навигации с текстом и ссылками Для создания навигации с текстом используется блочный элемент с классом .navbar‐text и при необходимости класс, определяющий положения относительно модуля navbar‐right или navbar‐left. Для создания ссылки внутри навигационной панели для ссылки следует применить класс . navbar‐link. Привязка панели навигации к верхней или нижней части страницы. Для размещения панели навигации в верхней части страницы используется класс . navbar‐fixed‐top. Для размещения панели навигации в нижней части страницы используется класс . navbar‐fixed‐bottom. Например: Эффективная разработка веб‐сайтов. Bootstrap 55 Статичная панель навигации в верхней части страницы Для фиксирования панели навигации в верхней части страницы используется класс . navbar‐static‐top. Например: Инвертирование оформления навигации Для инвертирования цветового оформления навигационной панели используется класс .navbar‐inverse. Работа с панелью навигации в практическом задании 5.3. Цепочка навигации Для создания цепочки навигации, как показано на рисунке 5.10, используется класс breadcrumb, основанный на стилях CSS :before и content.
Рисунок 5.10 Цепочка навигаций Навигация по страницам Стандартная навигация по страницам выглядит, как показано на рисунке 5.11 и описывается следующим образом: Тема 5. Компоненты 56 Рисунок 5.11 Простая навигация по страницам Рассмотрим подробнее пример, расположенный выше. Простая навигация по страницам строится на основе маркированного списка и определяется классом .pagination. Номера страниц определяются пунктами списка, к которым можно применять класс .disabled для имитации блокированного элемента и класс .active для оформления пункта, как активного. Навигация по страницам может иметь два дополнительных размера, которые определяются классами pagination‐lg и pagination‐sm, которые включаются дополнительно к классу .pagination тега ul. Последовательная навигация по страницам Модуль последовательной навигации по страницам описывается, как в следующем примере:
Результат: Рисунок 5.12 Последовательная навигация Для создания последовательной навигации используется маркированный список с классом .pager. При необходимости разнести кнопки в разные стороны (Рисунок 5.12), для пунктов списка применяются классы .previous и .next. Для имитации блокировки кнопки используется класс .disabled. Метки Метки можно добавлять к любому тексту для акцентирования внимания. Метки задаются с помощью класса .label, их внешний вид определяется специальными классами с помощью дополнительных классов, как показано в примере: |