Source

Sehlopha sa lenane

Lihlopha tsa manane ke karolo e feto-fetohang le e matla bakeng sa ho bonts'a letoto la litaba. Li fetole 'me u li atolose ho tšehetsa hoo e ka bang litaba life kapa life tse ka hare.

Mohlala oa motheo

Sehlopha sa lenane la motheo ke lethathamo le sa reroang le nang le lethathamo la lintho le lihlopha tse nepahetseng. Iketsetse holim'a eona ka likhetho tse latelang, kapa ka CSS ea hau ha ho hlokahala.

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

Lintho tse sebetsang

Eketsa .activeho a .list-group-itemho bontsha kgetho e sebetsang ha jwale.

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

Lintho tse holofetseng

Kenya .disabledho a .list-group-itemho etsa hore e bonahale e sa sebetse. Hlokomela hore likarolo tse ling tse nang le .disabledtsona li tla hloka JavaScript e tloaelehileng ho tima ka botlalo liketsahalo tsa bona tsa ho tobetsa (mohlala, lihokelo).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo ris
  • Porta ac consectetur ac
  • Vestibulum le eros
<ul class="list-group">
  <li class="list-group-item disabled">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>

Sebelisa <a>s kapa <button>s ho theha lethathamo la lintho tse ka etsahalang tsa sehlopha ka hover, ba holofetseng, le maemo a sebetsang ka ho eketsa .list-group-item-action. Re arola lihlopha tsena tsa pseudo ho netefatsa hore lihlopha tse entsoeng ka likarolo tse sa sebelisaneng (joalo <li>ka s kapa <div>s) ha li fane ka monyetla oa ho penya kapa ho tobetsa.

Etsa bonnete ba hore u se ke ua sebelisa .btnlitlelase tse tloaelehileng mona .

Cras justo odio Dapibus ac facilisis in Morbi leo ris Porta ac consectetur ac Vestibulum le 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">Vestibulum at eros</a>
</div>

Ka <button>s, u ka boela ua sebelisa disabledtšobotsi ho e-na le .disabledsehlopha. Ka bomalimabe, <a>s ha e tšehetse batho ba nang le bokooa.

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

Hlakola

Eketsa .list-group-flushho tlosa meeli e meng le likhutlo tse pota-potiloeng ho fana ka lethathamo la lintho tsa sehlopha ka har'a sets'oants'o sa motsoali (mohlala, likarete).

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

Lihlopha tsa maemo

Sebelisa litlelase tsa maemo ho etsa lethathamo la lintho tse nang le bokantle le mebala e metle.

  • Dapibus ac facilisis in
  • Ntho e bonolo ea lenane la mantlha la sehlopha
  • Ntho e bonolo ea lenane la bobeli la sehlopha
  • Ntho e bonolo ea lenane la katleho ea sehlopha
  • Ntho e bonolo ea lethathamo la likotsi tsa sehlopha
  • Ntho e bonolo ea lethathamo la tlhokomeliso ea sehlopha
  • Ntho e bonolo ea lethathamo la lintlha tsa sehlopha
  • Ntho e bonolo ea lenane la leseli la sehlopha
  • Ntho e bonolo ea lenane le lefifi la sehlopha
<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>

Litlelase tsa Contextual li boetse li sebetsa le .list-group-item-action. Ela hloko tlatsetso ea mekhoa ea hover mona e seng teng mohlaleng o fetileng. Hape ho tšehetsoa ke .activemmuso; e sebelise ho bontša khetho e sebetsang lethathamong la maemo a sehlopha.

Dapibus ac facilisis in Ntho e bonolo ea lenane la mantlha la sehlopha Ntho e bonolo ea lenane la bobeli la sehlopha Ntho e bonolo ea lenane la katleho ea sehlopha Ntho e bonolo ea lethathamo la likotsi tsa sehlopha Ntho e bonolo ea lethathamo la tlhokomeliso ea sehlopha Ntho e bonolo ea lethathamo la lintlha tsa sehlopha Ntho e bonolo ea lenane la leseli la sehlopha Ntho e bonolo ea lenane le lefifi la sehlopha 
<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>
Ho fetisa moelelo ho litheknoloji tse thusang

Ho sebelisa mebala ho eketsa moelelo ho fana feela ka pontšo ea pono, e ke keng ea fetisetsoa ho basebelisi ba theknoloji e thusang - joalo ka sebali sa skrine. Netefatsa hore tlhahisoleseding e hlahisitsweng ke mmala e ka ba e totobetseng ho tswa ho dikahare ka boyona (mohlala, mongolo o bonahalang), kapa e kenyeleditswe ka mekgwa e meng, e kang mongolo o tlatsetso o patilweng le .sr-onlysehlopha.

Ka libeche

Kenya libeche lethathamong lefe kapa lefe la sehlopha ho bontša lipalo tse sa baloang, liketsahalo, le tse ling ka thuso ea lisebelisoa tse ling .

  • Cras justo odio14
  • Dapibus ac facilisis in2
  • Morbi leo ris1 
<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>

Litaba tse ikhethileng

Kenya hoo e batlang e le HTML efe kapa efe ka hare, esita le bakeng sa lihlopha tsa lenane tse hokahaneng joalo ka e ka tlase, ka thuso ea lisebelisoa tsa flexbox .

Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

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

Donec id elit non mi porta.
Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

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

Donec id elit non mi porta.
Etsa lethathamo la lihlooho tsa sehlopha
Matsatsi a 3 a fetileng

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 flex-column align-items-start 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 flex-column align-items-start">
    <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 flex-column align-items-start">
    <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>

Boitšoaro ba JavaScript

Sebelisa tab "JavaScript plugin" - e kenyelle ka bonngoe kapa ka bootstrap.jsfaele e hlophisitsoeng - ho atolosa sehlopha sa rona sa lenane ho theha liphasejene tsa litaba tsa lehae.

Ho tloha ka nako eo, ho ke ke ha e-ba bonolo hore motho a qetelle a se na matla. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim 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 e se 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>

Ho sebelisa litšobotsi tsa data

O ka kenya ts'ebetso ea sehlopha sa lethathamo ntle le ho ngola JavaScript efe kapa efe ka ho hlakisa feela data-toggle="list"kapa ho ntho e itseng. Sebelisa litšobotsi tsena tsa data ho .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>

Ka JavaScript

Lumella ntho ea lethathamo la li-tabable ka JavaScript (ntho ka 'ngoe ea lethathamo e hloka ho kengoa tšebetsong ka bonngoe):

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

O ka kenya tšebetsong lethathamo la ntho ka 'ngoe ka mekhoa e mengata:

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

Ho etsa hore phanele ea li-tab e nyamele, eketsa .fadeho e 'ngoe le e 'ngoe .tab-pane. Letlapa la pele la li-tab le lona le tlameha .showho etsa hore litaba tsa pele li bonahale.

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

Mekhoa

$().tab

E kenya tshebetsong karolo ya lenane le setshelo sa dikahare. Tab e lokela ho ba le node ea setshelo data-targetkapa e hreflebisitsoeng ho 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('show')

E khetha lethathamo le fanoeng ebe e bontša karolo e amanang le eona. Ntho efe kapa efe e 'ngoe ea lethathamo e neng e khethiloe nakong e fetileng e fetoha e sa khethoeng 'me karolo ea eona e amanang le eona ea patoa. E kgutlela ho moletsi pele fenstere ya tab e bontshwa (mohlala, pele shown.bs.tabketsahalo e etsahala).

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

Liketsahalo

Ha o hlahisa tab e ncha, liketsahalo li tla ka tatellano e latelang:

  1. hide.bs.tab(tabong ea hajoale e sebetsang)
  2. show.bs.tab(letlapeng le tlang ho bontšoa)
  3. hidden.bs.tab(tabong e fetileng e sebetsang, e ts'oanang le ea hide.bs.tabketsahalo)
  4. shown.bs.tab(tabong e sa tsoa hlaha, e ts'oanang le ea show.bs.tabketsahalo)

Haeba ho se tab e neng e se e ntse e sebetsa, liketsahalo hide.bs.table hidden.bs.tabliketsahalo li ke ke tsa hlakoloa.

Mofuta oa ketsahalo Tlhaloso
bontša.bs.tab Ketsahalo ena e qala ho bonts'a li-tab, empa pele tab e ncha e bontšoa. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
e bonts'itsoeng.bs.tab Ketsahalo ena e tla hlaha ka mor'a hore tab e hlahisoe. Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang le tab e fetileng e sebetsang (haeba e le teng) ka ho latellana.
pata.bs.tab Ketsahalo ena e tuka ha tab e ncha e tla bontšoa ('me ka hona tab e fetileng e sebetsang e lokela ho patoa). Sebelisa event.targetle event.relatedTargetho shebisa tab e sebetsang ea hajoale le e ncha e tlang ho sebetsa haufinyane, ka ho latellana.
patiloeng.bs.tab Ketsahalo ena e tuka ka mor'a hore ho bontšoe tabo e ncha ('me kahoo tab e fetileng e sebetsang e patiloe). Sebelisa event.targetle event.relatedTargetho shebisa tab e fetileng e sebetsang le tab e ncha e sebetsang, ka ho latellana. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})