in English

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 .activead .list-group-itemdesignandum 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 .disabledut 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 .btnclassibus hic .

Current item link Secunda pagina item Tertium nexus item Quarta pagina item Debilitatum item A link

<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 disabledloco .disabledclassis 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-flushterminos 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>

Horizontal

Adde .list-group-horizontalmutare extensionem inscripti coetus objecti ab verticali ad horizontem per omnes confractiones. Vel, elige variantes responsivas .list-group-horizontal-{sm|md|lg|xl}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-fillAd 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

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

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 .activecivitas; applicare ad indicandam activam electionem in contextual album coetus item.

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

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

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

Custom content

Prope quaslibet HTML intus adde, etiam ad album circulos coniunctos sicut infra, ope flexboxs utilitatum .

Album group item capite

III dies abhinc

Quidam placeholder in articulo content.

et aliquot princ.

Album group item capite

III dies abhinc

Quidam placeholder in articulo content.

et nonnullis obmissis, small print.

Album group item capite

III dies abhinc

Quidam placeholder in articulo content.

et nonnullis obmissis, small print.

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

Utere tab JavaScript plugin-include eam singillatim vel per bootstrap.jsfasciculum digestum - extendere coetus album nostrum ad creandos panes tabu- lares contentorum localium.

Home Profile Mandata Occasus

Quidam placeholder contentum in paragrapho ad "Domum" pertinentem. Et quidam plus contenti, hic tantum ad codex utebantur, et tab tabulam hanc implent. In productione, manifestius hic contenta haberes. Et non justo text. Posset aliquid vere. Textus, imagines, formae.

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>

Data per attributa

Numerum navigationis indicem movere potes sine ullo JavaScript scribendo data-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-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>

Via JavaScript

Admitte tabbable album item per JavaScript (album unumquodque item debet activated singillatim);

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

Singula item album movere pluribus modis potes:

$('#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

Pade effectus

Ut tabs tabs marcescat, .fadesingulis adde .tab-pane. Prima tab pane debet etiam .showfacere 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

$().tab

Indicem item elementi ac contenti activum continens. Tab habere debet vel a data-targetvel hrefnisl continens nodi in dom.

<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('ostendere')

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.tabres evenit).

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

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 ut hide.bs.tabres)
shown.bs.tab(in recenter-activo modo-ostenso tab, idem ac pro show.bs.tabeventu)

Si nulla tab iam activa est, hide.bs.tabeventus hidden.bs.tabnon 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.

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