List groep
Listgroepen binne in fleksibele en krêftige komponint foar it werjaan fan in searje ynhâld. Feroarje en útwreidzje se om sawat elke ynhâld binnen te stypjen.
Basis foarbyld
De meast basale listgroep is in net-oardere list mei listitems en de juste klassen. Bou derop mei de folgjende opsjes, of mei jo eigen CSS as nedich.
- In item
- In twadde item
- In tredde item
- In fjirde item
- En in fyfde
<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 items
Taheakje .active
oan in .list-group-item
om de aktive seleksje oan te jaan.
- In aktyf item
- In twadde item
- In tredde item
- In fjirde item
- En in fyfde
<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>
Utskeakele items
Taheakje .disabled
oan in .list-group-item
foar in meitsje it ferskine útskeakele. Tink derom dat guon eleminten mei .disabled
ek oanpast JavaSkript nedich binne om har klikeveneminten (bygelyks keppelings) folslein út te skeakeljen.
- In útskeakele item
- In twadde item
- In tredde item
- In fjirde item
- En in fyfde
<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 en knoppen
Brûk <a>
s of <button>
s om aksjebere listgroepitems te meitsjen mei hover, útskeakele en aktive steaten troch ta te foegjen .list-group-item-action
. Wy skiede dizze pseudo-klassen om te soargjen dat listgroepen makke fan net-ynteraktive eleminten (lykas <li>
s of <div>
s) gjin klik of tik leverje.
Wês wis dat jo de standertklassen .btn
hjir net brûke .
<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>
Mei <button>
s kinne jo ek gebrûk meitsje fan it disabled
attribút ynstee fan de .disabled
klasse. Spitigernôch, <a>
s net stypje de útskeakele attribút.
<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
Foegje .list-group-flush
ta om guon grinzen en rûne hoeken te ferwiderjen om listgroepitems râne-oan-râne yn in âlderkontener (bgl. kaarten) te meitsjen.
- In item
- In twadde item
- In tredde item
- In fjirde item
- En in fyfde
<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>
Nûmere
Foegje de .list-group-numbered
modifier-klasse ta (en brûk opsjoneel in <ol>
elemint) om te kiezen foar nûmere listgroepitems. Sifers wurde oanmakke fia CSS (yn tsjinstelling ta in <ol>
s standert blêder styling) foar bettere pleatsing binnen list groep items en te tastean foar bettere maatwurk.
Sifers wurde oanmakke troch counter-reset
op de <ol>
, en dan styled en pleatst mei in ::before
pseudo-elemint op de <li>
mei counter-increment
en 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>
Dizze wurkje ek geweldich mei oanpaste ynhâld.
-
SubheadingCras justo odio
-
SubheadingCras justo odio
-
SubheadingCras 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>
Horizontaal
Foegje .list-group-horizontal
ta om de yndieling fan listgroepitems te feroarjen fan fertikaal nei horizontaal oer alle brekpunten. As alternatyf, kies in responsive fariant .list-group-horizontal-{sm|md|lg|xl|xxl}
om in listgroep horizontaal te meitsjen begjinnend by dat brekpunt min-width
. Op it stuit kinne horizontale listgroepen net kombineare wurde mei flushlistgroepen.
ProTip: Wolle jo groepitems mei lykweardige breedte as jo horizontaal binne? Taheakje .flex-fill
oan elk list groep item.
- In item
- In twadde item
- In tredde item
- In item
- In twadde item
- In tredde item
- In item
- In twadde item
- In tredde item
- In item
- In twadde item
- In tredde item
- In item
- In twadde item
- In tredde item
- In item
- In twadde item
- In tredde item
<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>
Kontekstuele klassen
Brûk kontekstuele klassen om list items te stylearjen mei in steatlike eftergrûn en kleur.
- In ienfâldich standert list groep item
- In ienfâldich primêre list groep item
- In ienfâldich sekondêr listgroepitem
- In ienfâldige súkseslist groep item
- In ienfâldich groep item foar gefaarlist
- In ienfâldige warskôgingslist groep item
- In ienfâldich ynfo list groep item
- In ienfâldich ljocht list groep item
- In ienfâldich donkere list groep item
<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>
Kontekstuele klassen wurkje ek mei .list-group-item-action
. Tink derom dat de tafoeging fan de hoverstilen hjir net oanwêzich is yn it foarige foarbyld. Ek stipe wurdt de .active
steat; tapasse it om in aktive seleksje oan te jaan op in kontekstuele listgroepitem.
<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>
Betsjutting oerbringe oan assistinte technologyen
It brûken fan kleur om betsjutting ta te foegjen jout allinich in fisuele yndikaasje, dy't net sil wurde oerbrocht oan brûkers fan assistinte technologyen - lykas skermlêzers. Soargje derfoar dat ynformaasje oanjûn troch de kleur óf dúdlik is út de ynhâld sels (bgl. de sichtbere tekst), óf wurdt opnommen troch alternative middels, lykas ekstra tekst ferburgen mei de .visually-hidden
klasse.
Mei badges
Foegje badges ta oan elk listgroepitem om net-lêzen tellen, aktiviteit en mear te sjen mei help fan guon nutsbedriuwen .
- In list item14
- In twadde list item2
- In tredde list item1
<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>
Oanpaste ynhâld
Foegje hast elke HTML ta binnen, sels foar keppele listgroepen lykas de hjirûnder, mei help fan flexbox-helpprogramma's .
List groep item heading
3 dagen lynGuon plakhâlder ynhâld yn in paragraaf.
En wat lytse printsjes.List groep item heading
3 dagen lynGuon plakhâlder ynhâld yn in paragraaf.
En wat gedempte lytse letters.List groep item heading
3 dagen lynGuon plakhâlder ynhâld yn in paragraaf.
En wat gedempte lytse letters.<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>
Checkboxes en radio's
Plak Bootstrap's karfakjes en radio's binnen listgroep items en oanpasse as nedich. Jo kinne se brûke sûnder <label>
s, mar tink om in aria-label
attribút en wearde foar tagonklikens op te nimmen.
- Earste karfakje
- Twadde karfakje
- Tredde karfakje
- Fjirde karfakje
- Fyfde karfakje
<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>
En as jo wolle <label>
s as de .list-group-item
foar grutte hit gebieten, do kinst dwaan dat, te.
<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
Fariabelen
$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
Brûkt yn kombinaasje mei om de kontekstuele fariantklassen foar s $theme-colors
te generearjen ..list-group-item
@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;
}
}
}
}
Loop
Loop dy't generearret de modifier klassen mei de 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 gedrach
Brûk it ljepblêd JavaScript-plugin-ynklusyf it yndividueel as fia it kompilearre bootstrap.js
bestân-om ús listgroep út te wreidzjen om ljepblêden fan lokale ynhâld te meitsjen.
<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>
Gebrûk fan gegevensattributen
Jo kinne in listgroepnavigaasje aktivearje sûnder JavaScript te skriuwen troch gewoan oan te jaan data-bs-toggle="list"
of op in elemint. Brûk dizze gegevens attributen op .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>
Fia JavaScript
Skeakelje ljepperlist item yn fia JavaScript (elk listitem moat yndividueel aktivearre wurde):
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()
})
})
Jo kinne yndividuele listitem op ferskate manieren aktivearje:
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
Om it ljepblêdpaniel te fade yn, foegje .fade
oan elk ta .tab-pane
. It earste ljepblêd moat ek .show
de earste ynhâld sichtber meitsje moatte.
<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>
Metoaden
constructor
Aktivearret in list item elemint en ynhâld container. De ljepper moat in data-bs-target
of in href
rjochte op in kontenerknooppunt hawwe yn 'e 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>
sjen litte
Selekteart it opjûne listitem en lit it byhearrende paniel sjen. Elk oar listitem dat earder selektearre is wurdt net selektearre en it byhearrende paniel wurdt ferburgen. Keart werom nei de beller foardat it ljepblêd wirklik werjûn is (bygelyks foardat it shown.bs.tab
evenemint bart).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
disponearje
Fernielet in ljepper fan in elemint.
getInstance
Statyske metoade wêrmei jo de ljeppereksimplaar kinne krije ferbûn mei in DOM-elemint
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
When showing a new tab, the events fire in the following order:
hide.bs.tab
(on the current active tab)show.bs.tab
(on the to-be-shown tab)hidden.bs.tab
(on the previous active tab, the same one as for thehide.bs.tab
event)shown.bs.tab
(on the newly-active just-shown tab, the same one as for theshow.bs.tab
event)
If no tab was already active, the hide.bs.tab
and hidden.bs.tab
events will not be fired.
Event type | Description |
---|---|
show.bs.tab |
This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
shown.bs.tab |
This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively. |
hide.bs.tab |
This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively. |
hidden.bs.tab |
This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. |
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
})
}