in English

Lîsteya koma

Komên navnîşê ji bo nîşandana rêze naverokê pêkhateyek maqûl û hêzdar in. Biguherînin û wan dirêj bikin da ku hema hema her naverokê di hundurê de piştgirî bikin.

Mînaka bingehîn

Koma navnîşê ya herî bingehîn navnîşek nerêkûpêk e ku bi hêmanên navnîşê û çînên rast ve girêdayî ye. Li ser wê bi vebijarkên ku li pey têne çêkirin, an jî li gorî hewcedariyê bi CSS-ya xwe re ava bikin.

  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • Tiştek çaremîn
  • Û ya pêncemîn
<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>

Tiştên çalak

Ji .activebo .list-group-itemku hilbijartina çalak a heyî nîşan bide li a-yê zêde bike.

  • Tiştek çalak
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • Tiştek çaremîn
  • Û ya pêncemîn
<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>

Tiştên astengdar

Ji .disabledbo .list-group-itemku ew neçalak xuya bike lê zêde bike. Bala xwe bidinê ku hin hêmanên bi .disabledwan re jî dê JavaScript-a xwerû hewce bike ku bûyerên klîkên wan bi tevahî neçalak bike (mînak, girêdan).

  • Tiştek astengdar
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • Tiştek çaremîn
  • Û ya pêncemîn
<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>

<a>S an <button>s bikar bînin da ku bi lêzêdekirina tomarên komê yên navnîşê yên çalak bi hover, neçalak, û rewşên çalak biafirînin .list-group-item-action. Em van pseudo-polan ji hev vediqetînin da ku komên navnîşê yên ku ji hêmanên ne-înteraktîf (wek <li>s an <div>s) hatine çêkirin, dravdanek klîk an tap peyda nekin.

Bawer bikin ku hûn li vir dersên standard bikar.btn neynin .

Babetê girêdana heyî Tiştek girêdanek duyemîn Tiştek girêdana sêyemîn Tiştek girêdana çaremîn Tiştek girêdanek neçalak 
<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>

Bi <button>s re, hûn dikarin li disabledşûna .disabledpolê jî taybetmendiyê bikar bînin. Mixabin, <a>s taybetmendiya neçalak piştgirî nakin.

<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

Zêde .list-group-flushbikin ku hin tixûb û quncikên girover werin rakirin da ku navnîşên tomarên komê yên di konteynirek dêûbav de ji qerax-bi-qev re werin pêşkêş kirin (mînak, kart).

  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • Tiştek çaremîn
  • Û ya pêncemîn
<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>

Asumane

Zêde .list-group-horizontalbikin ku sêwirana tomarên komê yên navnîşê ji vertîkal berbi horizontî li ser hemî xalên veqetandinê biguhezînin. Alternatîf, guhertoyek bersivdar hilbijêrin .list-group-horizontal-{sm|md|lg|xl}da ku komek navnîşek horizontî ya ku ji wê xala veqetînê dest pê dike çêbike min-width. Heya nuha komên navnîşên horizontî bi komên navnîşa rijandin re nayên hev kirin.

ProTip: Dema ku horizontî ye, hûn tiştên komê yên navnîşa wekhev-fireh dixwazin? Li .flex-fillher lîsteya grûpê zêde bikin.

  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
  • An babete
  • Tiştek duyemîn
  • Tiştek sêyemîn
<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>

Dersên hevoksaziyê

Dersên kontekstê bikar bînin da ku navnîşên navnîşên bi paşxane û rengek dewletparêz şêwaz bikin.

  • Tiştek koma navnîşa xwerû ya hêsan
  • Tiştek koma navnîşa bingehîn a hêsan
  • Tiştek koma navnîşa navîn a hêsan
  • Tiştek komê ya navnîşa serfiraziya hêsan
  • Tiştek koma lîsteya xeterê ya hêsan
  • Tiştek koma navnîşa hişyariya hêsan
  • Tiştek koma navnîşa agahdariya hêsan
  • Tiştek koma navnîşa ronahiyê ya hêsan
  • Tiştek koma navnîşa tarî ya hêsan
<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>

Dersên kontekstual jî bi kar dikin .list-group-item-action. Bala xwe bidin lêzêdekirina şêwazên hover ku li vir di mînaka berê de nîn in. Her wiha .activedewlet jî piştgirî dike; wê bicîh bikin da ku hilbijarkek çalak li ser hêmanek koma navnîşa kontekstî destnîşan bikin.

Tiştek koma navnîşa xwerû ya hêsan Tiştek koma navnîşa bingehîn a hêsan Tiştek koma navnîşa navîn a hêsan Tiştek komê ya navnîşa serfiraziya hêsan Tiştek koma lîsteya xeterê ya hêsan Tiştek koma navnîşa hişyariya hêsan Tiştek koma navnîşa agahdariya hêsan Tiştek koma navnîşa ronahiyê ya hêsan Tiştek koma navnîşa tarî ya hêsan 
<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>
Veguheztina wateya teknolojiyên arîkar

Bikaranîna rengan ji bo zêdekirina wateyê tenê nîşanek dîtbarî peyda dike, ku dê ji bikarhênerên teknolojiyên arîkar re neyê ragihandin - mîna xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng têne destnîşan kirin an ji naverokê bi xwe eşkere ye (mînak nivîsa xuyayî), an jî bi rêyên alternatîf ve tê de, wek mînak nivîsa zêde ya ku bi .sr-onlypolê re veşartî ye.

Bi nîşanan

Nîşanan li her tomarek koma navnîşê zêde bikin da ku bi alîkariya hin karûbaran hejmarên nexwendî, çalakî û hêj bêtir nîşan bidin .

  • Tiştek lîsteyê14
  • Tiştek lîsteya duyemîn2
  • Tiştek lîsteya sêyemîn1 
<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>

naveroka Custom

Nêzîkî her HTML-ê di hundurê xwe de zêde bikin, tewra ji bo komên navnîşê yên girêdayî mîna ya jêrîn, bi alîkariya karûbarên flexbox .

Lîsteya sernavê komê
3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hinek çapek piçûk.
Lîsteya sernavê komê
3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hin çapa piçûk bêdeng kirin.
Lîsteya sernavê komê
3 roj berê

Di paragrafekê de hin naveroka cîhgiran.

Û hin çapa piçûk bêdeng kirin. 
<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>

tevgera JavaScript

Pêveka JavaScript-a tabê bikar bînin - wê bi serê xwe an bi bootstrap.jspelê berhevkirî ve têxin nav xwe - da ku koma navnîşa me dirêj bike da ku pelên tabloyên naveroka herêmî biafirîne.

Hin naverokên cîhê di paragrafek bi "Mal" re têkildar in. Û hin naverokên din, ku li vir têne bikar anîn tenê ji bo derxistin û dagirtina vê panelê tabloyê. Di hilberînê de, hûn ê eşkere li vir naveroka rastînek bêtir hebe. Û ne tenê nivîs. Ew dikare her tişt be, bi rastî. Nivîs, wêne, form.

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>

Taybetmendiyên daneyê bikar tînin

Hûn dikarin navîgasyonek koma navnîşê bêyî nivîsandina JavaScript-ê bi tenê diyar data-toggle="list"kirin an li ser hêmanek çalak bikin. Van taybetmendiyên daneyê li ser bikar bînin .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>

Bi rêya JavaScript

Bi JavaScript-ê xala navnîşa tabloyê çalak bike (pêdivî ye ku her tomarek lîsteyê ferdî were çalak kirin):

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

Hûn dikarin bi çend awayan tomarek navnîşê ya kesane çalak bikin:

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

Bandora fade

Ji bo ku panela tabloyan bişewitînin, li her yekê zêde .fadebikin .tab-pane. Pêdivî ye ku tabloya yekem jî pêdivî .showye ku naveroka destpêkê xuya bike.

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

Methods

$().tab

Hêmanek tomar û naverokê ya navnîşê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe.href

<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('nîşan bide')

Tişta navnîşê ya diyarkirî hildibijêre û paceya têkildar nîşan dide. Tiştek din a navnîşê ya ku berê hatî hilbijartin, nehilbijartî dibe û pencereya wê ya têkildar tê veşartin. Berî ku tabloya tabloyê bi rastî were xuyang kirin vedigere bangkerê (mînak, berî ku shown.bs.tabbûyer çêbibe).

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

Events

Dema ku tabloyek nû nîşan dide, bûyer bi rêza jêrîn dişewitin:

  1. hide.bs.tab(li ser tabloya çalak a heyî)
  2. show.bs.tab(li ser tabloya ku tê xuyang kirin)
  3. hidden.bs.tab(li ser tabloya çalak a berê, heman wekî hide.bs.tabbûyerê)
  4. shown.bs.tab(li ser tabloya ku nû-çalak hatî xuyang kirin, heman wekî show.bs.tabbûyerê)

Ger tu tablo jixwe çalak nebûya, hide.bs.tabû hidden.bs.tabbûyer nayên avêtin.

Cureyê bûyerê Terîf
nîşan bide.bs.tab Ev bûyer di pêşandana tabloyê de dişewite, lê berî ku tabloya nû were xuyang kirin. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
nîşan dan.bs.tab Ev bûyer piştî ku tabloyek hate pêşandan li ser pêşandana tabê derdikeve. Bi rêzdarî tabloya çalak û tabloya çalak a berê (heke hebe) bikar bînin event.targetû bikin hedef.event.relatedTarget
veşêre.bs.tab Dema ku tabloyek nû were xuyang kirin ev bûyer dişewite (û bi vî rengî tabloya çalak a berê were veşartin). Bi rêzê ve tabloya aktîf a heyî û tabloya nû ya zû-çalak bibe event.targetû armanc bikin.event.relatedTarget
veşartî.bs.tab Ev bûyer piştî ku tabloyek nû tê xuyang kirin dişewite (û bi vî rengî tabloya çalak a berê tê veşartin). Bi rêzê ve tabloya çalak a berê û tabloya nû ya çalak bikar bînin event.targetû bikin hedef.event.relatedTarget 
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})