Как создать группу списков в Bootstrap 5?
Группа списков — это набор элементов списка, сгруппированных в один компонент. Это один из полезных компонентов Bootstrap 5 для создания навигационных ссылок и пунктов меню на боковой панели. Вы можете иметь различный фон, отображать элементы списка вместе со значком и использовать в качестве ссылки или кнопки. В этом руководстве по группам списков Bootstrap 5 давайте рассмотрим все возможности с примерами и кодом.
Руководство Bootstrap 5 List Group
В этом руководстве рассматриваются следующие темы:
- Создание группы списка по умолчанию
- Использование тега привязки в группе списка
- Добавление кнопок в группу списка
- Отображение активных и отключенных элементов
- Список групп с разными цветами фона
- Добавление значков
- Настроить с помощью фона и значка
- Вставка HTML-содержимого
- Вертикальная группа списка вкладок
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. Использование тега кнопки в группе списка
Подобно тегу привязки, вы также можете использовать тег
<div class="list-group"> <button type="button" class="list-group-item list-group-item-action">List Item 1 with Button Tag</button> <button type="button" class="list-group-item list-group-item-action">List Item 1 with Button Tag</button> </div>
И снова результат будет похожим, но разница элементов будет иметь эффект кнопки.
4. Отображение активных и отключенных элементов
Просто добавьте классы «.active» или «.disabled» к любому из элементов группы списка, чтобы сделать его активным или отключенным. Активный элемент будет иметь основной цвет фона, а отключенный элемент будет тусклым, показывая символ остановки курсора при наведении курсора мыши.
<ul class="list-group"> <li class="list-group-item active">Active List Item 1</li> <li class="list-group-item">Normal List Item 2</li> <li class="list-group-item disabled">Disabled List Item 3</li> </ul>
Как объяснено, он должен дать следующие результаты:
5. Группа списков Bootstrap 4 с цветами фона
Всегда смотреть на белый фон будет скучно. Добавьте цвета фона к элементам группы списка с помощью предопределенных классов фона. Например, цвет успеха можно добавить с помощью класса «.list-group-item-success» к требуемому элементу списка.
<div class="list-group"> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action">No Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-success">Success Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-info">Info Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-warning">Warning Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-danger">Danger Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-light">Light Background</a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action list-group-item-dark">Dark Background</a> </div>
Результат будет выглядеть в браузере, как показано ниже:
6. Группа списков Bootstrap 4 со значками
Мы объяснили компонент значка в предыдущем руководстве. Показывать значки напротив элементов группы списков легко, используя дополнительный тег с классами значков. Это наиболее часто используется на панелях администратора для отображения напоминаний.
<ul class="list-group"> <li class="list-group-item justify-content-between">Open Tickets <span class="badge badge-danger badge-pill">20</span> </li> <li class="list-group-item justify-content-between">Closed Tickets <span class="badge badge-success badge-pill">50</span> </li> <li class="list-group-item justify-content-between">Solved Tickets <span class="badge badge-secondary badge-pill">10</span> </li> <li class="list-group-item justify-content-between">Work In Progress Tickets <span class="badge badge-info badge-pill">6</span> </li> <li class="list-group-item justify-content-between">Ticket In Assigned Status <span class="badge badge-warning badge-pill">16</span> <li class="list-group-item justify-content-between">Some Primary Badge <span class="badge badge-primary badge-pill">10</span> <li class="list-group-item justify-content-between">Some Light Badge <span class="badge badge-light badge-pill">26</span> <li class="list-group-item justify-content-between">Some Dark Badge <span class="badge badge-dark badge-pill">14</span> </li> </ul>
«.Justify-content-between» используется для выравнивания промежутка между текстом элемента списка и значком. Это даст результат, как показано ниже:
В приведенном выше примере мы использовали элементы группы списков без фона и значки таблеток разного цвета. Вы можете использовать значки по умолчанию или любые собственные цвета с настраиваемым CSS.
7. Список групп с фоном и значком
Цвет фона элемента списка будет светлым при использовании классов фона элементов группы списков, таких как «.list-group-item-success». Вы можете использовать фоновые контекстные классы вместо того, чтобы иметь более темный фон.
<ul class="list-group"> <li class="list-group-item justify-content-between bg-light">Open Tickets <span class="badge badge-danger badge-pill">20</span> </li> <li class="list-group-item justify-content-between bg-warning">Closed Tickets <span class="badge badge-success badge-pill">50</span> </li> <li class="list-group-item justify-content-between bg-success text-white">Solved Tickets <span class="badge badge-secondary badge-pill">10</span> </li> <li class="list-group-item justify-content-between bg-dark text-white">Work In Progress Tickets <span class="badge badge-info badge-pill">6</span> </li> <li class="list-group-item justify-content-between bg-primary text-white">Ticket In Assigned Status <span class="badge badge-success badge-pill">6</span> </li> </ul>
Результат будет выглядеть привлекательно, как показано ниже:
8. Список групп с HTML-контентом
Служебные классы flexbox позволяют добавлять любой тип содержимого HTML внутри компонента группы списков.
<div class="list-group"> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action flex-column align-items-start active"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">This is a heading1</h5> <small>3 days ago</small> </div> <p class="mb-1">Enter any content here.</p> <small>Some small text here.</small> </a> <a href="https://www.webnots.com/bootstrap-list-group-tutorial/#" class="list-group-item list-group-item-action flex-column align-items-start"> <div class="d-flex w-100 justify-content-between"> <h5 class="mb-1">This is a heading2</h5> <small>3 days ago</small> </div> <p class="mb-1">Enter any content here.</p> <small>Some small text here.</small> </a> </div>
Это даст следующий результат:
9. Группа списков Bootstrap 4 с вертикальными вкладками
Также возможно создать содержимое с вкладками, используя группу списков и стандартный JavaScript Bootstrap. Ниже приведен пример кода для создания вкладок с вертикальным выравниванием, и под каждой вкладкой будет отображаться различное содержимое.
<div class="row"> <div class="col-4"> <!-- List group --> <div class="list-group" id="myList" role="tablist"> <a class="list-group-item list-group-item-action active" data-toggle="list" href="https://www.webnots.com/bootstrap-list-group-tutorial/#tab1" role="tab">TAB 1</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#tab2" role="tab">TAB 2</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#tab3" role="tab">TAB 3</a> <a class="list-group-item list-group-item-action" data-toggle="list" href="#tab4" role="tab">TAB 4</a> </div> </div> <div class="col-8"> <!-- Tab panes --> <div class="tab-content"> <div class="tab-pane active" id="tab1" role="tabpanel">Content for tab 1 here...</div> <div class="tab-pane" id="tab2" role="tabpanel"> Tab 2 content goes here...</div> <div class="tab-pane" id="tab3" role="tabpanel">Enter anything for tab 3...</div> <div class="tab-pane" id="tab4" role="tabpanel">Finally tab 4 content is here...</div> </div> </div> </div>
Контент с вертикальными вкладками будет выглядеть следующим образом:
Заключение
Группа списка помогает отобразить список элементов в меньшем пространстве. Вы можете использовать вкладки, ссылки, кнопки и многое другое с группой списков. Мы рекомендуем использовать группу списков на боковой панели вашего сайта, чтобы отображать связанный или популярный контент.
Изучите Bootstrap 5 (Индекс)
- ограничено, поскольку текст не может быть связан. Таким образом, вы можете использовать тег вместо
- должен использовать «.list-group-item» для обозначения элемента группы списка. По умолчанию каждый элемент списка будет разделен линией-разделителем.