Source

Lista tal-grupp

Gruppi tal-lista huma komponent flessibbli u b'saħħtu għall-wiri ta 'serje ta' kontenut. Immodifika u estendihom biex jappoġġjaw kważi kull kontenut ġewwa.

Eżempju bażiku

L-aktar grupp ta 'lista bażika huwa lista mhux ordnata b'oġġetti tal-lista u l-klassijiet xierqa. Ibni fuqha bl-għażliet li jsegwu, jew bis-CSS tiegħek kif meħtieġ.

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

Oġġetti attivi

Żid .activema 'a .list-group-itembiex tindika l-għażla attiva attwali.

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

Oġġetti b'diżabilità

Żid .disabledma ' .list-group-itembiex tidher b'diżabilità. Innota li xi elementi .disabledb'se jeħtieġu wkoll JavaScript personalizzat biex jiskonnettjaw bis-sħiħ l-avvenimenti tal-ikklikkja tagħhom (eż., links).

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

Uża <a>s jew <button>s biex toħloq oġġetti ta' grupp ta' lista azzjonabbli bi stati hover, diżabilitati u attivi billi żżid .list-group-item-action. Aħna nisseparaw dawn il-psewdo-klassijiet biex niżguraw li l-gruppi tal-lista magħmula minn elementi mhux interattivi (bħal <li>s jew <div>s) ma jipprovdux affordance ta' klikk jew vit.

Kun żgur li ma tużax il- .btnklassijiet standard hawn .

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

B <button>'s, tista' wkoll tagħmel użu mill- disabledattribut minflok il- .disabledklassi. Sfortunatament, <a>s ma jappoġġjawx l-attribut diżabbli.

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

Aħsel

Żid .list-group-flushbiex tneħħi xi fruntieri u kantunieri fit-tond biex tirrendi oġġetti tal-grupp tal-lista tarf sa tarf f'kontenitur prinċipali (eż. karti).

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

Klassijiet kuntestwali

Uża klassijiet kuntestwali biex tfassal oġġetti tal-lista bi sfond u kulur stateful.

  • Dapibus ac facilisis in
  • Dan huwa oġġett primarju tal-grupp tal-lista
  • Dan huwa oġġett sekondarju tal-grupp tal-lista
  • Dan huwa oġġett tal-grupp tal-lista tas-suċċess
  • Dan huwa oġġett tal-grupp tal-lista ta' periklu
  • Din hija oġġett ta' grupp ta' lista ta' twissija
  • Din hija oġġett tal-grupp ta' lista ta' informazzjoni
  • Dan huwa oġġett tal-grupp tal-lista ħafifa
  • Dan huwa oġġett ta' grupp ta' lista skura
<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>

Il-klassijiet kuntestwali jaħdmu wkoll ma' .list-group-item-action. Innota ż-żieda tal-istili tal-hover hawn mhux preżenti fl-eżempju preċedenti. Sostnut ukoll l- .activeistat; applikaha biex tindika għażla attiva fuq oġġett tal-grupp tal-lista kuntestwali.

<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>
Twassal tifsira għal teknoloġiji ta' assistenza

L-użu tal-kulur biex iżżid it-tifsira jipprovdi biss indikazzjoni viżwali, li mhux se tingħata lill-utenti ta’ teknoloġiji ta’ assistenza – bħal screen readers. Kun żgur li l-informazzjoni indikata bil-kulur hija jew ovvja mill-kontenut innifsu (eż. it-test viżibbli), jew tkun inkluża permezz ta' mezzi alternattivi, bħal test addizzjonali moħbi mal- .sr-onlyklassi.

Bil badges

Żid badges ma 'kwalunkwe oġġett tal-grupp tal-lista biex turi għadd mhux moqrija, attività, u aktar bl-għajnuna ta' xi utilitajiet .

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

Kontenut apposta

Żid kważi kull HTML fi ħdan, anke għal gruppi ta 'lista konnessi bħal dak ta' hawn taħt, bl-għajnuna ta ' utilitajiet 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>

Imġieba JavaScript

Uża t-tab JavaScript plugin—inkludih individwalment jew permezz tal- bootstrap.jsfajl ikkumpilat—biex testendi l-grupp tal-lista tagħna biex toħloq panewijiet tabbable ta' kontenut lokali.

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

L-użu ta' attributi tad-data

Tista' tattiva navigazzjoni ta' grupp ta' lista mingħajr ma tikteb JavaScript billi sempliċement tispeċifika data-toggle="list"jew fuq element. Uża dawn l-attributi tad-dejta fuq .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

Ippermetti l-oġġett tal-lista li jista' jittabx permezz ta' JavaScript (kull oġġett tal-lista jeħtieġ li jiġi attivat individwalment):

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

Tista' tattiva oġġett tal-lista individwali f'diversi modi:

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

Effett fade

Biex tagħmel tabs panel fade in, żid .fadema 'kull .tab-pane. L-ewwel pannell tat-tab irid ikollu wkoll .showjagħmel il-kontenut inizjali viżibbli.

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

Metodi

$().tab

Jattiva element ta' oġġett tal-lista u kontenitur tal-kontenut. Tab għandu jkollha jew a data-targetjew hrefnode ta 'kontenitur fil-mira fid-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')

Jagħżel l-oġġett tal-lista mogħtija u juri l-panew assoċjat tiegħu. Kwalunkwe oġġett ieħor tal-lista li kien magħżul qabel ma jintgħażel u l-ħġieġa assoċjata tagħha hija moħbija. Jirritorna lil min iċempel qabel ma l-panew tat-tab fil-fatt intwera (per eżempju, qabel ma shown.bs.tabjseħħ l-avveniment).

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

Avvenimenti

Meta turi tab ġdida, l-avvenimenti jisparaw fl-ordni li ġejja:

  1. hide.bs.tab(fuq it-tab attiva attwali)
  2. show.bs.tab(fuq it-tab li trid tintwera)
  3. hidden.bs.tab(fuq it-tab attiva preċedenti, l-istess bħal għall- hide.bs.tabavveniment)
  4. shown.bs.tab(fuq it-tab li għadha kif intwera, l-istess bħal dik tal- show.bs.tabavveniment)

Jekk l-ebda tab ma kienet diġà attiva, l- avvenimenti hide.bs.tabu hidden.bs.tabmhux se jiġu sparati.

Tip ta' avveniment Deskrizzjoni
juru.bs.tab Dan l-avveniment jispara fuq tab show, iżda qabel ma tkun intweriet it-tab il-ġdida. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
muri.bs.tab Dan l-avveniment jispara fuq tab show wara li tkun intweriet tab. Uża event.targetu event.relatedTargetbiex timmira t-tab attiva u t-tab attiva preċedenti (jekk disponibbli) rispettivament.
hide.bs.tab Dan l-avveniment jispara meta trid tintwera tab ġdida (u għalhekk it-tab attiva preċedenti trid tinħeba). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva attwali u t-tab il-ġdida li dalwaqt tkun attiva, rispettivament.
moħbija.bs.tab Dan l-avveniment jispara wara li tintwera tab ġdida (u għalhekk it-tab attiva preċedenti hija moħbija). Uża event.targetu event.relatedTargetbiex timmira t-tab attiva preċedenti u t-tab attiva l-ġdida, rispettivament.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})