Source

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.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum li 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>

Tiştên çalak

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum li 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>

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum li 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>

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

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

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

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum li 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>

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.

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

Dersên hevoksaziyê

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

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

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 hilbijartinek çalak li ser babetek komek navnîşê ya kontekstî nîşan bide.

Dapibus ac facilisis in 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">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>
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 - wek xwendevanên ekranê. Piştrast bikin ku agahdariya ku bi reng tê destnîşan kirin an ji naverokê bixwe diyar e (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 .

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

naveroka Custom

Nêzîkî her HTML-ê di hundurê 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ê

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

Donec id elit non mi porta.
Lîsteya sernavê komê
3 roj berê

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

Donec id elit non mi porta.
Lîsteya sernavê komê
3 roj berê

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>

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.

Velit aute mollit ipsum and dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Digel vê yekê, ku voluptate ji bo demajoya ne hindik veguhezîne, id ut nulla ye. 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>

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.

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

Bi 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 (e) {
  e.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 This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})