Source

Lista e grupit

Grupet e listave janë një komponent fleksibël dhe i fuqishëm për shfaqjen e një sërë përmbajtjesh. Modifikoni dhe zgjeroni ato për të mbështetur pothuajse çdo përmbajtje brenda.

Shembull themelor

Grupi më themelor i listës është një listë e parregulluar me artikuj të listës dhe klasat e duhura. Ndërtoni mbi të me opsionet që vijojnë, ose me CSS-në tuaj sipas nevojës.

  • Cras justo odio
  • Lehtësimi i AC në
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dhe 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>

Artikujt aktivë

Shto .activenë a .list-group-itempër të treguar përzgjedhjen aktuale aktive.

  • Cras justo odio
  • Lehtësimi i AC në
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dhe 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>

Artikuj me aftësi të kufizuara

Shto .disablednë një .list-group-itempër ta bërë atë të duket e çaktivizuar. Vini re se disa elementë me .disableddo të kërkojnë gjithashtu JavaScript të personalizuar për të çaktivizuar plotësisht ngjarjet e tyre të klikimeve (p.sh., lidhjet).

  • Cras justo odio
  • Lehtësimi i AC në
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dhe 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>

Përdorni <a>s ose <button>s për të krijuar artikuj të grupit të listës vepruese me gjendje pezullimi, të paaftë dhe aktive duke shtuar .list-group-item-action. Ne i ndajmë këto pseudo-klasa për të siguruar që grupet e listave të përbëra nga elementë jo ndërveprues (si <li>s ose <div>s) të mos ofrojnë një klikim ose trokitje të përballueshme.

Sigurohuni që të mos përdorni .btnklasat standarde këtu .

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

Me <button>s, ju gjithashtu mund të përdorni disabledatributin në vend të .disabledklasës. Mjerisht, <a>nuk e mbështet atributin e çaktivizuar.

<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

Shto .list-group-flushpër të hequr disa bordurë dhe qoshe të rrumbullakosura për t'i paraqitur artikujt e grupit të listës buzë në skaj në një kontejner prind (p.sh. kartat).

  • Cras justo odio
  • Lehtësimi i AC në
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum dhe 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>

Klasat kontekstuale

Përdorni klasa kontekstuale për të stiluar artikujt e listës me një sfond dhe ngjyrë shtetërore.

  • Lehtësimi i AC në
  • Ky është një artikull kryesor i grupit të listës
  • Ky është një artikull dytësor i grupit të listës
  • Ky është një artikull grupi i listës së suksesit
  • Ky është një artikull i grupit të listës së rrezikut
  • Ky është një artikull grupi i listës paralajmëruese
  • Ky është një artikull i grupit të listës së informacionit
  • Ky është një artikull i grupit të listës së lehtë
  • Ky është një artikull i grupit të listës së errët
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Klasat kontekstuale punojnë gjithashtu me .list-group-item-action. Vini re shtimin e stileve hover këtu që nuk janë të pranishëm në shembullin e mëparshëm. Gjithashtu mbështetet edhe .activeshteti; zbatojeni atë për të treguar një përzgjedhje aktive në një artikull të grupit të listës kontekstuale.

<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Përcjellja e kuptimit tek teknologjitë ndihmëse

Përdorimi i ngjyrës për të shtuar kuptimin ofron vetëm një tregues vizual, i cili nuk do t'u transmetohet përdoruesve të teknologjive ndihmëse - siç janë lexuesit e ekranit. Sigurohuni që informacioni i shënuar nga ngjyra të jetë ose i dukshëm nga vetë përmbajtja (p.sh. teksti i dukshëm), ose të përfshihet përmes mjeteve alternative, si teksti shtesë i fshehur me .sr-onlyklasën.

Me distinktivë

Shtoni distinktivë në çdo artikull të grupit të listës për të shfaqur numërimin e palexuar, aktivitetin dhe më shumë me ndihmën e disa shërbimeve .

  • Cras justo odio14
  • Lehtësimi i AC në2
  • 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>

Përmbajtje e personalizuar

Shtoni pothuajse çdo HTML brenda, edhe për grupet e listave të lidhura si ai më poshtë, me ndihmën e shërbimeve flexbox .

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

Sjellja JavaScript

Përdorni shtojcën JavaScript të skedës - përfshijeni atë individualisht ose përmes bootstrap.jsskedarit të përpiluar - për të zgjeruar grupin tonë të listës për të krijuar panele tabelash të përmbajtjes lokale.

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

Përdorimi i atributeve të të dhënave

Ju mund të aktivizoni navigimin e grupit të listës pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="list"ose mbi një element. Përdorni këto atribute të dhënash në .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>

Përmes JavaScript

Aktivizo artikullin e listës me tabela përmes JavaScript (çdo artikull i listës duhet të aktivizohet individualisht):

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

Ju mund të aktivizoni një artikull individual të listës në disa mënyra:

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

Efekti i zbehjes

Për ta bërë panelin e skedave të zbehet, shtojeni .fadenë secilin .tab-pane. Paneli i parë i skedës duhet gjithashtu .showtë bëjë të dukshme përmbajtjen fillestare.

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

Metodat

$().tab

Aktivizon një element të artikullit të listës dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-targetose një hrefnyje kontejneri në 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 ('shfaq')

Zgjedh artikullin e dhënë të listës dhe tregon panelin e lidhur me të. Çdo artikull tjetër i listës që është zgjedhur më parë bëhet i pazgjedhur dhe paneli i lidhur me të fshihet. Kthehet te thirrësi përpara se të shfaqet në të vërtetë paneli i skedës (për shembull, përpara se të shown.bs.tabndodhë ngjarja).

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

Ngjarjet

Kur shfaqet një skedë e re, ngjarjet shfaqen në rendin e mëposhtëm:

  1. hide.bs.tab(në skedën aktuale aktive)
  2. show.bs.tab(në skedën që do të shfaqet)
  3. hidden.bs.tab(në skedën e mëparshme aktive, e njëjta si për hide.bs.tabngjarjen)
  4. shown.bs.tab(në skedën e saposhfaqur të sapoaktive, e njëjta si për show.bs.tabngjarjen)

Nëse asnjë skedë nuk ishte tashmë aktive, hide.bs.tabdhe hidden.bs.tabngjarjet nuk do të hapen.

Lloji i ngjarjes Përshkrim
shfaq.bs.tab Kjo ngjarje aktivizohet në shfaqjen e skedave, por përpara se të shfaqet skeda e re. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
treguar.bs.tab Kjo ngjarje ndizet në shfaqjen e skedave pasi të jetë shfaqur një skedë. Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktive dhe skedën e mëparshme aktive (nëse disponohet).
fsheh.bs.tab Kjo ngjarje ndizet kur duhet të shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive duhet të fshihet). Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën aktuale aktive dhe skedën e re që do të aktivizohet së shpejti.
fshehur.bs.tab Kjo ngjarje ndizet pasi shfaqet një skedë e re (dhe kështu skeda e mëparshme aktive fshihet). Përdorni event.targetdhe event.relatedTargetpër të synuar përkatësisht skedën e mëparshme aktive dhe skedën e re aktive.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})