Учебное пособие СанктПетербург 2015 министерство образования и науки российской федерации университет итмо

Название	Учебное пособие СанктПетербург 2015 министерство образования и науки российской федерации университет итмо
Дата	25.12.2020
Размер	0.7 Mb.
Формат файла
Имя файла	2_5215421694256087845.pdf
Тип	Учебное пособие #164087
страница	4 из 4

1 2 3 4

Пример первого заголовка default">New

Пример второго заголовка primary">New

Пример третьего заголовка success">New

Пример четвёртого заголовка info">New

Пример пятого заголовка warning">New

Пример шестого заголовка danger">New

Результат:
Рисунок 5.13 Метки
Значки
Значки создаются с помощью тега span с классом badge. и выглядят, как на рисунке 5.14.
Рисунок 5.13 Значки
Миниатюры
Миниатюры Bootstrap предназначены для размещения и компоновки изображений, видео и текста.
Рассмотрим создание простой миниатюры на примере:

Тема 5. Компоненты
58
Результат:
Рисунок 5.14 Простая миниатюра
Простая миниатюра создаётся внутри тега a с классом thumbnail, внутрь которого размещается изображение.
Можно создавать более сложные миниатюры внедряя в них текст и кнопки, как на примере ниже.

Название изображения

Описание изображения. Синий прямоугольник размером 193 на 200 пикселей.
Кнопка "Да"
Кнопка "Нет"

Результат:

Эффективная разработка веб‐сайтов. Bootstrap
59
Рисунок 5.15 Миниатюра с кнопками и текстом
При создании сложных миниатюр используется не строчный элемент, как в простых, а блочный для которого применяется класс .thumbnail. Для размещения описания миниатюры и дополнительных элементов используется элемент с классом .caption.
Работа с миниатюрами рассматривается в практическом задании 5.4.
Оповещения
Для выделения текста и преобразования его в оповещения используется общий класс .alert и четыре контекстных класса, определяющих внешний вид оповещения. Контекстные классы показаны в примере ниже.

Успех

Информация

Предупреждение

Опасность

Результат
Рисунок 5.16 Оповещения
Внутри оповещения можно добавить ссылки и применить для них класс .alert‐
link, тогда ссылки примут цвет текста оповещения.
Индикаторы состояния
Индикаторы состояния позволяют показывать степень загрузки или состояние рабочего процесса.
Рассмотрим стандартный индикатор состояния на следующем примере:

valuemax="100" >
Завершено на 60%

Результат:
Рисунок 5.16 Простой индикатор
Индикатор размещается внутри блочного элемента с классом .progress.
Сам индикатор определяется блочным элементом с классом .progress‐bar. К

Тема 5. Компоненты
60 элементу с индикатором можно добавить следующие атрибуты:
 aria‐valuemax ‐ устанавливает максимальное значение, которое может быть обеспечено
 aria‐valuemin ‐ устанавливает минимальное значение, которое может быть обеспечено
 aria‐valuenow ‐ устанавливает текущее значение элемента.
 style – определяет степень заполнения индикатора с помощью свойства width.
Внутри элемента индикатора может размещаться текст, который будет отображаться на индикаторе. Если нет необходимости в тексте, то рекомендуется его скрыть с помощью строчного элемента с классом .sr‐only.
Для задания цвета для индикаторов отличного от цвета по умолчанию используются четыре класса: .progress‐bar‐success, .progress‐bar‐info, .progress‐
bar‐warning и .progress‐bar‐danger, которые добавляются к классу .progress‐bar.
Для создания эффекта градиента можно добавить класс .progress‐bar‐striped.
Для добавления эффекта анимации к индикатору с градиентом добавляется класс.active.
Для создания составного индикатора внутри элемента с классом .progress добавляют несколько элементов с классом .progress‐bar.
Объекты мультимедиа
Рассмотрим на примере, как корректно объединять текст с объектами мультимедиа.

Название

Описание объекта мультимедиа

Результат:
Рисунок 5.17 Описание объекта мультимедиа
Описание объекта мультимедиа заключается внутри элемента с классом .media.

Эффективная разработка веб‐сайтов. Bootstrap
61
Сам объект мультимедиа заключается в строчный элемент с .pull‐left или .pull‐
right в зависимости от желаемого расположения слева или справа от описания.
Объекту мультимедиа применяется класс .media‐object. Описание объекта мультимедиа располагается внутри элемента с классом .media‐body, в котором при необходимости добавляется заголовок внутри объекта с классом .media‐
heading.
Группы списков
Группы списков позволяют настраивать и модифицировать списки.
Рассмотрим простую группу списков на следующем примере:

Первый пункт

Третий пункт

Заголовок пункта списка

Описание четвертого пункта списка

Результат:
Рисунок 5.18 Группы списка
Для создания группы списка используется класс .list‐group, который применяется к тегу ul. Внутри тега ul располагаются пункты списка с классом li.
Второй пункт списка создан с помощью тега a с добавлением класса .active для выделения цветом.
Третий пункт списка сделан неактивным с помощью класса .disabled.
В пункт списка можно добавить заголовок с классом .list‐group‐item‐heading и описание пункта списка с классом .list‐group‐item‐text, как это сделано в четвёртом пункте списка.
Для выделения пунктов списка используются четыре дополнительных класса:
.list‐group‐item‐success, .list‐group‐item‐info, . list‐group‐item‐warning и .list‐group‐
item‐danger.

Тема 5. Компоненты
62
Панели
Панели отделяют содержимое рамкой и отступами со всех сторон.
Стандартная панель
Стандартная панель строится на основе блочного элемента с классом .panel и классом .panel‐default, который определяет стандартный вид панели.

Стандартная панель

Панели с заголовком
К панели при необходимости можно добавить заголовок с помощью класса
.panel‐heading. Так же для создания заголовка можно применить любой из тегов заголовков (h1‐h6) с классом . .panel‐title.

Панель с простым заголовком

Содержимое панели

Заголовок панели из тега H3

Содержимое панели

Рисунок 5.18 Панели с заголовком
Для панели так же можно добавить нижний заголовок или футер, используя блочный элемент с классом .panel‐footer.
Оформление панелей
Для оформления панелей существует пять классов: .panel‐primary, .panel‐success,

Эффективная разработка веб‐сайтов. Bootstrap
63
.panel‐info, .panel‐warning и panel‐danger.

...

Тема 5. Компоненты
64
Практические задания к теме 5
Практическое задание 5.1 Работа с группой кнопок
В этой практической работе создаётся группа кнопок, группа кнопок с выпадающим меню и группа кнопок размером с ширину браузера.
Создайте файл «practiceBootstrap5_1.html» и сохраните в папку Bootstrap.
Введите в файл следующий код:

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

Практическое задание 5.2 Работа с элементами формы
В этой практической работе создаются элементы ввода с тексом и кнопками.
Создайте файл «practiceBootstrap5_2.html» и сохраните в папку Bootstrap.
Введите в файл следующий код:

E‐mail

Тема 5. Компоненты
66

E‐mail

@

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

Практическое задание 5.3 Работа с панелью навигации
В этой практической работе создаются панель навигации с элементом ввода, кнопкой, текстом и ссылкой.
Создайте файл «practiceBootstrap5_3.html» и сохраните в папку Bootstrap.
Введите в файл следующий код:

Практическое задание 5.4 Работа с миниатюрами
В этой практической работе создаётся простая и составная миниатюра.
Создайте файл «practiceBootstrap5_4.html» и сохраните в папку Bootstrap.
Введите в файл следующий код: