Lis gwoup
Gwoup lis yo se yon eleman fleksib ak pwisan pou montre yon seri kontni. Modifye ak pwolonje yo pou sipòte prèske nenpòt kontni andedan.
Egzanp de baz
Gwoup lis ki pi fondamantal la se yon lis ki pa gen lòd ak atik lis yo ak klas apwopriye yo. Bati sou li ak opsyon ki swiv yo, oswa ak pwòp CSS ou jan sa nesesè.
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon katriyèm atik
- Ak yon senkyèm youn
<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>
Atik aktif
Ajoute .active
nan yon .list-group-item
pou endike seleksyon aktif aktyèl la.
- Yon atik aktif
- Yon dezyèm atik
- Yon twazyèm atik
- Yon katriyèm atik
- Ak yon senkyèm youn
<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>
Atik ki andikape
Ajoute .disabled
nan yon .list-group-item
pou fè li parèt enfim. Remake byen ke kèk eleman ak .disabled
yo pral mande tou JavaScript koutim konplètman enfim evènman klike sou yo (egzanp, lyen).
- Yon atik ki andikape
- Yon dezyèm atik
- Yon twazyèm atik
- Yon katriyèm atik
- Ak yon senkyèm youn
<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>
Lyen ak bouton
Sèvi ak <a>
s oswa <button>
s pou kreye atik gwoup lis aksyon ak eta hover, andikape, ak aktif lè w ajoute .list-group-item-action
. Nou separe pseudo-klas sa yo pou asire gwoup lis ki fèt ak eleman ki pa entèaktif (tankou <li>
s oswa <div>
s) pa bay yon abònman klike sou oswa tiyo.
Asire w ou pa sèvi ak klas estanda .btn
yo isit la .
<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>
Avèk <button>
s, ou ka sèvi ak disabled
atribi a olye pou .disabled
klas la. Malerezman, <a>
yo pa sipòte atribi ki andikape.
<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
Ajoute .list-group-flush
pou retire kèk fwontyè ak kwen awondi pou rann atik gwoup lis kwen-a-bò nan yon veso paran (pa egzanp, kat).
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon katriyèm atik
- Ak yon senkyèm youn
<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>
Nimero
Ajoute .list-group-numbered
klas modifikatè a (ak opsyonèlman itilize yon <ol>
eleman) pou patisipe nan atik gwoup lis nimewote yo. Nimewo yo pwodwi atravè CSS (kontrèman ak <ol>
style navigatè defo a) pou pi bon plasman andedan atik gwoup lis yo ak pou pèmèt pou pi bon personnalisation.
Nimewo yo pwodwi pa counter-reset
sou <ol>
, ak Lè sa a, estile epi mete yo ak yon ::before
pseudo-eleman sou <li>
ak counter-increment
ak 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>
Sa yo travay anpil ak kontni koutim tou.
-
SoutitCras justo odio
-
SoutitCras justo odio
-
SoutitCras 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>
Orizontal
Ajoute .list-group-horizontal
pou chanje Layout atik gwoup lis yo soti nan vètikal a orizontal atravè tout pwen rupture. Altènativman, chwazi yon varyant ki reponn .list-group-horizontal-{sm|md|lg|xl|xxl}
pou fè yon gwoup lis orizontal apati pwen breakpoint sa a min-width
. Aktyèlman gwoup lis orizontal pa ka konbine avèk gwoup lis flush.
ProTip: Vle atik gwoup lis egal-lajè lè orizontal? Ajoute .flex-fill
nan chak atik gwoup lis.
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
- Yon atik
- Yon dezyèm atik
- Yon twazyèm atik
<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>
Klas kontèks
Sèvi ak klas kontèks pou style atik lis yo ak yon background ak koulè.
- Yon senp atik gwoup lis default
- Yon senp atik gwoup lis prensipal
- Yon senp atik gwoup lis segondè
- Yon senp atik gwoup lis siksè
- Yon senp atik gwoup lis danje
- Yon atik gwoup lis avètisman senp
- Yon atik gwoup lis enfòmasyon senp
- Yon senp atik gwoup lis limyè
- Yon senp atik gwoup lis nwa
<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>
Klas kontèks yo travay tou ak .list-group-item-action
. Remake byen adisyon nan estil yo hover isit la pa prezan nan egzanp anvan an. Leta sipòte tou .active
; aplike li pou endike yon seleksyon aktif sou yon atik gwoup lis kontèks.
<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>
Transmèt siyifikasyon nan teknoloji asistans
Sèvi ak koulè pou ajoute siyifikasyon sèlman bay yon endikasyon vizyèl, ki pa pral transmèt bay itilizatè teknoloji asistans - tankou lektè ekran. Asire w ke enfòmasyon ki endike nan koulè a se swa evidan nan kontni an li menm (egzanp tèks vizib la), oswa yo enkli nan mwayen altènatif, tankou tèks adisyonèl kache ak .visually-hidden
klas la.
Avèk badj
Ajoute badj nan nenpòt atik gwoup lis pou montre konte yo, aktivite, ak plis ankò avèk èd kèk sèvis piblik .
- Yon atik lis14
- Yon dezyèm atik lis2
- Yon twazyèm atik lis1
<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>
Kontni Custom
Ajoute prèske nenpòt HTML nan, menm pou gwoup lis ki lye tankou sa ki anba a, avèk èd nan sèvis piblik flexbox .
<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>
Case ak radyo
Mete kaz ak radyo Bootstrap yo nan atik gwoup lis yo epi pèsonalize jan sa nesesè. Ou ka sèvi ak yo san yo pa <label>
s, men tanpri sonje mete yon aria-label
atribi ak valè pou aksè.
- Premye kaz
- Dezyèm kaz
- Twazyèm kaz
- Katriyèm kaz
- Senkyèm kaz
<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>
Men, si ou vle <label>
s kòm la .list-group-item
pou zòn frape gwo, ou ka fè sa, tou.
<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
Varyab
$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
Itilize ansanm ak $theme-colors
pou jenere klas varyant kontèks pou .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;
}
}
}
}
Bouk
Bouk ki jenere klas modifye yo ak list-group-item-variant()
mixin la.
// 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);
}
Konpòtman JavaScript
Sèvi ak tab JavaScript plugin la—enkli li endividyèlman oswa atravè bootstrap.js
fichye konpile a—pou pwolonje gwoup lis nou an pou kreye fenèt tabulab nan kontni lokal yo.
<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èvi ak atribi done yo
Ou ka aktive yon navigasyon gwoup lis san yo pa ekri okenn JavaScript pa senpleman espesifye data-bs-toggle="list"
oswa sou yon eleman. Sèvi ak atribi done sa yo sou .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
Pèmèt atik lis tabable atravè JavaScript (yo dwe aktive chak atik nan lis endividyèlman):
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()
})
})
Ou ka aktive atik endividyèl lis nan plizyè fason:
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
Efè fennen
Pou fè panèl onglets fennen nan, ajoute .fade
nan chak .tab-pane
. Premye volet tab la dwe genyen tou .show
pou fè kontni inisyal la vizib.
<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>
Metòd
constructor
Aktive yon eleman atik lis ak veso kontni. Tab ta dwe gen swa yon data-bs-target
oswa yon href
vize yon ne veso nan DOM la.
<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>
montre
Chwazi atik lis yo bay la epi li montre fenèt ki asosye li yo. Nenpòt lòt atik lis ki te chwazi deja vin pa seleksyone epi fenèt ki asosye li yo kache. Retounen bay moun kap rele a anvan yo te montre volet tab la (pa egzanp, anvan shown.bs.tab
evènman an rive).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
jete
Detwi tab yon eleman.
getInstance
Metòd estatik ki pèmèt ou jwenn egzanp tab ki asosye ak yon eleman DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Metòd estatik ki pèmèt ou jwenn egzanp tab ki asosye ak yon eleman DOM, oswa kreye yon nouvo si li pa te inisyalize.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Evènman
Lè w ap montre yon nouvo tab, evènman yo pran dife nan lòd sa a:
hide.bs.tab
(sou onglet aktif aktyèl la)show.bs.tab
(sou onglet ki dwe montre)hidden.bs.tab
(sou onglet aktif anvan an, menm jan akhide.bs.tab
evènman an)shown.bs.tab
(sou onglet ki fèk parèt aktif la, menm bagay la tou poushow.bs.tab
evènman an)
Si pa gen okenn tab ki te deja aktif, evènman yo hide.bs.tab
ak hidden.bs.tab
yo p ap revoke.
Kalite evènman | Deskripsyon |
---|---|
show.bs.tab |
Evènman sa a dife sou tab montre, men anvan yo te montre nouvo tab la. Sèvi event.target ak ak event.relatedTarget pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman. |
shown.bs.tab |
Evènman sa a pran dife sou tab montre apre yo fin montre yon tab. Sèvi event.target ak ak event.relatedTarget pou vize tab aktif la ak tab aktif anvan an (si disponib) respektivman. |
hide.bs.tab |
Evènman sa a dife lè yon nouvo tab yo dwe montre (e konsa tab aktif anvan an dwe kache). Sèvi event.target ak ak event.relatedTarget pou vize onglet aktyèl la aktif ak nouvo tab la byento-a-aktif, respektivman. |
hidden.bs.tab |
Evènman sa a dife apre yo fin montre yon nouvo tab (e konsa tab aktif anvan an kache). Sèvi event.target ak ak event.relatedTarget pou vize tab aktif anvan an ak nouvo tab aktif la, respektivman. |
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
})
}