Source

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.

  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum an Eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Aktiv Elementer

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

  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum an Eros
<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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).

  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum an Eros
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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 .

Cras justo Odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum an Eros 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</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">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</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).

  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum an Eros
<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</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.

  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>
  • Cras justo Odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Kontextuell Klassen

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

  • Dapibus ac facilisis in
  • 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">Dapibus ac facilisis in</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.

Dapibus ac facilisis in 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">Dapibus ac facilisis in</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 .

  • Cras justo Odio14
  • Dapibus ac facilisis in2
  • Morbi leo risus1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <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

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Lëscht Grupp Element Rubrik
3 Deeg virun

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta.
Lëscht Grupp Element Rubrik
3 Deeg virun

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit non mi porta. 
<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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.

Velit aute mollit ipsum ad dolor consectetur nulla oficia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

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

Iwwer JavaScript

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

$('#myList a').on('click', function (e) {
  e.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:

  1. hide.bs.tab(op der aktueller aktiver Tab)
  2. show.bs.tab(op der Tab ze weisen)
  3. hidden.bs.tab(op der viregter aktiver Tab, déi selwecht wéi fir den hide.bs.tabEvent)
  4. 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.targeta event.relatedTargetfir 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.targeta event.relatedTargetfir 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.targeta event.relatedTargetfir 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.targeta event.relatedTargetfir déi viregt aktive Tab an déi nei aktiv Tab ze zielen, respektiv. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})