List group
Circuli indices flexibiles et potentes sunt ad seriem contenti ostendendam. Modificare et extendere eos ad sustentationem de quibuslibet contentis intus.
Basic exemplum
Circulus maxime fundamentalis est album inordinatum cum indice rerum et classium propriis. Aedificare cum optionibus quae sequuntur, vel cum tua CSS necessaria.
- An item
- Alter item
- Tertia item
- Quartus item
- Et quintus
<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>
Active items
Adde .active
ad .list-group-item
designandum activae lectionis hodiernae.
- Active item
- Alter item
- Tertia item
- Quartus item
- Et quintus
<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>
Debilitatum items
Adde .disabled
ut erret.list-group-item
appareat . Nota elementa quaedam cum voluntate etiam consuetudine JavaScript requirere ut eorum click eventus plene disable (eg, nexus)..disabled
- A item disabled
- Alter item
- Tertia item
- Quartus item
- Et quintus
<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>
Vincula et tesserae
Utere <a>
s vel <button>
s ad creandum album operabilium rerum globum cum volitando, debiles, activos civitates addendo .list-group-item-action
. Has pseudo-classes separamus ut indicem coetuum elementorum non interactivorum (sicut <li>
s vel <div>
s) efficiant ne strepita vel sonum praebeant.
Vide not not uti .btn
classibus hic .
<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>
Cum <button>
s, uti potes etiam disabled
loco .disabled
classis attributo. Triste, <a>
s debiles non sustinent attributum.
<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
Adde .list-group-flush
terminos aliquos et angulos rotundos removere ut album globum reddere in margine ut-ore in receptaculo parentis (exempli gratia pecto).
- An item
- Alter item
- Tertia item
- Quartus item
- Et quintus
<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>
Numerus
Addere modum .list-group-numbered
determinatum ordinis (et optione utatur <ol>
elemento) ut optet items in indicem numerorum coetus numeratum. Numeri generantur per CSS (ut opponitur navigatori styli <ol>
s default) meliori collocatione res intra indicem globorum factae et ut meliores customizationes patiantur.
Generantur numeri ab counter-reset
in <ol>
, et deinde a ::before
pseudo-elemento appellati et collocati in <li>
cum counter-increment
et content
.
- A list item
- A list item
- A list item
<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>
Haec magna cum consuetudine contenti sunt.
-
SubheadingContentus pro indice item
-
SubheadingContentus pro indice item
-
SubheadingContentus pro indice item
<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>
Horizontal
Adde .list-group-horizontal
mutare extensionem inscripti coetus objecti ab verticali ad horizontem per omnes confractiones. Vel, elige variantes responsivas .list-group-horizontal-{sm|md|lg|xl|xxl}
ut facias indicem coetus horizontalem incipiens ab ipso confracto min-width
. In praesenti tabulae horizontalis coetus cum rubore album coetuum coniungi non possunt.
ProTip: Vis par-latitudo list group items cum horizontali? .flex-fill
Ad singulas item coetus indices adde .
- An item
- Alter item
- Tertia item
- An item
- Alter item
- Tertia item
- An item
- Alter item
- Tertia item
- An item
- Alter item
- Tertia item
- An item
- Alter item
- Tertia item
- An item
- Alter item
- Tertia 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>
Contextual classes
Utere contextual generibus ad stylum album elementis cum stato background et colore.
- Innocens default coetus album item
- Innocens prima album group item
- Innocens secundarium album group item
- Simplex victoria album group item
- Innocens periculum album group item
- Innocens monitionem album group item
- Innocens info album group item
- Innocens lux album coetus item
- Innocens tenebris album coetus 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>
Classes contextuales etiam laborent .list-group-item-action
. Nota additamenta styli hic non in priore exemplo. Item subnixa est .active
civitas; applicare ad indicandam activam electionem in contextual album coetus item.
<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>
Deferre significatio technologiae adiuvandae
Color usus ad significationem addere tantum praebet indicationem visualem, quae utentibus technologiarum adiuvantium - sicut lectorum tegumentum. Ut informationes colore notatae sint vel ex ipso contento perspicuae (exempli gratia textus visibilis), vel per medium includi alterum, sicut textus additus occultus cum .visually-hidden
genere.
cum insignibus
Adde notas ad aliquod album sodalicium item ad comites non relegatos, activitatem, ac magis aliquarum utilitatum ope .
- A list item14
- Alter album item2
- Tertium album 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>
Custom content
Prope quaslibet HTML intus adde, etiam ad album circulos coniunctos sicut infra, ope flexboxs utilitatum .
Album group item capite
III dies abhincQuidam placeholder in articulo content.
et aliquot princ.Album group item capite
III dies abhincQuidam placeholder in articulo content.
et nonnullis obmissis, small print.Album group item capite
III dies abhincQuidam placeholder in articulo content.
et nonnullis obmissis, small print.<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 et radios
Pone Bootstrap's checkboxes et radios intra listas rerum et domicilii ut opus est. His uti potes sine <label>
s, sed memento includere aria-label
attributum et valorem pro accessibilitate.
- Primum checkbox
- Secundus checkbox
- Tertia checkbox
- Quartum reprehendo
- Quintus checkbox
<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>
Et si vis <label>
in .list-group-item
magnis locis, id quoque facere potes.
<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
Variabilium
$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
Adhibetur in compositione cum contextual generibus variantibus$theme-colors
generare pro s..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
list-group-item-variant()
Loop, qui cum mixin generat determinatiuum asses.
// 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 mores
Utere tab JavaScript plugin-include eam singillatim vel per bootstrap.js
fasciculum digestum - extendere coetus album nostrum ad creandos panes tabu- lares contentorum localium.
<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>
Data per attributa
Numerum navigationis indicem movere potes sine ullo JavaScript scribendo data-bs-toggle="list"
aut elementum simpliciter denotans. His data attributis uti .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
Admitte tabbable album item per JavaScript (album unumquodque item debet activated singillatim);
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()
})
})
Singula item album movere pluribus modis potes:
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
Pade effectus
Ut tabs tabs marcescat, .fade
singulis adde .tab-pane
. Prima tab pane debet etiam .show
facere ut initialis visibiles.
<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>
Methodi
constructor
Indicem item elementi ac contenti activum continens. Tab habere debet vel a data-bs-target
vel href
nisl continens nodi in 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>
ostende
Item elenchum datam eligit et in pane adiuncto ostendit. Quilibet alius index item, qui antea electus est, fit unelectus et eius adiuncti pane absconditus est. RECENS, antequam in pane tabells redit, actu ostensum est (exempli gratia, antequam shown.bs.tab
res evenit).
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispono
Tab s elementum destruit.
getInstance
Statica methodus quae te permittit ut tab instantia coniungitur cum elemento DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
Statica methodus quae te permittit ut instantia tab instantia cum elementum dom coniungitur, vel novum crea in casu initialized non erat.
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
Cum ostendens novam tab, eventus ignis hoc ordine;
hide.bs.tab
(In current activae tab)show.bs.tab
(Per tab-esse ostensum est)hidden.bs.tab
(In tab priorem activam, idem est uthide.bs.tab
res)shown.bs.tab
(in recenter-activo modo-ostenso tab, idem ac proshow.bs.tab
eventu)
Si nulla tab iam activa est, hide.bs.tab
eventus hidden.bs.tab
non accendit.
Genus res | Descriptio |
---|---|
show.bs.tab |
Hic eventus ignes in tab ostendit, sed antequam nova tab ostensa est. Utere event.target et event.relatedTarget oppugnare tab activum et priorem tab (si available) respective. |
shown.bs.tab |
Hic eventus ignes in tab ostendit postquam tab ostensus est. Utere event.target et event.relatedTarget oppugnare tab activum et priorem tab (si available) respective. |
hide.bs.tab |
Eventus ille ignes cum nova tab demonstranda est (et sic prior tab activa occultanda est). Utere event.target et event.relatedTarget oppugnare tab hodiernam activam et novam tab mox activam respective. |
hidden.bs.tab |
Hic eventus post incendia nova tab ostensa est (et sic prior tab occulta activa). Utere event.target et event.relatedTarget oppugnare tab priorem activam et novam tab activam, respective. |
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
})
}