Bootstrap 5 Группа списка Ссылки и кнопки

Bootstrap 5 предоставляет функцию элементов List Group Links and Buttons, в которой элементы активны и хранятся в виде списка. Группы списков — это гибкий и мощный компонент для отображения серии содержимого. Функция элементов List Group Links and Buttons используется для указания того, что элемент в настоящее время активен, что означает, что это может быть ссылка или кнопка. Ссылку или кнопку можно сделать активной или отключить.

Список групповых ссылок и классов кнопок:

• list-group: этот класс используется для создания списка Bootstrap.
• list-group-item: этот класс используется для указания и добавления элементов в список.
• list-group-item-action: этот класс используется для указания элемента, установленного в действии.
• active: этот класс используется для того, чтобы элементы списка отображались активными.
• disabled: этот класс используется для того, чтобы элементы списка отображались отключенными.

Синтаксис:

// Anchor tag to specify link items
<div class="list-group">
    <a href="..." class="list-group-item 
        list-group-item-action active">...</a>
    ...
</div>

// Button tag to specify button items
<div class="list-group">
    <button type="button" class="list-group-item l
        ist-group-item-action active">...</button>
    ...
</div>

Примечание. Вместо использования класса «disabled» с <button> вы можете использовать атрибут disabled, атрибут disabled не поддерживается <a>.

Пример 1. В следующем коде демонстрируются элементы List Group Link с использованием свойств List Group Links и Buttons Item.

Выход:

Пример 2. Следующий код демонстрирует элементы кнопки группы списка с использованием свойств элементов списка и ссылок группы списка.

Выход:

Ссылка: https://getbootstrap.com/docs/5.0/components/list-group/#links-and-buttons