Source

Lista di gruppu

I gruppi di lista sò un cumpunente flexible è putente per vede una seria di cuntenutu. Mudificà è estendeli per sustene quasi ogni cuntenutu.

Esempiu basicu

U gruppu di lista più basica hè una lista senza ordine cù elementi di lista è e classi propiu. Custruite nantu à questu cù l'opzioni chì seguitanu, o cù u vostru propiu CSS cum'è necessariu.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum à l'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>

Articuli attivi

Aghjunghjite .activeà a .list-group-itemper indicà a selezzione attiva attuale.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum à l'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>

Articuli disabilitati

Aghjunghjite .disabledà a .list-group-itemper fà chì pare micca disattivatu. Innota chì certi elementi cù .disabledancu avè bisognu di JavaScript persunalizatu per disattivà cumplettamente i so eventi di clic (per esempiu, ligami).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum à l'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>

Aduprate <a>s o <button>s per creà elementi di gruppu di lista azzione cù stati hover, disattivati ​​è attivi aghjunghjendu .list-group-item-action. Separemu queste pseudo-classi per assicurà chì i gruppi di lista fatti di elementi non interattivi (cum'è <li>s o <div>s) ùn furnisce micca un clic o un toccu affordance.

Assicuratevi di ùn aduprà e classi standard.btn quì .

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

<button>s, pudete puru aduprà l' disabledattributu invece di a .disabledclassa. Sfortunatamente, <a>s ùn sustene micca l'attributu disattivatu.

<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

Aghjunghjite .list-group-flushper caccià alcuni cunfini è anguli arrotondati per rende l'articuli di u gruppu di lista bordu à bordu in un cuntainer parente (per esempiu, carte).

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum à l'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>

Classi contestuale

Aduprate classi cuntestuali per stilà l'articuli di lista cù un fondu statutu è culore.

  • Dapibus ac facilisis in
  • Questu hè un elementu di u gruppu di lista primaria
  • Questu hè un elementu di u gruppu di lista secundaria
  • Questu hè un articulu di gruppu di lista di successu
  • Questu hè un articulu di gruppu di lista di periculi
  • Questu hè un articulu di gruppu di lista d'avvertimentu
  • Questu hè un elementu di u gruppu di lista d'infurmazioni
  • Questu hè un articulu di gruppu di lista di luce
  • Questu hè un elementu di u gruppu di lista scura
<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>

E classi contextuale travaglianu ancu cù .list-group-item-action. Nota l'aghjunzione di i stili di hover quì micca prisenti in l'esempiu precedente. Hè ancu supportatu u .activestatu; applicà per indicà una selezzione attiva nantu à un articulu di gruppu di lista contextuale.

<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>
Trasmette u significatu à e tecnulugia assistive

Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.

Cù badges

Aghjunghjite badge à qualsiasi articulu di u gruppu di lista per mostrà cunti micca letti, attività è più cù l'aiutu di alcune utilità .

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

Cuntinutu persunalizatu

Aghjunghjite quasi ogni HTML, ancu per i gruppi di lista ligata cum'è quellu sottu, cù l'aiutu di l'utilità 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>

Cumportamentu JavaScript

Aduprate u plugin JavaScript di tabulazione - includenu individualmente o attraversu u bootstrap.jsschedariu compilatu - per allargà u nostru gruppu di lista per creà pannelli tabulabili di cuntenutu locale.

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

Utilizà l'attributi di dati

Pudete attivà una navigazione di u gruppu di lista senza scrive JavaScript per solu specificà data-toggle="list"o nantu à un elementu. Aduprate sti attributi di dati nantu à .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>

Via JavaScript

Habilita l'elementu di lista tabulabile via JavaScript (ogni articulu di lista deve esse attivatu individualmente):

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

Pudete attivà l'elementu di lista individuale in parechje manere:

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

Effettu fade

Per fà chì u pannellu di tabulazioni si dissolve, aghjunghje .fadeà ognunu .tab-pane. U primu pannellu di tabulazione deve ancu .showfà vede u cuntenutu iniziale.

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

I metudi

$().tab

Attiva un elementu di l'elementu di lista è u cuntenutu di cuntenutu. A tabulazione deve avè un data-targeto un hreftargeting un node di cuntainer in u 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('mostra')

Selezziunate l'elementu di lista datu è mostra u so pane assuciatu. Qualchese altru articulu di lista chì era sceltu prima ùn hè micca selezziunatu è u so pane assuciatu hè oculatu. Ritorna à u chjamante prima chì u pannellu di tabulazione hè statu veramente mostratu (per esempiu, prima chì l' shown.bs.tabavvenimentu si faci).

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

Avvenimenti

Quandu mostra una nova tabulazione, l'avvenimenti sparanu in l'ordine seguente:

  1. hide.bs.tab(nantu à a tabulazione attiva attuale)
  2. show.bs.tab(nantu à a tabulazione da vede)
  3. hidden.bs.tab(nantu à a tabulazione attiva precedente, u listessu cum'è per l' hide.bs.tabavvenimentu)
  4. shown.bs.tab(nantu à a tabulazione appena attivata appena mostrata, a stessa chì per l' show.bs.tabavvenimentu)

Se nessuna tabulazione era digià attiva, l' eventi hide.bs.tabè hidden.bs.tabùn saranu micca sparati.

Tipu di avvenimentu Descrizzione
mostra.bs.tab Questu avvenimentu spara nantu à a tabulazione, ma prima chì a nova tabulazione hè stata mostrata. Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
mostratu.bs.tab Questu avvenimentu spara nantu à a tabulazione mostra dopu chì una tabulazione hè stata mostrata. Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva è a tabulazione attiva precedente (se dispunibule) rispettivamente.
nascondere.bs.tab Questu avvenimentu spara quandu una nova tabulazione deve esse mostrata (è cusì a tabulazione attiva precedente deve esse oculata). Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva attuale è a nova tabulazione attiva prestu, rispettivamente.
hidden.bs.tab Questu avvenimentu spara dopu chì una nova tabulazione hè mostrata (è cusì a tabulazione attiva precedente hè oculata). Aduprate event.targetè event.relatedTargetper destinà a tabulazione attiva precedente è a nova tabulazione attiva, rispettivamente.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})