Source

Listo grupo

Listogrupoj estas fleksebla kaj potenca komponanto por montri serion de enhavo. Modifi kaj etendi ilin por subteni preskaŭ ajnan enhavon ene.

Baza ekzemplo

La plej baza listogrupo estas neordigita listo kun listeroj kaj la taŭgaj klasoj. Konstruu ĝin per la ebloj kiuj sekvas, aŭ per via propra CSS laŭbezone.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe 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>

Aktivaj eroj

Aldonu .activeal a .list-group-itempor indiki la nunan aktivan elekton.

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe 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>

Malebligitaj eroj

Aldonu .disabledal a .list-group-itempor ke ĝi aspektu malŝaltita. Notu, ke iuj elementoj kun .disabledankaŭ postulos kutiman JavaScript por plene malŝalti siajn klakajn eventojn (ekz. ligiloj).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe 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>

Ligiloj kaj butonoj

Uzu <a>s aŭ <button>s por krei ageblajn listajn gruperojn kun ŝvebado, malfunkciigita kaj aktiva statoj aldonante .list-group-item-action. Ni apartigas ĉi tiujn pseŭdo-klasojn por certigi, ke listogrupoj faritaj el ne-interagaj elementoj (kiel <li>s aŭ <div>s) ne donas alklakon aŭ frapeton.

Nepre ne uzu la normajn .btnklasojn ĉi tie .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulo ĉe 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>

Per <button>s, vi ankaŭ povas uzi la disabledatributon anstataŭ la .disabledklason. Bedaŭrinde, <a>s ne subtenas la malfunkciigitan atributon.

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

Flush

Aldonu .list-group-flushpor forigi kelkajn randojn kaj rondigitajn angulojn por bildigi listgrupojn rando al rando en gepatra ujo (ekz. kartoj).

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulo ĉe 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>

Horizontala

Aldonu .list-group-horizontalpor ŝanĝi la aranĝon de listgrupoj de vertikala al horizontala tra ĉiuj rompopunktoj. Alternative, elektu respondeman varianton .list-group-horizontal-{sm|md|lg|xl}por fari listgrupon horizontala komencante ĉe tiu rompopunkto min-width. Nuntempe horizontalaj listogrupoj ne povas esti kombinitaj kun fluaj listogrupoj.

ProTip: Ĉu vi volas egallarĝajn listajn grupaĵojn kiam horizontale? Aldonu .flex-fillal ĉiu listo grupo eron.

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>

Kuntekstaj klasoj

Uzu kuntekstajn klasojn por stiligi listaĵojn kun laŭta fono kaj koloro.

Dapibus ac facilisis in
Simpla primara lista grupero
Simpla sekundara listo-grupelemento
Simpla sukceslista grupa ero
Simpla danĝerlisto grupaĵo
Simpla avertlista grupero
Simpla infolisto grupa ero
Simpla lumlista grupaĵo
Simpla malhela listo grupaĵo

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

Kuntekstaj klasoj ankaŭ funkcias kun .list-group-item-action. Notu la aldonon de la ŝvebstiloj ĉi tie ne ĉeestantaj en la antaŭa ekzemplo. Ankaŭ subtenas la .activeŝtato; apliku ĝin por indiki aktivan elekton sur kunteksta listo grupelemento.

Dapibus ac facilisis in Simpla primara lista grupero Simpla sekundara listo-grupelemento Simpla sukceslista grupa ero Simpla danĝerlisto grupaĵo Simpla avertlista grupero Simpla infolisto grupa ero Simpla lumlista grupaĵo Simpla malhela listo grupaĵo

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

Transdonante signifon al helpaj teknologioj

Uzi koloron por aldoni signifon nur provizas vidan indikon, kiu ne estos transdonita al uzantoj de helpaj teknologioj - kiel ekranlegiloj. Certigu, ke informoj indikitaj per la koloro estas aŭ evidenta de la enhavo mem (ekz. la videbla teksto), aŭ estas inkluzivita per alternativaj rimedoj, kiel aldona teksto kaŝita kun la .sr-onlyklaso.

Kun insignoj

Aldonu insignojn al iu ajn listgrupo por montri nelegitajn kalkulojn, agadon kaj pli helpe de iuj iloj .

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>

Propra enhavo

Aldonu preskaŭ ajnan HTML-on ene, eĉ por ligitaj listogrupoj kiel tiu ĉi sube, helpe de flexbox-utiloj .

Listo de grupa rubriko

antaŭ 3 tagoj

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

Donec id elit non mi porta.

Listo de grupa rubriko

antaŭ 3 tagoj

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

Donec id elit non mi porta.

Listo de grupa rubriko

antaŭ 3 tagoj

Donec id elit non mi porta gravida at eget metus. Mecenas 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 konduto

Uzu la langetan JavaScript-kromaĵon—inkludu ĝin individue aŭ per la kompilita bootstrap.jsdosiero—por pligrandigi nian listgrupon por krei tabulajn fenestrojn de loka enhavo.

Hejmo Profilo Mesaĝoj Agordoj

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minimum 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>

Uzante datumajn atributojn

Vi povas aktivigi listan grupnavigadon sen verki JavaScript per simple specifi data-toggle="list"aŭ sur elemento. Uzu ĉi tiujn datumajn atributojn sur .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>

Per JavaScript

Ebligu tabeleblan listeron per JavaScript (ĉiu listero devas esti aktivigita individue):

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

Vi povas aktivigi individuan listeron en pluraj manieroj:

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

Por ke klapeta panelo fadiĝu, aldonu .fadeal ĉiu .tab-pane. La unua klapeta panelo ankaŭ devas .showvidigi la komencan enhavon.

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

Metodoj

$().tab

Aktivigas listo-elementon kaj enhavujon. Tab devus havi aŭ a data-targetaŭ hrefcelanta ujo-nodon en la 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('montri')

Elektas la donitan listeron kaj montras ĝian rilatan panelon. Ajna alia listero, kiu estis antaŭe elektita, fariĝas neelektita kaj ĝia rilata panelo estas kaŝita. Revenas al la alvokanto antaŭ ol la langeto-fenestro efektive montriĝis (ekzemple antaŭ ol la shown.bs.tabevento okazas).

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

Eventoj

Kiam oni montras novan langeton, la eventoj ekfunkciigas en la sekva sinsekvo:

hide.bs.tab(en la nuna aktiva langeto)
show.bs.tab(en la montrota langeto)
hidden.bs.tab(sur la antaŭa aktiva langeto, la sama kiel por la hide.bs.tabevento)
shown.bs.tab(en la lastatempe aktiva ĵus montrita langeto, la sama kiel por la show.bs.tabevento)

Se neniu langeto jam estis aktiva, la eventoj hide.bs.tabkaj hidden.bs.tabne estos pafitaj.

Eventa tipo	Priskribo
montri.bs.tab	Ĉi tiu evento ekfunkciigas sur langeto, sed antaŭ ol la nova langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
montrata.bs.tab	Ĉi tiu evento ekfunkciigas sur langeto-spektaklo post kiam langeto estis montrita. Uzu `event.target`kaj `event.relatedTarget`por celi la aktivan langeton kaj la antaŭan aktivan langeton (se disponeblaj) respektive.
kaŝi.bs.tab	Ĉi tiu evento pafas kiam nova langeto estas montrata (kaj tiel la antaŭa aktiva langeto estas kaŝota). Uzu `event.target`kaj `event.relatedTarget`por celi la nunan aktivan langeton kaj la novan baldaŭ aktivan langeton, respektive.
kaŝita.bs.tab	Ĉi tiu evento ekfunkcias post kiam nova langeto estas montrita (kaj tiel la antaŭa aktiva langeto estas kaŝita). Uzu `event.target`kaj `event.relatedTarget`por celi la antaŭan aktivan langeton kaj la novan aktivan langeton, respektive.

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