Source

Lista di grup

List grup na wan fleksibul ɛn pawaful kɔmpɔnɛnt fɔ sho wan siriɔs kɔntinyu. Modify ɛn ɛkstɛnd dɛn fɔ sɔpɔt jɔs lɛk ɛni kɔntinyu insay.

Besik ɛgzampul

Di list grup we impɔtant pas ɔl na wan list we nɔ ɔda wit di tin dɛn we de na di list ɛn di rayt klas dɛn. Bil pan am wit di opshɔn dɛn we de kam, ɔ wit yu yon CSS as nid de.

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Morbi leo risus
  • Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
  • Vestibulum na di 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>

Di tin dɛn we de wok

Ad .activeto a .list-group-itemfɔ sho di aktif sɛlɛkshɔn we de naw.

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Morbi leo risus
  • Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
  • Vestibulum na di 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>

Di tin dɛn we dɛn dɔn disable

Ad .disabledto a .list-group-itemfɔ mek i tan lɛk se i nɔ ebul fɔ wok. Notis se sɔm ɛlimɛnt dɛn wit .disabledgo nid bak kɔstɔm JavaSkript fɔ fulɔp fɔ disable dɛn klik ivin dɛn (ɛgz., link dɛn).

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Morbi leo risus
  • Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
  • Vestibulum na di 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>

Yuz <a>s ɔ <button>s fɔ mek akshɔnable list grup aytem dɛn wit hova, disabled, ɛn aktiv stet dɛn bay we yu ad .list-group-item-action. Wi de separet dɛn pseudo-klas ya fɔ mek shɔ se list grup dɛn we dɛn mek wit nɔ-intaraktiv ɛlimɛnt dɛn (lɛk <li>s ɔ <div>s) nɔ de gi klik ɔ tap afɔdans.

Mek shɔ se yu nɔ yuz di standad .btnklas dɛn we de ya .

Kras jɔsto odio Dapibus ac fasilisis in Morbi leo risus Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan Vestibulum na di 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>

Wit <button>s, yu kin mek yus bak to di disabledatribyut insted of di .disabledklas. I sɔri fɔ no se <a>s nɔ de sɔpɔt di disabled atribyut.

<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 fɔ yuz am

Ad .list-group-flushfɔ pul sɔm bɔda dɛn ɛn rawnd kɔna dɛn fɔ rɛnd list grup aytem dɛn ed-to-ɛj insay wan mama kɔntena (ɛgz., kad dɛn).

  • Kras jɔsto odio
  • Dapibus ac fasilisis in
  • Morbi leo risus
  • Porta ac konsectetur wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan wan
  • Vestibulum na di 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>

Klas dɛn we de tɔk bɔt di kɔntɛks

Yuz kɔntɛkstual klas fɔ stayl list aytem dɛn wit stetful bakgrɔn ɛn kɔlɔ.

  • Dapibus ac fasilisis in
  • Wan simpul praymari list grup aytem
  • Wan simpul sɛkɔndari list grup aytem
  • Wan simpul sakses list grup aytem
  • Wan simpul denja list grup aytem
  • Wan simpul wɔnin list grup aytem
  • Wan simpul info list grup aytem
  • Wan simpul layt list grup aytem
  • Wan simpul dak list grup aytem
<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>

Kɔntɛkstual klas dɛn kin wok bak wit .list-group-item-action. Notis di addɛshɔn fɔ di hova stayl dɛn ya we nɔ de na di ɛgzampul we bin dɔn pas. Di .activestet de sɔpɔt bak; aplay am fɔ sho wan aktif sɛlɛkshɔn pan wan kɔntɛkstual list grup aytem.

Dapibus ac fasilisis in Wan simpul praymari list grup aytem Wan simpul sɛkɔndari list grup aytem Wan simpul sakses list grup aytem Wan simpul denja list grup aytem Wan simpul wɔnin list grup aytem Wan simpul info list grup aytem Wan simpul layt list grup aytem Wan simpul dak list grup aytem 
<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>
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .sr-onlyklas.

Wit badge dɛn

Ad badge dɛn to ɛni list grup aytem fɔ sho di kɔnt dɛn we dɛn nɔ rid, di tin dɛn we dɛn de du, ɛn ɔda tin dɛn wit di ɛp we sɔm yutiliti dɛn de gi .

  • Kras jɔsto odio14 we de tɔk bɔt
  • Dapibus ac fasilisis in2. Di wan dɛn we de
  • Morbi leo risus1. Di wan dɛn we de 
<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>

Kɔstɔm kɔntinyu

Ad klos to ɛni HTML insay, ivin fɔ link list grup dɛn lɛk di wan we de dɔŋ ya, wit di ɛp fɔ flexbox utilities .

Lista di grup aytem edlayn
3 dez bifo

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

Donec id elit we nɔto mi porta.
Lista di grup aytem edlayn
3 dez bifo

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

Donec id elit we nɔto mi porta.
Lista di grup aytem edlayn
3 dez bifo

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

Donec id elit we nɔto 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>

JavaSkript bihayvya

Yuz di tab JavaSkript plɔgin—inklud am wan wan ɔ tru di bootstrap.jsfayl we dɛn dɔn kɔmpilayt—fɔ ɛkstɛnd wi list grup fɔ mek tabbul pan dɛn fɔ lokal kɔntinyu.

Velit aute mollit ipsum ad dolor konsectetur nula ofisia kulpa adipisisin eksasaiz fugiat tempor. Voluptate deserunt sidon sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate konsektetur eksasaiz id ut nulla. Ea ɛn fugiat aliquip nostrud sunt incididunt kɔnsɛkt kulpa alikwip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi 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>

Yuz data atribyut dɛn

Yu kin aktiv wan list grup nevigishɔn we yu nɔ rayt ɛni JavaSkript bay we yu jɔs spɛsifa data-toggle="list"ɔ pan wan ɛlimɛnt. Yuz dɛn data atribyut dɛn ya na .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>

Yu kin yuz JavaSkript fɔ yuz am

Enable tabbable list item via JavaScript (ɛni list aytem nid fɔ aktiv wan wan):

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

Yu kin aktiv wan wan list aytem insay sɔm we dɛn:

$('#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 effekt we yu de du

Fɔ mek tab dɛn panɛl fayn insay, ad .fadeto ɛni wan pan dɛn .tab-pane. Di fɔs tab pan fɔ gɛt bak .showfɔ mek di fɔs tin dɛn we de insay de sho.

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

Di we aw dɛn de du am

$().tab fɔ di wan dɛn

Aktiv wan list aytem ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di 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('sho') .

Pik di list aytem we dɛn gi ɛn sho di pan we gɛt fɔ du wit am. Ɛni ɔda list aytem we dɛn bin dɔn pik bifo tɛm nɔ kin pik ɛn di pan we gɛt fɔ du wit am kin ayd. Ritɔn to di pɔsin we kɔl bifo dɛn rili sho di tab pan (fɔ ɛgzampul, bifo di shown.bs.tabtin apin).

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

Di tin dɛn we kin apin

We yu de sho nyu tab, di tin dɛn we de apin de faya insay di ɔda we we de dɔŋ ya:

  1. hide.bs.tab(na di tab we de wok naw)
  2. show.bs.tab(na di tab we dɛn go sho)
  3. hidden.bs.tab(na di fɔs aktif tab, di sem wan we bin de fɔ di hide.bs.tabivin)
  4. shown.bs.tab(na di nyu-aktiv tab we jɔs sho, di sem wan we de fɔ di show.bs.tabivin)

If no tab nɔ bin dɔn ɔlrɛdi aktif, di hide.bs.tabɛn hidden.bs.tabivin dɛn nɔ go faya.

Di kayn tin we apin Tɔk bɔt
sho.bs.tab fɔ sho Dis ivent de faya pan tab sho, bɔt bifo dɛn dɔn sho di nyu tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
we dɛn sho.bs.tab Dis ivent de faya pan tab sho afta dɛn dɔn sho wan tab. Yuz event.targetɛn event.relatedTargetfɔ tɔch di aktiv tab ɛn di aktiv tab we bin de bifo (if i de) rispɛktful wan.
ayd.bs.tab fɔ di wan dɛn we de Dis ivent de faya we dɛn fɔ sho nyu tab (ɛn so di fɔs aktif tab fɔ ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di tab we de wok naw ɛn di nyu tab we go aktiv jisnɔ, rispɛktful wan.
di tab we dɛn ayd.bs Dis ivent de faya afta dɛn dɔn sho nyu tab (ɛn so di fɔs aktif tab de ayd). Yuz event.targetɛn event.relatedTargetfɔ tɔch di fɔs aktif tab ɛn di nyu aktif tab, rispɛktful wan. 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})