in English

Uluhlu lweqela

Amaqela oluhlu ayinxalenye eguquguqukayo kwaye enamandla yokubonisa uluhlu lomxholo. Guqula kwaye uyandise ukuxhasa malunga nawo nawuphi na umxholo ongaphakathi.

Umzekelo osisiseko

Elona qela loluhlu olusisiseko luluhlu olungacwangciswanga olunezinto zoluhlu kunye neeklasi ezifanelekileyo. Yakha phezu kwayo ngeenketho ezilandelayo, okanye ngeyakho iCSS njengoko kufuneka.

Into
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Izinto ezisebenzayo

Yongeza .activekwi- .list-group-itema ukubonisa ukhetho olusebenzayo lwangoku.

Into esebenzayo
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Izinto ezikhubazekileyo

Yongeza .disabledku-a .list-group-itemukuze ibonakale ivaliwe. Qaphela ukuba ezinye izinto kunye .disablednazo ziyakufuna iJavaScript yesiko ukuvala imisitho yokucofa ngokupheleleyo (umzekelo, amakhonkco).

Into ekhubazekileyo
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Amakhonkco kunye namaqhosha

Sebenzisa i- <a>s okanye <button>i-s ukwenza uluhlu lwezinto ezisebenzayo zeqela nge-hover, ivaliwe, kunye neemeko ezisebenzayo ngokudibanisa .list-group-item-action. Sahlula ezi klasi pseudo-ukuqinisekisa uluhlu amaqela ezenziwe non-interactive element (ezifana <li>s okanye <div>s) awaboneleli ngonqakrazo okanye ucofe ukufikelela.

Qinisekisa ukuba ungasebenzisi .btniiklasi eziqhelekileyo apha .

Into yangoku yekhonkco Into yesibini yekhonkco Into yesithathu yekhonkco Into yesine yekhonkco Into yekhonkco evaliweyo

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

Nge <button>s, ungenza kwakhona ukusebenzisa disableduphawu endaweni .disabledyeklasi. Okulusizi kukuba, <a>abaluxhasi uphawu lokukhubazeka.

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

Gubha

Yongeza .list-group-flushukususa imida ethile kunye neekona ezingqukuva ukunika uluhlu lwezinto zeqela edge-to-edge kwisikhongozeli esingumzali (umzekelo, amakhadi).

Into
Into yesibini
Into yesithathu
Into yesine
Kwaye owesihlanu

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

Ukuthe tye

Yongeza .list-group-horizontalukutshintsha uyilo loluhlu lwezinto zeqela ukusuka ngokuthe nkqo ukuya ngokuthe tye kuzo zonke iindawo zokuqhawula. Kungenjalo, khetha ulwahlulo oluphendulayo .list-group-horizontal-{sm|md|lg|xl}ukwenza uluhlu lweqela elithe tyaba liqala kwelo breakpoint min-width. Okwangoku amaqela oluhlu oluthe tye akanakudityaniswa namaqela oluhlu lokugungxula.

I-ProTip: Ufuna izinto zeqela ezinobubanzi obulinganayo xa uxwesileyo? Yongeza .flex-fillkuluhlu ngalunye into yeqela.

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

Into
Into yesibini
Into yesithathu

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

Iiklasi zomxholo

Sebenzisa iiklasi zomxholo ukwenza uluhlu lwezinto ezinemvelaphi kunye nombala obalaseleyo.

Uluhlu olulula olumiselweyo umba weqela
Uluhlu olulula olusisiseko lwento yeqela
Into elula yoluhlu lwesibini lweqela
Inqaku leqela lempumelelo elilula
Uluhlu olulula lwezinto ezinobungozi kwiqela
Uluhlu olulula loluhlu lwezinto zeqela
Uluhlu lolwazi olulula into yeqela
Uluhlu olulula loluhlu into yeqela
Into yeqela elilula elimnyama

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

Iiklasi zomxholo nazo zisebenza kunye .list-group-item-action. Qaphela ukongezwa kwezitayile ze-hover apha azikho kumzekelo wangaphambili. Ikwaxhaswa .activengurhulumente; yifake ukubonisa ukhetho olusebenzayo kuluhlu lomxholo wento yeqela.

Uluhlu olulula olumiselweyo umba weqela Uluhlu olulula olusisiseko lwento yeqela Into elula yoluhlu lwesibini lweqela Inqaku leqela lempumelelo elilula Uluhlu olulula lwezinto ezinobungozi kwiqela Uluhlu olulula loluhlu lwezinto zeqela Uluhlu lolwazi olulula into yeqela Uluhlu olulula loluhlu into yeqela Into yeqela elilula elimnyama

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

Ukuhambisa intsingiselo kwiiteknoloji ezincedisayo

Ukusebenzisa umbala ukongeza intsingiselo kubonelela kuphela ngesalathiso esibonakalayo, esingayi kuthunyelwa kubasebenzisi betekhnoloji encedisayo - njengezifundi zesikrini. Qinisekisa ukuba ulwazi olubonakaliswe ngumbala lucacile kumxholo ngokwawo (umz. umbhalo obonakalayo), okanye lubandakanyiwe ngezinye iindlela, ezifana nesicatshulwa esongezelelweyo esifihlwe .sr-onlyeklasini.

Neebheji

Yongeza iibheji kuyo nayiphi na into yeqela loluhlu ukubonisa amanani angafundwanga, umsebenzi, kunye nokunye ngoncedo lwezinye izinto eziluncedo .

Into yoluhlu14
Into yoluhlu lwesibini2
Into yoluhlu lwesithathu1

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

Umxholo oqhelekileyo

Yongeza phantse nayiphi na i-HTML ngaphakathi, nakuluhlu lwamaqela adityanisiweyo afana neli lingezantsi, ngoncedo lwezinto eziluncedo ze- flexbox .

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kunye noshicilelo oluncinci.

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kwaye ezinye iincwadi ezincinci zithulisiwe.

Uluhlu lwesihloko sento yeqela

kwiintsuku ezi-3 ezidlulileyo

Omnye umxholo wesibambi-ndawo kumhlathi.

Kwaye ezinye iincwadi ezincinci zithulisiwe.

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

Ukuziphatha kweJavaScript

Sebenzisa i-plugin ye-JavaScript yethebhu-yibandakanye ngabanye okanye bootstrap.jsngefayile edibeneyo-ukwandisa iqela lethu loluhlu ukwenza iipaneli ze-tableable zomxholo wendawo.

Ekhaya Inkangeleko yesimo Imiyalezo Iisetingi

Omnye umxholo wesibambi-ndawo kumhlathi onxulumene "neKhaya". Kwaye omnye umxholo ongaphezulu, osetyenziswe apha nje ukucofa kwaye ugcwalise le ndawo yolawulo. Kwimveliso, ngokuqinisekileyo uya kuba nomxholo wokwenyani apha. Kwaye hayi nje umbhalo. Inokuba nantoni na, ngokwenene. Isicatshulwa, imifanekiso, iifom.

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>

Ukusebenzisa iimpawu zedatha

Unokwenza ukhangelo lweqela loluhlu ngaphandle kokubhala nasiphi na iJavaScript ngokuchaza ngokulula data-toggle="list"okanye kwinto. Sebenzisa ezi mpawu zedatha kwi .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>

NgeJavaScript

Yenza into yoluhlu olunokubakho ngeJavaScript (uluhlu ngalunye kufuneka luvulwe ngokwalo):

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

Unokwenza uluhlu ngalunye lusebenze ngeendlela ezininzi:

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

Ukwenza indawo yolawulo yeethebhu iphelelwe, yongeza .fadekuyo nganye .tab-pane. Ipheyini yethebhu yokuqala kufuneka kwakhona .showyenze umxholo wokuqala ubonakale.

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

Iindlela

$().tab

Yenza kusebenze into yoluhlu kunye nesiqulatho somxholo. Isithuba kufuneka sibenendawo data-targetokanye indawo hrefyesikhongozeli kwiDOM.

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

Ikhetha umba woluhlu olunikiweyo kwaye ibonise isahlulo sayo esinxulumeneyo. Nayiphi na enye into yoluhlu ebikhe yakhethwa ngaphambili ayikhethwanga kwaye isahlulo sayo esinxulumeneyo siyafihlwa. Ibuyisela kumnxebi phambi kokuba ipayini yethebhu iboniswe ngokwenene (umzekelo, phambi kokuba shown.bs.tabisiganeko senzeke).

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

Iziganeko

Xa ubonisa ithebhu entsha, iziganeko zivutha ngolu hlobo lulandelayo:

hide.bs.tab(kwithebhu esebenzayo yangoku)
show.bs.tab(kwi-eza kuboniswa thebhu)
hidden.bs.tab(kwithebhu esebenzayo yangaphambili, efanayo nale hide.bs.tabyesiganeko)
shown.bs.tab(kwisithuba esandula ukusebenza esivele sibonise ithebhu, efanayo show.bs.tabnesesiganeko)

Ukuba akukho thebhu ibisele iyasebenza, i hide.bs.tabkunye hidden.bs.tabneziganeko aziyi kugxothwa.

Uhlobo lomsitho	Inkcazo
bonisa.bs.tab	Esi siganeko sivutha kumboniso wethebhu, kodwa ngaphambi kokuba ithebhu entsha iboniswe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
ebonisiweyo.bs.tab	Esi siganeko sitshisa kwi-tab show emva kokuba ithebhu ibonisiwe. Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa isithuba esisebenzayo kunye nesithuba sangaphambili esisebenzayo (ukuba sikhona) ngokulandelelanayo.
fihla.bs.tab	Esi siganeko sitshisa xa isithuba esitsha siza kuboniswa (kwaye ke isithuba sangaphambili esisebenzayo siza kufihlwa). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa ithebhu esebenzayo yangoku kunye nethebhu entsha eza kusebenza ngokukhawuleza, ngokulandelelanayo.
efihliweyo.bs.tab	Esi siganeko sivutha emva kokuba ithebhu entsha ibonisiwe (kwaye ke isithuba sangaphambili esisebenzayo sifihliwe). Sebenzisa `event.target`kunye `event.relatedTarget`nokujolisa kwithebhu esebenzayo yangaphambili kunye nethebhu entsha esebenzayo, ngokulandelelanayo.

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