Nxaxamelo wa ntlawa

Mintlawa ya nxaxamelo i xiphemu lexi cinca-cincaka ni lexi nga ni matimba xo kombisa nxaxamelo wa swilo leswi nga endzeni. Cinca no swi andlala ku seketela ntsena kwalomu ka nhundzu yihi na yihi endzeni.

Xikombiso xa xisekelo

Ntlawa wa nxaxamelo wa xisekelo swinene i nxaxamelo lowu nga hlelekangiki lowu nga ni swilo swa nxaxamelo ni titlilasi leti faneleke. Aka ehenhla ka yona hi swihlawulekisi leswi landzelaka, kumbe hi CSS ya wena tanihilaha swi lavekaka hakona.

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu
Nchumu wa vumune
Na wa vuntlhanu

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

Swilo leswi tirhaka

Engetela .activeeka a .list-group-itemku kombisa nhlawulo lowu tirhaka wa sweswi.

Nchumu lowu tirhaka
Nchumu wa vumbirhi
Nchumu wa vunharhu
Nchumu wa vumune
Na wa vuntlhanu

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

Swilo leswi lamaleke

Engetelani .disabledeka a .list-group-itemku endla leswaku yi vonaka yi nga tirhi. Xiya leswaku swiaki swin’wana leswi nga na .disabledswi ta tlhela swi lava JavaScript ya ntolovelo ku tshikisa hi ku helela swiendlakalo swa swona swa ku tsindziyela (xikombiso, swihlanganisi).

Nchumu lowu lamaleke
Nchumu wa vumbirhi
Nchumu wa vunharhu
Nchumu wa vumune
Na wa vuntlhanu

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

Swihlanganisi na swikomba-nkarhi

Tirhisa <a>s kumbe <button>s ku tumbuluxa swilo swa ntlawa wa nxaxamelo lowu nga endliwaka.list-group-item-action hi ku hover, disabled, na swiyimo leswi tirhaka hi ku engetela . Hi hambanyisa titlilasi leti ta vuxisi ku tiyisisa leswaku mintlawa ya nxaxamelo leyi endliweke hi swiaki leswi nga tirhisiki (ku fana na <li>s kumbe <div>s) a yi nyiki ku tikhoma kumbe ku pompa affordance.

Tiyiseka leswaku a wu tirhisi .btntitlilasi ta ntolovelo laha .

Nchumu wa sweswi wa xihlanganisi Nchumu wa vumbirhi wa xihlanganisi Nchumu wa vunharhu wa xihlanganisi Nchumu wa vumune wa xihlanganisi Nchumu wa xihlanganisi lowu nga tirhiki

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

Hi <button>s, u nga ha tlhela u tirhisa disabledxihlawulekisi ematshan’wini ya .disabledtlilasi. Lexi twisaka ku vava, <a>s a yi seketeli xihlawulekisi lexi lamaleke.

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

Hlantswa

Engetela .list-group-flushku susa mindzilakano yin’wana na tikhoneni leti rhendzelekaka ku humesa swilo swa ntlawa wa nxaxamelo ku ya eka tlhelo eka xigwitsirisi xa mutswari (xikombiso, makhadi).

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu
Nchumu wa vumune
Na wa vuntlhanu

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

Ololoka

Engetela .list-group-horizontalku cinca layout ya swilo swa ntlawa wa nxaxamelo ku suka eka vertical ku ya eka horizontal ku tsemakanya tindhawu hinkwato to wisa. Handle ka sweswo, hlawula muxaka lowu hlamulaka .list-group-horizontal-{sm|md|lg|xl}ku endla ntlawa wa nxaxamelo wu va lowu nga etlhelo ku sukela eka ndhawu yoleyo yo wisa ya min-width. Sweswi mintlawa ya nxaxamelo wa horizontal a yi nge hlanganisiwi na mintlawa ya nxaxamelo wa flush.

ProTip: U lava swilo swa ntlawa wa nxaxamelo wa ku anama loku ringanaka loko swi ri horizontal? Engetela .flex-filleka nchumu wun’wana ni wun’wana wa ntlawa wa nxaxamelo.

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu

Nchumu wo karhi
Nchumu wa vumbirhi
Nchumu wa vunharhu

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

Titlilasi ta mongo

Tirhisa titlilasi ta mongo ku xitayili xa nxaxamelo wa swilo leswi nga na xivumbeko xa le ndzhaku na muvala.

Nchumu wo olova wa ntlawa wa nxaxamelo wa xiviri
Nchumu wo olova wa ntlawa wa nxaxamelo wa le henhla
Nchumu wo olova wa ntlawa wa nxaxamelo wa vumbirhi
Nchumu wo olova wa ntlawa wa nxaxamelo wa ku humelela
Nchumu wo olova wa ntlawa wa nxaxamelo wa makhombo
Nchumu wo olova wa ntlawa wa nxaxamelo wa switsundzuxo
Nchumu wo olova wa ntlawa wa nxaxamelo wa info
Nchumu wo olova wa ntlawa wa nxaxamelo wa ku vonakala
Nchumu wo olova wa ntlawa wa nxaxamelo wa munyama

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

Titlilasi ta mongo na tona ti tirha na .list-group-item-action. Xiya ku engeteriwa ka switayele swa hover laha leswi nga riki kona eka xikombiso lexi hundzeke. Nakambe ku seketeriwa .activemfumo; yi tirhise ku kombisa nhlawulo lowu tirhaka eka nchumu wa ntlawa wa nxaxamelo wa mongo.

Nchumu wo olova wa ntlawa wa nxaxamelo wa xiviri Nchumu wo olova wa ntlawa wa nxaxamelo wa le henhla Nchumu wo olova wa ntlawa wa nxaxamelo wa vumbirhi Nchumu wo olova wa ntlawa wa nxaxamelo wa ku humelela Nchumu wo olova wa ntlawa wa nxaxamelo wa makhombo Nchumu wo olova wa ntlawa wa nxaxamelo wa switsundzuxo Nchumu wo olova wa ntlawa wa nxaxamelo wa info Nchumu wo olova wa ntlawa wa nxaxamelo wa ku vonakala Nchumu wo olova wa ntlawa wa nxaxamelo wa munyama

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

Ku hundzisela nhlamuselo eka thekinoloji yo pfuneta

Ku tirhisa muvala ku engetela nhlamuselo swi nyika ntsena xikombiso xa xivono, lexi nga ta ka xi nga hundziseriwi eka vatirhisi va thekinoloji yo pfuneta – ku fana na swihlaya swa xikirini. Tiyisisa leswaku mahungu lama kombisiweke hi muvala ya le rivaleni eka nhundzu hi yoxe (xikombiso tsalwa leri vonakaka), kumbe ya katsiwile hi tindlela tin’wana, ku fana na tsalwa ro engetela leri fihliweke na .sr-onlytlilasi.

Hi tibeji

Engetelani tibeji eka nchumu wihi na wihi wa ntlawa wa nxaxamelo ku kombisa tinhlayo leti nga hlayiwangiki, ntirho ni swin’wana hi ku pfuniwa hi switirhisiwa swin’wana .

Nchumu wa nxaxamelo14.
Nchumu wa vumbirhi wa nxaxamelo2.
Nchumu wa vunharhu wa nxaxamelo1.

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

Swilo leswi nga endzeni ka ntolovelo

Engetelani kwalomu ka HTML yihi na yihi endzeni, hambi ku ri eka mintlawa ya nxaxamelo lowu hlanganisiweke ku fana ni leyi nga laha hansi, hi ku pfuniwa hi switirhisiwa swa flexbox .

Xaxameta nhlokomhaka ya nchumu wa ntlawa

3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona matsalelo man’wana lamatsongo.

Xaxameta nhlokomhaka ya nchumu wa ntlawa

3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona tin’wana ti pfale matsalelo lamatsongo.

Xaxameta nhlokomhaka ya nchumu wa ntlawa

3 wa masiku lama hundzeke

Nhundzu yin’wana ya swikhomela-ndhawu eka ndzimana.

Naswona tin’wana ti pfale matsalelo lamatsongo.

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

Mahanyelo ya JavaScript

Tirhisa thebhu ya JavaScript plugin—yi katsa hi yoxe kumbe hi ku tirhisa bootstrap.jsfayili leyi hlengeletiweke—ku ndlandlamuxa ntlawa wa hina wa nxaxamelo ku endla tipheji ta thebhu ta swilo swa laha kaya.

Kaya Phurofayili Mahungu Switirhisiwa

Nhundzu yin'wana ya swikhomela-ndhawu eka ndzimana leyi fambelanaka na "Kaya". Naswona swin’wana leswi nga endzeni, leswi tirhisiweke laha ntsena ku pad out no tata phanele leyi ya thebhu. Eka vuhumelerisi, swi le rivaleni leswaku a wu ta va na swilo swo tala swa xiviri laha. Naswona ku nga ri ku tsala ntsena. Swi nga va xin’wana ni xin’wana, hakunene. Tsalwa, swifaniso, swivumbeko.

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>

Ku tirhisa swihlawulekisi swa data

U nga endla leswaku ku famba-famba ka ntlawa wa nxaxamelo ku tirha handle ko tsala JavaScript yihi na yihi hi ku boxa ntsena data-toggle="list"kumbe eka elemente. Tirhisa swihlawulekisi leswi swa datha eka .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>

Hi ku tirhisa JavaScript

Endla leswaku nchumu wa nxaxamelo wa tithebhu wu tirha hi ku tirhisa JavaScript (nchumu wun’wana ni wun’wana wa nxaxamelo wu lava ku tirhisiwa hi woxe):

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

U nga tirhisa nchumu wa nxaxamelo wa munhu hi xiyexe hi tindlela to hlayanyana:

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

Ku endla leswaku phanele ya tithebhu yi nyamalala, engetela .fadeeka yin’wana ni yin’wana .tab-pane. Phejini yo sungula ya thebhu yi fanele ku tlhela yi va na .showku endla leswaku nhundzu yo sungula yi vonaka.

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

Maendlelo

$().thebhu ya kona

Ku tirhisa xiaki xa nchumu wa nxaxamelo na xikhomela-nhundzu. Tab yi fanele ku va na a data-targetkumbe ku hrefkongomisa eka node ya xikhomela eka 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('kombisa') .

Hlawula nchumu wa nxaxamelo lowu nyikiweke ivi u kombisa phejini ya wona leyi fambisanaka na wona. Nchumu wun’wana ni wun’wana wa nxaxamelo lowu a wu hlawuriwile khale wu va lowu nga hlawuriwa naswona phejini ya wona leyi fambisanaka na wona ya tumbetiwa. Ku tlhelela eka mufoyini loko phejini ya thebhu yi nga si kombisiwa hakunene (xikombiso, shown.bs.tabxiendlakalo xi nga si humelela).

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

Swiendlakalo

Loko u kombisa thebhu leyintshwa, swiendlakalo swi pfurha hi ku landzelelana loku landzelaka:

hide.bs.tab(eka thebhu leyi tirhaka sweswi)
show.bs.tab(eka thebhu leyi nga ta kombisiwa)
hidden.bs.tab(eka thebhu leyi tirhaka leyi hundzeke, leyi fanaka ni ya hide.bs.tabxiendlakalo)
shown.bs.tab(eka thebhu leyi tirhaka leyintshwa leyi kombisiweke ntsena, leyi fanaka ni ya show.bs.tabxiendlakalo)

Loko ku nga ri na thebhu leyi se a yi tirha, swiendlakalo swa hide.bs.tabna hidden.bs.taba swi nge tirhisiwi.

Muxaka wa xiendlakalo	Nhlamuselo
kombisa.bs.tab	Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu, kambe thebhu leyintshwa yi nga si kombisiwa. Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
ku kombisiwile.bs.tab	Xiendlakalo lexi xi pfurha eka nkombiso wa thebhu endzhaku ka loko thebhu yi kombisiwile. Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka na thebhu leyi tirhaka ya khale (loko yi ri kona) hi ku landzelelana.
fihla.bs.tab	Xiendlakalo lexi xi pfurha loko ku fanele ku kombisiwa thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale yi fanele ku fihliwa). Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu ya sweswi leyi tirhaka na thebhu leyintshwa leyi nga ta tirha ku nga ri khale, hi ku landzelelana.
thebhu ya.bs. leyi fihliweke	Xiendlakalo lexi xi pfurha endzhaku ka loko ku kombisiwile thebhu leyintshwa (xisweswo thebhu leyi tirhaka ya khale ya fihliwile). Tirhisa `event.target`na `event.relatedTarget`ku kongomisa thebhu leyi tirhaka ya khale na thebhu leyintshwa leyi tirhaka, hi ku landzelelana.

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