in English

Lëscht Grupp

Lëschtgruppen sinn e flexibelen a mächtege Bestanddeel fir eng Serie vun Inhalter ze weisen. Änneren a verlängeren se fir bal all Inhalt bannen z'ënnerstëtzen.

Basis Beispill

Déi meescht Basis Lëscht Grupp ass eng ongeuerdnet Lëscht mat Lëscht Artikelen an déi richteg Klassen. Baut op et mat den Optiounen déi verfollegen, oder mat Ärem eegene CSS wéi néideg.

En Artikel
En zweeten Element
En drëtten Element
E véierten Element
An e fënneften

<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>

Aktiv Elementer

Add .activeto a .list-group-itemfir déi aktuell aktiv Auswiel unzeginn.

En aktiven Element
En zweeten Element
En drëtten Element
E véierten Element
An e fënneften

<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>

Behënnert Elementer

Füügt .disabledzu engem .list-group-itemfir datt et behënnert schéngt . Notéiert datt e puer Elementer mat .disabledoch personaliséiert JavaScript erfuerderen fir hir Klickevenementer komplett auszeschalten (zB Linken).

E behënnert Element
En zweeten Element
En drëtten Element
E véierten Element
An e fënneften

<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>

Linken a Knäppercher

Benotzt <a>s oder <button>s fir handlungsfäeg Lëschtegrupp Elementer mat Hover, behënnert an aktive Staaten ze kreéieren andeems Dir .list-group-item-action. Mir trennen dës Pseudo-Klassen fir sécherzestellen datt Lëschtegruppen aus net-interaktiven Elementer (wéi <li>s oder <div>s) keng Klick oder Klick leeschten.

Ginn sécher net de Standard .btnKlassen hei ze benotzen .

Den aktuelle Link Element En zweete Link Element En drëtte Link Element E véierte Link Element Eng behënnert Link Element

<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>

Mat <button>s kënnt Dir och d' disabledAttributer benotzen amplaz vun der .disabledKlass. Leider <a>ënnerstëtzen s net de behënnerte Attribut.

<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>

Spull

Füügt .list-group-flushfir e puer Grenzen a gerundeten Ecker ze läschen fir d'Lëscht vun Gruppeartikelen Rand-zu-Rand an engem Elterendeel Container ze maachen (zB Kaarten).

En Artikel
En zweeten Element
En drëtten Element
E véierten Element
An e fënneften

<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>

Horizontal

Füügt .list-group-horizontalfir de Layout vun de Lëschtegruppartikele vu vertikal op horizontal iwwer all Breakpunkten z'änneren. Alternativ, wielt eng reaktiounsfäeger Variant .list-group-horizontal-{sm|md|lg|xl}fir eng Lëschtgrupp horizontal ze maachen, ugefaange bei deem Breakpoint min-width. Aktuell horizontal Lëscht Gruppen kënnen net mat Spulllëscht Gruppen kombinéiert ginn.

ProTip: Wëllt gläich-Breet Lëscht Grupp Elementer wann horizontal? Füügt .flex-fillop all Lëscht Grupp Element.

En Artikel
En zweeten Element
En drëtten Element

En Artikel
En zweeten Element
En drëtten Element

En Artikel
En zweeten Element
En drëtten Element

En Artikel
En zweeten Element
En drëtten Element

En Artikel
En zweeten Element
En drëtten Element

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Kontextuell Klassen

Benotzt kontextuell Klassen fir Artikele mat engem statesche Hannergrond a Faarf ze stiléieren.

Eng einfach Standard Lëscht Grupp Element
Eng einfach Primärlëscht Grupp Element
En einfache Secondaire Lëscht Grupp Element
Eng einfach Erfolleg Lëscht Grupp Element
Eng einfach Gefor Lëscht Grupp Element
Eng einfach Warnung Lëscht Grupp Element
Eng einfach Info Lëscht Grupp Element
Eng einfach Luucht Lëscht Grupp Element
Eng einfach donkel Lëscht Grupp Element

<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>

Kontext Klassen schaffen och mat .list-group-item-action. Notéiert d'Zousatz vun den Hover-Stiler hei net am virege Beispill präsent. Och ënnerstëtzt gëtt de .activeStaat; gëllen et fir eng aktiv Auswiel op engem kontextuellen Lëscht Grupp Element unzeginn.

Eng einfach Standard Lëscht Grupp Element Eng einfach Primärlëscht Grupp Element En einfache Secondaire Lëscht Grupp Element Eng einfach Erfolleg Lëscht Grupp Element Eng einfach Gefor Lëscht Grupp Element Eng einfach Warnung Lëscht Grupp Element Eng einfach Info Lëscht Grupp Element Eng einfach Luucht Lëscht Grupp Element Eng einfach donkel Lëscht Grupp Element

<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>

Bedeitung vun Hëllefstechnologien

D'Faarf benotze fir Bedeitung ze addéieren gëtt nëmmen eng visuell Indikatioun, déi net un d'Benotzer vun Assistenztechnologien vermëttelt gëtt - sou wéi Écran Lieser. Vergewëssert Iech datt d'Informatioun, déi mat der Faarf bezeechent gëtt, entweder offensichtlech aus dem Inhalt selwer ass (zB dem siichtbaren Text), oder duerch alternativ Mëttelen abegraff ass, sou wéi zousätzlech Text verstoppt mat der .sr-onlyKlass.

Mat Schëlder

Füügt Badges un all Lëscht Grupp Element fir ongelies Zuelen, Aktivitéit, a méi mat der Hëllef vun e puer Utilities ze weisen .

Eng Lëscht Element14
Eng zweet Lëscht Element2
Eng drëtt Lëscht Element1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

Benotzerdefinéiert Inhalt

Füügt bal all HTML bannent, och fir verlinkte Lëschtgruppen wéi déi hei ënnen, mat der Hëllef vu Flexbox Utilities .

Lëscht Grupp Element Rubrik

3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer kleng Drécken.

Lëscht Grupp Element Rubrik

3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer gedämpft Klengdruck.

Lëscht Grupp Element Rubrik

3 Deeg virun

E puer Plazhalter Inhalt an engem Paragraph.

An e puer gedämpft Klengdruck.

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <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>

JavaScript Verhalen

Benotzt d'Tab JavaScript Plugin - enthält se individuell oder duerch déi kompiléiert bootstrap.jsDatei - fir eis Lëschtegrupp ze verlängeren fir Tabbar Panels vum lokalen Inhalt ze kreéieren.

Doheem Profil Messagen Astellungen

E puer Plazhalterinhalt an engem Paragraf betreffend "Home". An e puer méi Inhalter, hei benotzt just fir dës Tab Panel auszefëllen an auszefëllen. An der Produktioun hätt Dir offensichtlech méi realen Inhalt hei. An net nëmmen Text. Et kéint alles sinn, wierklech. Text, Biller, Formen.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<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-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="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>

Benotzt Daten Attributer

Dir kënnt eng Lëscht Grupp Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-toggle="list"oder op en Element. Benotzt dës Donnéeën Attributer 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-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-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>

Iwwer JavaScript

Aktivéiert Tabbar Lëscht Element iwwer JavaScript (all Lëscht Element muss individuell aktivéiert ginn):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

Dir kënnt eenzel Lëscht Element op verschidde Manéieren aktivéieren:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

Fade Effekt

Fir d'Tabs Panel ze verschwannen, füügt .fadeall .tab-pane. Déi éischt Tab-Säit muss och .showden initialen Inhalt siichtbar maachen.

<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>

Methoden

$().tab

Aktivéiert e Lëscht Element Element an Inhalt Container. Tab soll entweder en data-targetoder e hrefgezielt e Container Node am DOM hunn.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-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>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('weisen')

Wielt de gegebene Lëschtpunkt a weist seng assoziéiert Fënster. All aner Lëscht Element, déi virdru gewielt gouf, gëtt net ausgewielt a seng assoziéiert Fënster ass verstoppt. Gëtt zréck op den Uruffer ier d'Tab Panel tatsächlech gewisen gouf (zum Beispill ier d' shown.bs.tabEvenement geschitt ass).

$('#someListItem').tab('show')

Evenementer

Wann Dir en neien Tab weist, brennen d'Evenementer an der folgender Uerdnung:

hide.bs.tab(op der aktueller aktiver Tab)
show.bs.tab(op der Tab ze weisen)
hidden.bs.tab(op der viregter aktiver Tab, déi selwecht wéi fir den hide.bs.tabEvent)
shown.bs.tab(op der nei-aktive just-gewise Tab, déi selwecht wéi fir den show.bs.tabEvent)

Wa keng Tab schonn aktiv war, ginn d' hide.bs.taban hidden.bs.tabEventer net ofgeschaaft.

Event Typ	Beschreiwung
show.bs.tab	Dëst Event brennt op Tab Show, awer ier déi nei Tab gewisen gouf. Benotzt `event.target`a `event.relatedTarget`fir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
gewisen.bs.tab	Dëst Event brennt op Tab Show nodeems eng Tab gewisen gouf. Benotzt `event.target`a `event.relatedTarget`fir den aktiven Tab an déi viregt aktive Tab (wann verfügbar) respektiv ze zielen.
hide.bs.tab	Dëst Event brennt wann en neien Tab soll ugewise ginn (an dofir ass de fréiere aktive Tab verstoppt). Benotzt `event.target`a `event.relatedTarget`fir den aktuellen aktive Tab an déi nei geschwënn aktiv Tab, respektiv.
hidden.bs.tab	Dësen Event brennt nodeems en neien Tab ugewise gëtt (an domat ass de fréiere aktive Tab verstoppt). Benotzt `event.target`a `event.relatedTarget`fir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv.

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})