Listegruppe
Listegrupper er en fleksibel og kraftfuld komponent til at vise en række indhold. Rediger og udvid dem til at understøtte stort set alt indhold indeni.
Grundlæggende eksempel
Den mest grundlæggende listegruppe er en uordnet liste med listeelementer og de rigtige klasser. Byg videre på det med de muligheder, der følger, eller med din egen CSS efter behov.
- En genstand
- En anden genstand
- Et tredje punkt
- Et fjerde punkt
- Og en femte
<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>
Aktive genstande
Tilføj .active
til a .list-group-item
for at angive det aktuelle aktive valg.
- Et aktivt element
- En anden genstand
- Et tredje punkt
- Et fjerde punkt
- Og en femte
<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>
Deaktiverede varer
Tilføj .disabled
til en .list-group-item
for at få den til at se deaktiveret ud. Bemærk, at nogle elementer med .disabled
også vil kræve tilpasset JavaScript for fuldt ud at deaktivere deres klikhændelser (f.eks. links).
- En deaktiveret genstand
- En anden genstand
- Et tredje punkt
- Et fjerde punkt
- Og en femte
<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>
Links og knapper
Brug <a>
s eller <button>
s til at oprette handlingsbare listegruppeelementer med svævende, deaktiveret og aktive tilstande ved at tilføje .list-group-item-action
. Vi adskiller disse pseudoklasser for at sikre, at listegrupper lavet af ikke-interaktive elementer (som <li>
s eller <div>
s) ikke giver et klik eller tryk.
Sørg for ikke at bruge standardklasserne .btn
her .
<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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
Med <button>
s kan du også gøre brug af disabled
attributten i stedet for .disabled
klassen. Desværre <a>
understøtter s ikke attributten deaktiveret.
<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>
Flush
Tilføj .list-group-flush
for at fjerne nogle kanter og afrundede hjørner for at gengive listegruppeelementer kant-til-kant i en overordnet container (f.eks. kort).
- En genstand
- En anden genstand
- Et tredje punkt
- Et fjerde punkt
- Og en femte
<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>
Nummereret
Tilføj .list-group-numbered
modifikatorklassen (og brug eventuelt et <ol>
element) for at tilmelde dig nummererede listegruppeelementer. Numre genereres via CSS (i modsætning til en <ol>
standardbrowserstil) for bedre placering i listegruppeelementer og for at give mulighed for bedre tilpasning.
Tal genereres af counter-reset
på <ol>
, og derefter styles og placeres med et ::before
pseudo-element på <li>
med counter-increment
og content
.
- Et listeelement
- Et listeelement
- Et listeelement
<ol class="list-group list-group-numbered">
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
<li class="list-group-item">A list item</li>
</ol>
Disse fungerer også godt med tilpasset indhold.
-
UnderoverskriftIndhold til listeelement
-
UnderoverskriftIndhold til listeelement
-
UnderoverskriftIndhold til listeelement
<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>
Content for list item
</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>
Content for list item
</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>
Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
</ol>
Vandret
Tilføj .list-group-horizontal
for at ændre layoutet af listegruppeelementer fra lodret til vandret på tværs af alle brudpunkter. Alternativt kan du vælge en responsiv variant .list-group-horizontal-{sm|md|lg|xl|xxl}
for at gøre en listegruppe vandret, der starter ved det pågældende brudpunkt min-width
. I øjeblikket kan horisontale listegrupper ikke kombineres med flush-listegrupper.
ProTip: Vil du have samme bredde listegruppeelementer, når de er vandrette? Tilføj .flex-fill
til hvert listegruppeelement.
- En genstand
- En anden genstand
- Et tredje punkt
- En genstand
- En anden genstand
- Et tredje punkt
- En genstand
- En anden genstand
- Et tredje punkt
- En genstand
- En anden genstand
- Et tredje punkt
- En genstand
- En anden genstand
- Et tredje punkt
- En genstand
- En anden genstand
- Et tredje punkt
<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>
Kontekstuelle klasser
Brug kontekstuelle klasser til at style listeelementer med en tilstandsfuld baggrund og farve.
- Et simpelt standardlistegruppeemne
- Et simpelt element i primær listegruppe
- Et simpelt sekundært listegruppeemne
- Et simpelt gruppeelement på en succesliste
- Et simpelt gruppeelement på en fareliste
- Et simpelt gruppeelement på en advarselsliste
- Et simpelt gruppeelement på en infoliste
- Et simpelt lyslistegruppeemne
- Et simpelt gruppeemne på mørk liste
<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>
Kontekstuelle klasser arbejder også med .list-group-item-action
. Bemærk tilføjelsen af svævestilene her, som ikke er til stede i det foregående eksempel. Også støttet er .active
staten; anvende det for at angive et aktivt valg på et kontekstuel listegruppeemne.
<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>
Formidle mening til hjælpeteknologier
Brug af farve til at tilføje betydning giver kun en visuel indikation, som ikke vil blive formidlet til brugere af hjælpeteknologier - såsom skærmlæsere. Sørg for, at oplysninger, der er angivet med farven, enten er tydelige fra selve indholdet (f.eks. den synlige tekst), eller er inkluderet via alternative måder, såsom ekstra tekst skjult i .visually-hidden
klassen.
Med badges
Føj badges til ethvert listegruppeelement for at vise ulæste optællinger, aktivitet og mere ved hjælp af nogle hjælpeprogrammer .
- Et listeelement14
- Et andet listepunkt2
- Et tredje punkt på listen1
<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>
Tilpasset indhold
Tilføj næsten enhver HTML indeni, selv for linkede listegrupper som den nedenfor, ved hjælp af flexbox-værktøjer .
<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>
Afkrydsningsfelter og radioer
Placer Bootstraps afkrydsningsfelter og radioer i listegruppeelementer og tilpas efter behov. Du kan bruge dem uden <label>
s, men husk at inkludere en aria-label
egenskab og værdi for tilgængelighed.
- Første afkrydsningsfelt
- Andet afkrydsningsfelt
- Tredje afkrydsningsfelt
- Fjerde afkrydsningsfelt
- Femte afkrydsningsfelt
<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>
Og hvis du vil have <label>
s som .list-group-item
for store ramte områder, kan du også gøre det.
<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
Variabler
$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
Bruges i kombination med $theme-colors
til at generere de kontekstuelle variantklasser for .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;
}
}
}
}
Løkke
Loop, der genererer modifikatorklasserne med 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);
}
JavaScript adfærd
Brug fanebladet JavaScript-plugin - inkluder det individuelt eller gennem den kompilerede bootstrap.js
fil - til at udvide vores listegruppe til at oprette faneblade med lokalt indhold.
<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>
Brug af dataattributter
Du kan aktivere en listegruppenavigation uden at skrive JavaScript ved blot at angive data-bs-toggle="list"
eller på et element. Brug disse dataattributter på .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>
Via JavaScript
Aktiver tabulatorlisteelement via JavaScript (hvert listeelement skal aktiveres individuelt):
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()
})
})
Du kan aktivere individuelle listeelementer på flere måder:
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
Fade effekt
For at få fanepanelet til at tone ind, skal du tilføje .fade
til hver .tab-pane
. Den første fanerude skal også .show
gøre det oprindelige indhold synligt.
<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>
Metoder
constructor
Aktiverer et listeelementelement og indholdsbeholder. Tab skal have enten en data-bs-target
eller en href
målretning mod en containernode i 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
Vælger det givne listeelement og viser dets tilhørende rude. Ethvert andet listeelement, der tidligere er valgt, bliver fravalgt, og dets tilknyttede rude skjules. Vender tilbage til den, der ringer, før faneruden faktisk er blevet vist (f.eks. før shown.bs.tab
hændelsen indtræffer).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
Ødelægger et elements fane.
getInstance
Statisk metode, som giver dig mulighed for at få fane-forekomsten tilknyttet et DOM-element
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statisk metode, som giver dig mulighed for at få faneforekomsten tilknyttet et DOM-element eller oprette en ny, hvis den ikke blev initialiseret
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Begivenheder
Når du viser en ny fane, udløses begivenhederne i følgende rækkefølge:
hide.bs.tab
(på den aktuelle aktive fane)show.bs.tab
(på fanen der skal vises)hidden.bs.tab
(på den forrige aktive fane, den samme som forhide.bs.tab
begivenheden)shown.bs.tab
(på det nyligt aktive faneblad, det samme som forshow.bs.tab
begivenheden)
Hvis ingen fane allerede var aktiv, vil hide.bs.tab
begivenhederne hidden.bs.tab
og ikke blive udløst.
Begivenhedstype | Beskrivelse |
---|---|
show.bs.tab |
Denne begivenhed udløses på faneshow, men før den nye fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
shown.bs.tab |
Denne begivenhed udløses på faneshow, efter at en fane er blevet vist. Brug event.target og event.relatedTarget til at målrette henholdsvis den aktive fane og den forrige aktive fane (hvis tilgængelig). |
hide.bs.tab |
Denne hændelse udløses, når en ny fane skal vises (og dermed skal den tidligere aktive fane skjules). Brug event.target og event.relatedTarget til at målrette henholdsvis den aktuelle aktive fane og den nye snart-aktive fane. |
hidden.bs.tab |
Denne hændelse udløses, efter at en ny fane er vist (og dermed er den tidligere aktive fane skjult). Brug event.target og event.relatedTarget til at målrette henholdsvis den forrige aktive fane og den nye aktive fane. |
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
})
}