Source

Lenaneo sehlopha

Dihlopha tša lenaneo ke karolo ye e fetofetogago le maemo le ye maatla ya go bontšha lelokelelo la diteng. Fetoša le go di katološa go thekga mo e ka bago diteng le ge e le dife ka gare.

Mohlala wa motheo

Sehlopha sa lenaneo la motheo kudu ke lenaneo leo le sa rulaganywago leo le nago le dilo tša lenaneo le diklase tša maleba. Aga godimo ga yona ka dikgetho tše di latelago, goba ka CSS ya gago ge go nyakega.

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
  • Porta ac consectetur e le e leng
  • Vestibulum ka 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>

Dilo tše di šomago

Oketša .activego a .list-group-itemgo laetša kgetho ya bjale ye e šomago.

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
  • Porta ac consectetur e le e leng
  • Vestibulum ka 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>

Dilo tše di golofetšego

Oketša .disabledgo a .list-group-itemgo dira gore e bonagale e golofetše. Hlokomela gore dielemente tše dingwe tše di nago le di .disabledtla nyaka gape JavaScript ya tlwaelo go šitiša ka botlalo ditiragalo tša tšona tša go klika (mohlala, dikgokagano).

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
  • Porta ac consectetur e le e leng
  • Vestibulum ka 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>

Šomiša <a>s goba <button>s go hlama diaetheme tša sehlopha sa lenaneo tše di ka tšewago kgato.list-group-item-action ka go hover, go golofala, le maemo a go šoma ka go tlaleletša . Re aroganya diklase tše tša maaka go netefatša gore dihlopha tša lenaneo tšeo di dirilwego ka dielemente tšeo di sa dirišanego (go swana le <li>s goba <div>s) ga di neelane ka go kgona go kgotla goba go kgotla.

Kgonthiša gore ga o šomiše .btndiklase tša maemo mo .

Cras e le feela odio Dapibus ac facilisis ka Morbi leo le legolo Porta ac consectetur e le e leng Vestibulum ka 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>

Ka <button>s, o ka dira gape tšhomišo ya disabledseka go e na le .disabledsehlopha. Ka manyami, <a>s ga e thekge seka se se golofetšego.

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

Hlatswa

Oketša .list-group-flushgo tloša mellwane ye mengwe le dikhutlo tša nkgokolo go tšweletša lenaneo la sehlopha diaetheme mošito go ya mošito ka gare ga setshelo sa motswadi (mohlala, dikarata).

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
  • Porta ac consectetur e le e leng
  • Vestibulum ka 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>

Rapamego

Oketša .list-group-horizontalgo fetoša peakanyo ya diaetheme tša sehlopha sa lenaneo go tšwa go go ema go ya go go rapalala go putla dintlha ka moka tša go kgaotša. Ka go fapana le moo, kgetha mohuta wa go arabela .list-group-horizontal-{sm|md|lg|xl}go dira gore sehlopha sa lenaneo se rapaletše go thoma ka ntlha yeo ya go kgaotša ya min-width. Ga bjale dihlopha tša lenaneo tše di rapaletšego di ka se kopanywe le dihlopha tša lenaneo la go hlatswa.

ProTip: O nyaka dilo tša sehlopha sa lenaneo la bophara bjo bo lekanago ge di rapaletše? Oketša .flex-fillgo selo se sengwe le se sengwe sa sehlopha sa lenaneo.

  • Cras e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
<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 e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
<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 e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
<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 e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
<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 e le feela odio
  • Dapibus ac facilisis ka
  • Morbi leo le legolo
<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>

Diklase tša diteng

Šomiša diklase tša diteng go lokeletša diaetheme tša setaele ka morago le mmala wa seemo.

  • Dapibus ac facilisis ka
  • Ntlha ya sehlopha sa lenaneo la mathomo se bonolo
  • Ntlha ya sehlopha sa lenaneo la bobedi le bonolo
  • Ntho e bonolo ya sehlopha sa lenaneo la katlego
  • Ntho e bonolo ya sehlopha sa lenaneo la kotsi
  • Ntlha ya sehlopha sa lenaneo la temošo ye bonolo
  • A bonolo info lenaneo sehlopha ntho
  • Ntho e bonolo ya sehlopha sa lenaneo la seetša
  • Ntho e bonolo ya sehlopha sa lenaneo le lefifi
<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>

Diklase tša seemo le tšona di šoma ka .list-group-item-action. Hlokomela tlaleletšo ya mekgwa ya go hover mo e sego gona mohlaleng wa go feta. Gape go thekgwa ke .activemmušo; e diriše go laetša kgetho ye e šomago godimo ga aetheme ya sehlopha sa lenaneo la diteng.

Dapibus ac facilisis ka Ntlha ya sehlopha sa lenaneo la mathomo se bonolo Ntlha ya sehlopha sa lenaneo la bobedi le bonolo Ntho e bonolo ya sehlopha sa lenaneo la katlego Ntho e bonolo ya sehlopha sa lenaneo la kotsi Ntlha ya sehlopha sa lenaneo la temošo ye bonolo A bonolo info lenaneo sehlopha ntho Ntho e bonolo ya sehlopha sa lenaneo la seetša Ntho e bonolo ya sehlopha sa lenaneo le lefifi 
<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>
Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.

Ka dipetšhe

Oketša dipetšhe go selo sefe goba sefe sa sehlopha sa lenaneo go bontšha dipalo tšeo di sa balwago, mošomo, le tše dingwe ka thušo ya didirišwa tše dingwe .

  • Cras e le feela odio14.
  • Dapibus ac facilisis ka2.
  • Morbi leo le legolo1. 1. 
<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>

Diteng tša tlwaelo

Oketša mo e nyakilego go ba HTML efe goba efe ka gare, gaešita le bakeng sa dihlopha tša lenaneo tše di kgokagantšwego go swana le yeo e lego ka mo tlase, ka thušo ya didirišwa tša flexbox .

Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit e seng mi porta.
Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit e seng mi porta.
Lokeletša hlogo ya selo sa sehlopha
Matšatši a 3 a fetilego

Donec id elit e seng mi porta gravida ka eget metus. Maecenas sed diam eget risus varius blandit.

Donec id elit e seng 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>

Boitshwaro bja JavaScript

Diriša thepo ya polaka ya JavaScript—e akaretše ka botee goba ka bootstrap.jsfaele yeo e kgobokeditšwego—go katološa sehlopha sa rena sa lenaneo go hlama diphanephe tša thepo tša diteng tša lefelong leo.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa go itšhidulla go godiša go itšhidulla go tšhaba nakwana. Voluptate deserunt dula sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim nako sunt voluptate consectetur go itšhidulla id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua ka cupidatat nisi enim eu nostrud dira 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>

Go šomiša dika tša datha

O ka tsenya tirišong go sepelasepela ga sehlopha sa lenaneo ntle le go ngwala JavaScript efe goba efe ka go no laetša data-toggle="list"goba godimo ga elemente. Šomiša dika tše tša datha go .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

Kgontšha ntlha ya lenaneo la thepo ka JavaScript (ntlha ye nngwe le ye nngwe ya lenaneo e swanetše go tsenywa tirišong ka botee):

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

O ka tsenya tirišong selo sa lenaneo la motho ka o tee ka o tee ka ditsela tše mmalwa:

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

Go dira gore phanele ya dithepo e fifala ka gare, oketša .fadego ye nngwe le ye nngwe .tab-pane. Lefasetešana la thepo ya mathomo le lona le swanetše go ba le .showgo dira gore diteng tša mathomo di bonagale.

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

Mekgwa ya go šoma

$ (). thepo ya

E tsenya tirišong elemente ya selo sa lenaneo le setshelo sa diteng. Tab e swanetše go ba le e ka ba a data-targetgoba a go hrefnepiša noutu ya setshelo ka go 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 ('bontša') .

Kgetha aetheme ya lenaneo ye e filwego gomme e bontšha lefasetere la yona leo le amanago. Ntlha efe goba efe ye nngwe ya lenaneo yeo e bego e kgethilwe peleng e ba yeo e sa kgethwago gomme lefasetere la yona leo le amanago le lona le a utilwe. E boela go mogala pele lefasetere la thepo le bontšhitšwe e le ka kgonthe (mohlala, pele ga ge shown.bs.tabtiragalo e direga).

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

Ditiragalo

Ge o bontšha thepo ye mpsha, ditiragalo di thunya ka tatelano ye e latelago:

  1. hide.bs.tab(go thepo ya bjale ye e šomago) .
  2. show.bs.tab(go thepo yeo e tlago go bontšhwa)
  3. hidden.bs.tab(go thepong ya go šoma ya peleng, e swanago le ya hide.bs.tabtiragalo)
  4. shown.bs.tab(go thepong yeo e sa tšwago go bontšhwa yeo e sa tšwago go šoma, e swanago le ya show.bs.tabtiragalo)

Ge e le gore ga go na thepo yeo e bego e šetše e šoma, ditiragalo tša hide.bs.table hidden.bs.tabdi ka se thuntšwe.

Mohuta wa tiragalo Tlhalošo
bontša.bs.tab Tiragalo ye e thunya ka pontšho ya thepo, eupša pele ga ge thepo ye mpsha e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
e bontšhitšwe.bs.tab Tiragalo ye e thunya pontšhong ya thepo ka morago ga ge thepo e bontšhitšwe. Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago le thepo ye e šomago ya peleng (ge e le gona) ka go latelelana.
pata.bs.thepo Tiragalo ye e a tuka ge thepo ye mpsha e swanetše go bontšhwa (gomme ka go realo thepo ye e šomago ya peleng e swanetše go utollwa). Šomiša event.targetle event.relatedTargetgo nepiša thepo ya bjale ye e šomago le thepo ye mpsha yeo e tlago go šoma kgauswinyane, ka go latelelana.
e utilwego.bs.tab Tiragalo ye e thunya ka morago ga ge thepo ye mpsha e bontšhitšwe (gomme ka go realo thepo ye e šomago ya peleng e a utilwe). Šomiša event.targetle event.relatedTargetgo nepiša thepo ye e šomago ya peleng le thepo ye mpsha ye e šomago, ka go latelelana. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})