Список определений

Создавайте красивые списки определений (описаний) с разными стилями.

Применение

Для создания Description list не требуется класс компонента, но UIkit 2 предоставляет несколько классов-модификаторов для отображения списка в определенном стиле.

Примечание Модификаторы компонента Description list не сочетаются друг с другом.

Горизонтальный список описания

Добавьте класс .uk-description-list-horizontal для отображения терминов и описаний рядом друг с другом, горизонтально.

Пример

Термин А: Описание термина А. Проснувшись однажды утром после беспокойного сна, Грегор Замза обнаружил, что он у себя в постели.
Термин Б: Описание термина Б. Лежа на панцирнотвердой спине, он видел, стоило ему приподнять голову, свой коричневый.
Тег <dl>: Список описания с терминами и описаниями, используется вместе с <dt> (определяет определяемый термин) и <dd> (описывает каждый термин).

Разметка

<dl class="uk-description-list-horizontal">
    <dt>Термин</dt>
    <dd>Определение термина</dd>
</dl>

Отзывчивое поведение

Примечание На более мелких девайсах, таких как телефоны, стиль изменится обратно на список описаний по умолчанию.

Вертикальный список описания

Добавьте класс .uk-description-list-line, чтобы выровнять элементы списка определений в линию.

Пример

Тег <dl>: Список описания с терминами и описаниями, используется вместе с тегами <dt> и <dd>.
Тег <dt>: Определяет термин / имя в списке описания. Используется вместе с тегами <dl> и <dd>.
Тег <dd>: Используется для описания термина / имени в списке описания. Используется вместе с тегами <dl> и <dt>.

Разметка

<dl class="uk-description-list-line">
    <dt>Термин</dt>
    <dd>Описание термина</dd>
</dl>