List group item css

Группы списков

Группы списков — это гибкий и мощный компонент для отображения серии контента. Измените и расширьте их для поддержки практически любого содержимого внутри.

Простой пример

Самая основная группа списков — это неупорядоченный список с элементами списка и соответствующими классами. Развивайте его, используя следующие параметры или собственный CSS, если необходимо.

• Элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• И пятый

ul class="list-group"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> li class="list-group-item">Четвертый элементli> li class="list-group-item">И пятыйli> ul>

Активные элементы

Добавьте .active к .list-group-item , чтобы указать текущий активный выбор.

• Активный элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• И пятый

ul class="list-group"> li class="list-group-item active" aria-current="true">Активный элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> li class="list-group-item">Четвертый элементli> li class="list-group-item">И пятыйli> ul>

Отключенные элементы

Добавьте .disabled к .list-group-item , чтобы он показался отключенным. Обратите внимание, что для некоторых элементов с .disabled также потребуется специальный JavaScript, чтобы полностью отключить их события щелчка (например, ссылки).

• Отключенный элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• И пятый

ul class="list-group"> li class="list-group-item disabled" aria-disabled="true">Отключенный элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> li class="list-group-item">Четвертый элементli> li class="list-group-item">И пятыйli> ul>

Ссылки и кнопки

Обязательно не используйте здесь стандартные классы .btn .

div class="list-group"> a href="#" class="list-group-item list-group-item-action active" aria-current="true"> Текущий элемент ссылка a> a href="#" class="list-group-item list-group-item-action">Второй элемент ссылкаa> a href="#" class="list-group-item list-group-item-action">Третий элемент ссылкаa> a href="#" class="list-group-item list-group-item-action">Четвертый элемент ссылкаa> a class="list-group-item list-group-item-action disabled">Отключенный элемент ссылкаa> div>

С помощью Вы также можете использовать атрибут disabled вместо класса .disabled . К сожалению, не поддерживают атрибут.

Текущая кнопка Второй элемент кнопка Третий элемент кнопка Четвертый элемент кнопка Отключенный элемент кнопка

div class="list-group"> button type="button" class="list-group-item list-group-item-action active" aria-current="true"> Текущая кнопка button> button type="button" class="list-group-item list-group-item-action">Второй элемент кнопкаbutton> button type="button" class="list-group-item list-group-item-action">Третий элемент кнопкаbutton> button type="button" class="list-group-item list-group-item-action">Четвертый элемент кнопкаbutton> button type="button" class="list-group-item list-group-item-action" disabled>Отключенный элемент кнопкаbutton> div>

Поток

Добавьте .list-group-flush , чтобы удалить некоторые границы и закругленные углы для рендеринга элементов группы списков от края до края в родительском контейнере (например, карточки).

• Элемент
• Второй элемент
• Третий элемент
• Четвертый элемент
• И пятый

ul class="list-group list-group-flush"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> li class="list-group-item">Четвертый элементli> li class="list-group-item">И пятыйli> ul>

Пронумерованный

), чтобы выбрать элементы группы нумерованных списков. Числа генерируются с помощью CSS (в отличие от стиля браузера по умолчанию для
) для лучшего размещения внутри элементов группы списков и для лучшей настройки.
, а затем стилируются и помещаются с помощью псевдоэлемента ::before в
с помощью counter-increment и content .

ol class="list-group list-group-numbered"> li class="list-group-item">Элемент спискаli> li class="list-group-item">Элемент спискаli> li class="list-group-item">Элемент спискаli> ol>

Они также отлично работают с настраиваемым контентом.

ol class="list-group list-group-numbered"> li class="list-group-item d-flex justify-content-between align-items-start"> div class="ms-2 me-auto"> div class="fw-bold">Подзаголовокdiv> Контент для элемента списка div> span class="badge bg-primary rounded-pill">14span> li> li class="list-group-item d-flex justify-content-between align-items-start"> div class="ms-2 me-auto"> div class="fw-bold">Подзаголовокdiv> Контент для элемента списка div> span class="badge bg-primary rounded-pill">14span> li> li class="list-group-item d-flex justify-content-between align-items-start"> div class="ms-2 me-auto"> div class="fw-bold">Подзаголовокdiv> Контент для элемента списка div> span class="badge bg-primary rounded-pill">14span> li> ol>

По горизонтали

Добавьте .list-group-horizontal , чтобы изменить расположение элементов группы списков с вертикального на горизонтальное во всех контрольных точках. В качестве альтернативы, выберите адаптивный вариант .list-group-horizontal- , чтобы сделать группу списков горизонтальной, начиная с min-width контрольной точки. В настоящее время группы горизонтального списка нельзя комбинировать с группами скрытого списка.

Совет: Хотите элементы группы списков одинаковой ширины в горизонтальном положении? Добавьте .flex-fill к каждому элементу группы списка.

• Элемент
• Второй элемент
• Третий элемент
• Элемент
• Второй элемент
• Третий элемент
• Элемент
• Второй элемент
• Третий элемент
• Элемент
• Второй элемент
• Третий элемент
• Элемент
• Второй элемент
• Третий элемент
• Элемент
• Второй элемент
• Третий элемент

ul class="list-group list-group-horizontal"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> ul class="list-group list-group-horizontal-sm"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> ul class="list-group list-group-horizontal-md"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> ul class="list-group list-group-horizontal-lg"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> ul class="list-group list-group-horizontal-xl"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul> ul class="list-group list-group-horizontal-xxl"> li class="list-group-item">Элементli> li class="list-group-item">Второй элементli> li class="list-group-item">Третий элементli> ul>

Контекстные классы

Используйте контекстные классы для стилизации элементов списка с фоном и цветом с отслеживанием состояния.

• Простой элемент группы списка по умолчанию
• Простой primary элемент группы списка
• Простой secondary элемент группы списка
• Простой success элемент группы списка
• Простой danger элемент группы списка
• Простой warning элемент группы списка
• Простой info элемент группы списка
• Простой light элемент группы списка
• Простой dark элемент группы списка

ul class="list-group"> li class="list-group-item">Простой элемент группы списка по умолчаниюli> li class="list-group-item list-group-item-primary">Простой primary элемент группы спискаli> li class="list-group-item list-group-item-secondary">Простой secondary элемент группы спискаli> li class="list-group-item list-group-item-success">Простой success элемент группы спискаli> li class="list-group-item list-group-item-danger">Простой danger элемент группы спискаli> li class="list-group-item list-group-item-warning">Простой warning элемент группы спискаli> li class="list-group-item list-group-item-info">Простой info элемент группы спискаli> li class="list-group-item list-group-item-light">Простой light элемент группы спискаli> li class="list-group-item list-group-item-dark">Простой dark элемент группы спискаli> ul>

Контекстные классы также работают с .list-group-item-action . Обратите внимание на добавление стилей наведения, которых не было в предыдущем примере. Также поддерживается состояние .active ; примените его, чтобы указать активный выбор в элементе группы контекстного списка.

div class="list-group"> a href="#" class="list-group-item list-group-item-action">Простой элемент группы списка по умолчаниюa> a href="#" class="list-group-item list-group-item-action list-group-item-primary">Простой primary элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Простой secondary элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-success">Простой success элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-danger">Простой danger элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-warning">Простой warning элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-info">Простой info элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-light">Простой light элемент группы спискаa> a href="#" class="list-group-item list-group-item-action list-group-item-dark">Простой dark элемент группы спискаa> div>

Передача смысла вспомогательным технологиям

Использование цвета для добавления смысла обеспечивает только визуальную индикацию, которая не будет передана пользователям вспомогательных технологий, таких как программы чтения с экрана. Убедитесь, что информация, обозначенная цветом, либо очевидна из самого содержимого (например, видимый текст), либо включена с помощью альтернативных средств, таких как дополнительный текст, скрытый с помощью класса .visually-hidden .

Со значками

Добавьте значки к любому элементу группы списка, чтобы показать количество непрочитанных сообщений, активность и многое другое с помощью некоторых утилит.

ul class="list-group"> li class="list-group-item d-flex justify-content-between align-items-center"> Элемент списка span class="badge bg-primary rounded-pill">14span> li> li class="list-group-item d-flex justify-content-between align-items-center"> Второй элемент списка span class="badge bg-primary rounded-pill">2span> li> li class="list-group-item d-flex justify-content-between align-items-center"> Третий элемент списка span class="badge bg-primary rounded-pill">1span> li> ul>

Пользовательский контент

Добавьте практически любой HTML-код, даже для групп связанных списков, подобных приведенной ниже, с помощью утилит flexbox.

Заголовок элемента группы списка

Некоторый заполнитель в абзаце.

Источник

Читайте также:  Oracle java 8 install centos