Grup de llista
Els grups de llistes són un component flexible i potent per mostrar una sèrie de contingut. Modifiqueu-los i amplieu-los per admetre gairebé qualsevol contingut.
Exemple bàsic
El grup de llista més bàsic és una llista no ordenada amb elements de llista i les classes adequades. Construeix-hi amb les opcions següents o amb el teu propi CSS segons sigui necessari.
- Un element
- Un segon element
- Un tercer element
- Un quart element
- I un cinquè
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Elements actius
Afegeix .active
a a .list-group-item
per indicar la selecció activa actual.
- Un element actiu
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item active" aria-current="true">An active item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Elements desactivats
Afegeix .disabled
a .list-group-item
a perquè sembli desactivat. Tingueu en compte que alguns elements amb .disabled
també requeriran JavaScript personalitzat per desactivar completament els seus esdeveniments de clic (p. ex., enllaços).
- Un element inhabilitat
- A second item
- A third item
- A fourth item
- And a fifth one
<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Enllaços i botons
Utilitzeu <a>
s o <button>
s per crear elements de grup de llista accionables amb estats de desplaçament, desactivat i actiu afegint .list-group-item-action
. Separem aquestes pseudoclasses per assegurar-nos que els grups de llista fets d'elements no interactius (com ara <li>
s o <div>
s) no proporcionen un clic o un toc.
Assegureu-vos de no utilitzar les .btn
classes estàndard aquí .
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
The current link item
</a>
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
Amb <button>
s, també podeu fer ús de l' disabled
atribut en lloc de la .disabled
classe. Malauradament, <a>
s no admet l'atribut desactivat.
<div class="list-group">
<button type="button" class="list-group-item list-group-item-action active" aria-current="true">
The current button
</button>
<button type="button" class="list-group-item list-group-item-action">A second item</button>
<button type="button" class="list-group-item list-group-item-action">A third button item</button>
<button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
<button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>
Rubor
Afegeix .list-group-flush
per eliminar algunes vores i cantonades arrodonides per representar els elements del grup de la llista de vora a vora en un contenidor principal (p. ex., targetes).
- Un element
- Un segon element
- Un tercer element
- Un quart element
- I un cinquè
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
Numerat
Afegiu la .list-group-numbered
classe modificadora (i, opcionalment, utilitzeu un <ol>
element) per optar als elements del grup de la llista numerada. Els números es generen mitjançant CSS (a diferència de l' <ol>
estil predeterminat d'un navegador) per a una millor col·locació dins dels elements del grup de la llista i per permetre una millor personalització.
Els nombres es generen per counter-reset
a <ol>
, i després s'estilen i es col·loquen amb un ::before
pseudoelement a <li>
amb counter-increment
i content
.
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
També funcionen molt bé amb contingut personalitzat.
-
SubtítolCras justo odio
-
SubtítolCras justo odio
-
SubtítolCras justo odio
<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">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
Cras justo odio
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Horitzontal
Afegeix .list-group-horizontal
per canviar la disposició dels elements del grup de llista de vertical a horitzontal en tots els punts d'interrupció. Alternativament, escolliu una variant responsiva .list-group-horizontal-{sm|md|lg|xl|xxl}
per fer un grup de llista horitzontal començant en el punt d'interrupció d'aquest punt min-width
. Actualment , els grups de llistes horitzontals no es poden combinar amb els grups de llistes envàs.
ProTip: voleu elements de grup de llista d'amplada igual quan siguin horitzontals? Afegeix .flex-fill
a cada element de grup de llista.
- Un element
- Un segon element
- Un tercer element
- Un element
- Un segon element
- Un tercer element
- Un element
- Un segon element
- Un tercer element
- Un element
- Un segon element
- Un tercer element
- Un element
- Un segon element
- Un tercer element
- Un element
- Un segon element
- Un tercer element
<ul class="list-group list-group-horizontal">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xxl">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
Classes contextuals
Utilitzeu classes contextuals per estilitzar els elements de la llista amb un fons i un color amb estat.
- Un element de grup de llista predeterminat senzill
- Un element de grup de llista principal senzill
- Un element de grup de llista secundari senzill
- Un element senzill de grup de llista d'èxits
- Un element de grup de llista de perill senzill
- Un element de grup de llista d'avisos senzill
- Un element senzill de grup de llista d'informació
- Un element de grup de llista de llum senzilla
- Un element de grup de llista fosca senzilla
<ul class="list-group">
<li class="list-group-item">A simple default list group item</li>
<li class="list-group-item list-group-item-primary">A simple primary list group item</li>
<li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
<li class="list-group-item list-group-item-success">A simple success list group item</li>
<li class="list-group-item list-group-item-danger">A simple danger list group item</li>
<li class="list-group-item list-group-item-warning">A simple warning list group item</li>
<li class="list-group-item list-group-item-info">A simple info list group item</li>
<li class="list-group-item list-group-item-light">A simple light list group item</li>
<li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>
Les classes contextuals també funcionen amb .list-group-item-action
. Tingueu en compte l'addició d'estils de flotació aquí no presents a l'exemple anterior. També es recolza l' .active
estat; apliqueu-lo per indicar una selecció activa en un element de grup de llista contextual.
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>
Transmetre significat a les tecnologies d'assistència
L'ús del color per afegir significat només proporciona una indicació visual, que no es transmetrà als usuaris de tecnologies d'assistència, com ara lectors de pantalla. Assegureu-vos que la informació indicada pel color sigui òbvia des del contingut mateix (per exemple, el text visible) o s'inclogui mitjançant mitjans alternatius, com ara text addicional amagat amb la .visually-hidden
classe.
Amb distintius
Afegiu insígnies a qualsevol element del grup de llista per mostrar els recomptes no llegits, l'activitat i més amb l'ajuda d'algunes utilitats .
- Un element de llista14
- Un segon element de la llista2
- Un tercer element de la llista1
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>
Contingut personalitzat
Afegiu gairebé qualsevol HTML dins, fins i tot per a grups de llistes enllaçades com el següent, amb l'ajuda de les utilitats flexbox .
Encapçalament d'elements del grup de llista
fa 3 diesAlgun contingut de marcador de posició en un paràgraf.
I alguna lletra petita.Encapçalament d'elements del grup de llista
fa 3 diesAlgun contingut de marcador de posició en un paràgraf.
I alguna lletra petita silenciada.Encapçalament d'elements del grup de llista
fa 3 diesAlgun contingut de marcador de posició en un paràgraf.
I alguna lletra petita silenciada.<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small>
</a>
</div>
Caselles de selecció i ràdios
Col·loqueu les caselles de selecció i les ràdios de Bootstrap dins dels elements del grup de la llista i personalitzeu-les segons sigui necessari. Podeu utilitzar-los sense <label>
s, però recordeu incloure un aria-label
atribut i un valor per a l'accessibilitat.
- Primera casella de selecció
- Segona casella de selecció
- Tercera casella de selecció
- Quarta casella de selecció
- Cinquena casella de selecció
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
I si voleu <label>
s com .list-group-item
a grans àrees d'èxit, també podeu fer-ho.
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
Sass
Les variables
$list-group-color: $gray-900;
$list-group-bg: $white;
$list-group-border-color: rgba($black, .125);
$list-group-border-width: $border-width;
$list-group-border-radius: $border-radius;
$list-group-item-padding-y: $spacer * .5;
$list-group-item-padding-x: $spacer;
$list-group-item-bg-scale: -80%;
$list-group-item-color-scale: 40%;
$list-group-hover-bg: $gray-100;
$list-group-active-color: $component-active-color;
$list-group-active-bg: $component-active-bg;
$list-group-active-border-color: $list-group-active-bg;
$list-group-disabled-color: $gray-600;
$list-group-disabled-bg: $list-group-bg;
$list-group-action-color: $gray-700;
$list-group-action-hover-color: $list-group-action-color;
$list-group-action-active-color: $body-color;
$list-group-action-active-bg: $gray-200;
Mixins
S'utilitza en combinació amb $theme-colors
per generar les classes de variants contextuals per a .list-group-item
s.
@mixin list-group-item-variant($state, $background, $color) {
.list-group-item-#{$state} {
color: $color;
background-color: $background;
&.list-group-item-action {
&:hover,
&:focus {
color: $color;
background-color: shade-color($background, 10%);
}
&.active {
color: $white;
background-color: $color;
border-color: $color;
}
}
}
}
Bucle
Bucle que genera les classes modificadores amb el list-group-item-variant()
mixin.
// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.
@each $state, $value in $theme-colors {
$list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
$list-group-variant-color: shift-color($value, $list-group-item-color-scale);
@if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
$list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
}
@include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}
Comportament de JavaScript
Utilitzeu el connector de JavaScript de la pestanya (incloeu-lo individualment o mitjançant el bootstrap.js
fitxer compilat) per ampliar el nostre grup de llista i crear panells amb pestanyes de contingut local.
<div class="row">
<div class="col-4">
<div class="list-group" id="list-tab" role="tablist">
<a class="list-group-item list-group-item-action active" id="list-home-list" data-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-settings">Settings</a>
</div>
</div>
<div class="col-8">
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
</div>
</div>
</div>
Ús d'atributs de dades
Podeu activar una navegació per grups de llista sense escriure cap JavaScript simplement especificant data-bs-toggle="list"
o en un element. Utilitzeu aquests atributs de dades a .list-group-item
.
<div role="tabpanel">
<!-- List group -->
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
</div>
Mitjançant JavaScript
Habilita l'element de llista amb tabulació mitjançant JavaScript (cada element de la llista s'ha d'activar individualment):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
Podeu activar un element de llista individual de diverses maneres:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first tab
Efecte esvaït
Per fer que el tauler de pestanyes s'esvaeixi, afegiu -lo .fade
a cadascun .tab-pane
. El primer panell de pestanyes també ha .show
de fer visible el contingut inicial.
<div class="tab-content">
<div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel">...</div>
<div class="tab-pane fade" id="messages" role="tabpanel">...</div>
<div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>
Mètodes
constructor
Activa un element d'element de llista i un contenidor. La pestanya hauria de tenir un node de contenidor data-bs-target
o una href
orientació al DOM.
<div class="list-group" id="myList" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#home" role="tab">Home</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#settings" role="tab">Settings</a>
</div>
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">...</div>
<div class="tab-pane" id="profile" role="tabpanel">...</div>
<div class="tab-pane" id="messages" role="tabpanel">...</div>
<div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>
<script>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
show
Selecciona l'element de la llista donat i mostra el seu panell associat. Qualsevol altre element de la llista que s'hagi seleccionat anteriorment es desactiva i el seu panell associat s'amaga. Torna a la persona que truca abans que s'hagi mostrat realment el panell de pestanyes (per exemple, abans shown.bs.tab
que es produeixi l'esdeveniment).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Destrueix la pestanya d'un element.
getInstance
Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Mètode estàtic que us permet obtenir la instància de la pestanya associada a un element DOM o crear-ne una de nova en cas que no s'hagi inicialitzat
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Esdeveniments
Quan es mostra una pestanya nova, els esdeveniments es desencadenen en l'ordre següent:
hide.bs.tab
(a la pestanya activa actual)show.bs.tab
(a la pestanya per mostrar)hidden.bs.tab
(a la pestanya activa anterior, la mateixa que per a l'hide.bs.tab
esdeveniment)shown.bs.tab
(a la pestanya recentment activa que s'acaba de mostrar, la mateixa que per a l'show.bs.tab
esdeveniment)
Si no hi havia cap pestanya activa, els esdeveniments hide.bs.tab
i hidden.bs.tab
no s'activaran.
Tipus d'esdeveniment | Descripció |
---|---|
show.bs.tab |
Aquest esdeveniment s'activa a la pestanya mostra, però abans que s'hagi mostrat la nova pestanya. Utilitzeu event.target i event.relatedTarget per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament. |
shown.bs.tab |
Aquest esdeveniment s'activa a la mostra de pestanyes després que s'hagi mostrat una pestanya. Utilitzeu event.target i event.relatedTarget per orientar la pestanya activa i la pestanya activa anterior (si està disponible) respectivament. |
hide.bs.tab |
Aquest esdeveniment s'activa quan s'ha de mostrar una pestanya nova (i, per tant, s'ha d'amagar la pestanya activa anterior). Utilitzeu event.target i event.relatedTarget per orientar la pestanya activa actual i la nova pestanya que s'activarà aviat, respectivament. |
hidden.bs.tab |
Aquest esdeveniment s'activa després que es mostri una pestanya nova (i, per tant, s'amaga la pestanya activa anterior). Utilitzeu event.target i event.relatedTarget per orientar la pestanya activa anterior i la nova pestanya activa, respectivament. |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}