Как создать группу списков в Bootstrap 5?

Группа списков — это набор элементов списка, сгруппированных в один компонент. Это один из полезных компонентов Bootstrap 5 для создания навигационных ссылок и пунктов меню на боковой панели. Вы можете иметь различный фон, отображать элементы списка вместе со значком и использовать в качестве ссылки или кнопки. В этом руководстве по группам списков Bootstrap 5 давайте рассмотрим все возможности с примерами и кодом.

Руководство Bootstrap 5 List Group

В этом руководстве рассматриваются следующие темы:

  1. Создание группы списка по умолчанию
  2. Использование тега привязки в группе списка
  3. Добавление кнопок в группу списка
  4. Отображение активных и отключенных элементов
  5. Список групп с разными цветами фона
  6. Добавление значков
  7. Настроить с помощью фона и значка
  8. Вставка HTML-содержимого
  9. Вертикальная группа списка вкладок

1. Группа списка по умолчанию

По умолчанию группа списков создается с помощью тегов

    и

  • . Тег
      должен использовать «.list-group», чтобы указать, что элемент является группой списка, и каждый тег

    • должен использовать «.list-group-item» для обозначения элемента группы списка. По умолчанию каждый элемент списка будет разделен линией-разделителем.
      <ul class="list-group">
      <li class="list-group-item">List Item 1</li>
      <li class="list-group-item">List Item 2</li>
      <li class="list-group-item">List Item 3</li>
      <li class="list-group-item">List Item 4</li>
      </ul>

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

      Группы списков по умолчанию

      2. Использование тега привязки в группе списка

      Использование тега

    • ограничено, поскольку текст не может быть связан. Таким образом, вы можете использовать тег вместо
    • для создания активных ссылок, как показано ниже:
      <div class="list-group">
      <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action">List Item 1 with Anchor Tag</a>
      <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action">List Item 2 with Anchor Tag</a>
      </div>

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

      Список групп с использованием тега привязки

      3. Использование тега кнопки в группе списка

      Подобно тегу привязки, вы также можете использовать тег

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.