Source

List group a awm

List groups hi content series tarlanna atana hmanraw tangkai leh chak tak a ni. A chhunga content eng pawh support turin siam danglam la, extend rawh.

Entirna bulpui ber

List group bulpui ber chu list item leh class dik tak awmna list order loh a ni. A hnuaia option awmte hmangin a chungah build la, a nih loh leh a tul angin nangmah ngeiin CSS hmangin siam rawh.

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
  • Porta ac consectetur a ni a, a hlawhtling hle
  • Vestibulum chu eros-ah a awm
<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>

Thil active tak tak te

Tuna active selection awm mek tarlanna turin .activea- ah dah rawh ..list-group-item

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
  • Porta ac consectetur a ni a, a hlawhtling hle
  • Vestibulum chu eros-ah a awm
<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>

Disabled thil te

Disabled anga lang turin .disableda ah dah rawh . Hriat tur chu element thenkhat with te pawhin an click events (eg, links) fully disable turin custom JavaScript an mamawh dawn a ni..list-group-item.disabled

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
  • Porta ac consectetur a ni a, a hlawhtling hle
  • Vestibulum chu eros-ah a awm
<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>

<a>s emaw s emaw <button>hmangin actionable list group items te chu hover, disabled, leh active states te nen siam la, .list-group-item-action. <li>Heng pseudo-classes te hi kan then hrang a, chu chu non-interactive elements ( s emaw s emaw ang chi) atanga siam list group te <div>hian click emaw tap emaw affordance an pek loh nan.

Hetah hian standard .btnclass te hi hmang lo turin fimkhur rawh .

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

s hmang hian class aiah attribute <button>pawh i hmang thei bawk . Lungchhiatthlak takin s hian disabled attribute hi an support lo.disabled.disabled<a>

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

.list-group-flushParent container (eg, cards)-a list group items edge-to-edge-a render turin border thenkhat paih chhuah tur leh rounded corners te dah belh rawh .

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
  • Porta ac consectetur a ni a, a hlawhtling hle
  • Vestibulum chu eros-ah a awm
<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>

Khamphei

.list-group-horizontalBreakpoint zawng zawngah list group items layout vertical atanga horizontal a thlak turin Add rawh . .list-group-horizontal-{sm|md|lg|xl}A dang pawhin, chu breakpoint’s atanga tan list group horizontal siam turin responsive variant thlang rawh min-width. Tunah hian horizontal list group te chu flush list group nen an inzawm thei lo.

ProTip: Horizontal a nih laiin equal-width list group item duh em? .flex-fillList group item tin ah te dah belh thin ang che.

  • Cras justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
<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 justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
<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 justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
<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 justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
<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 justo odio a ni
  • Dapibus ac facilisis ah hian a awm a
  • Morbi leo risus tih a ni
<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>

Contextual class hrang hrang te

Contextual class hmangin thil awmte chu stateful background leh color neia style list theih a ni.

  • Dapibus ac facilisis ah hian a awm a
  • Primary list group item awlsam tak a ni
  • Secondary list group item awlsam tak a ni
  • Hlawhtlinna list group item awlsam tak
  • Hlauhawm list group item awlsam tak
  • Warning list group item awlsam tak a ni
  • Info list group item awlsam tak a ni
  • Light list group item awlsam tak a ni
  • Dark list group item awlsam tak a ni
<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>

Contextual class te pawh hian .list-group-item-action. Entirna hmasa lama awm lo hetah hian hover styles te dah belh hi chhinchhiah ang che. .activeState pawhin a thlawp bawk a ; contextual list group item-a active selection tarlanna atan hmang rawh.

<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>
Assistive technology-te hnena awmzia thlentu

awmzia belhchhah nan color hman hian hmuh theiha hriattirna chauh a pe a, chu chu assistive technology hmangtute hnenah a thlen dawn lo – screen reader ang chi te. Color hmanga tarlan information chu a thupui a\ang ngeia lang (entir nan, hmuh theih thuziak), a nih loh leh kawng dang hmanga telh a nih theih nan enfiah rawh, chu chu .sr-onlyclass nena thup belh thuziak ang chi a ni.

Badge te nen

Utility thenkhat puihnain unread counts, activity, leh thil dang tam tak entir turin list group item eng pawhah badge dah la .

  • Cras justo odio a ni14 a ni
  • Dapibus ac facilisis ah hian a awm a2. 2.
  • Morbi leo risus tih a ni1. a ni
<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>

Custom content a awm bawk

A chhunga HTML eng pawh deuhthaw dah la, a hnuaia linked list group ang chi tan pawh, flexbox utilities hmangin .

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

JavaScript tih dan tur

Tab JavaScript plugin hmang la—a mal emaw, compiled file kaltlangin emaw telh la bootstrap.js—kan list group chu tizau la, local content tabbable pane siam rawh.

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

Data attribute hmanga thil tih dan

JavaScript engmah ziak lovin list group navigation chu data-toggle="list"element pakhat specify mai mai emaw, on emaw hmangin i activate thei a ni. Heng data attribute te hi .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>

JavaScript hmangin

JavaScript hmangin tabbable list item enable rawh (list item tin chu a hranin activate a ngai a ni):

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

Mimal list item chu kawng hrang hrangin i activate thei ang:

$('#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 effect a awm bawk

Tabs panel fade in tir tur chuan pakhat zel ah add .faderawh .tab-pane. Tab pane hmasa ber pawhin .showa bul tanna thu awm chu hmuh theih turin a siam a ngai bawk.

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

Thiltih dan tur

$().tab ah hian a awm

List item element leh content container a activate thin. Tab hian DOM ah container node targeting a data-targetemaw a nei tur a ni.href

<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(' entir') tih a ni.

List item pek tawh chu thlang la, a kaihhnawih pane chu a rawn tarlang ang. List item dang a hmaa thlan tawh zawng zawng chu thlan loh a ni a, a kaihhnawih pane chu a thup vek a ni. Tab pane a lan tak tak hmain (entir nan, shown.bs.tabevent a thlen hmain) caller hnenah a kir leh thin.

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

Thil thlengte

Tab thar kan lantir hian events te chu a hnuaia mi ang hian a rawn fire thin:

  1. hide.bs.tab(tuna active tab-ah hian)
  2. show.bs.tab(to-be-shown tab-ah chuan)
  3. hidden.bs.tab(active tab hmasaah khan hide.bs.tabevent atana hman ang chiah kha)
  4. shown.bs.tab(active thar-a just-shown tab-ah chuan, show.bs.tabevent atana hman ang chiah kha)

Tab active tawh loh chuan hide.bs.taband hidden.bs.tabevents chu a fire dawn lo.

Event chi hrang hrang Hrilhfiahna
show.bs.tab ah hian a awm He event hi tab show-ah a fire a, mahse tab thar a lan hmain a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.targetand hmang ang che .event.relatedTarget
tih a ni.bs.tab He event hi tab pakhat a lan hnuah tab show ah a fire thin. Active tab leh a hmaa active tab (a awm chuan) te target turin event.targetand hmang ang che .event.relatedTarget
hide.bs.tab ah hian a awm He event hi tab thar entir tur a nih hunah a fire thin (chutiang chuan a hmaa active tab kha thup tur a ni). Tuna active tab leh soon-to-be-active tab thar chu target turin event.targetand hmang ang che .event.relatedTarget
thup.bs.tab ah hian a awm He event hi tab thar a lan hnuah a fire a (chutiang chuan a hmaa active tab kha a thup a ni). Active tab hmasa leh active tab thar target turin event.targetand hmang ang che .event.relatedTarget
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})