Source

List group a awm

List groups hi content series tarlanna atana hmanraw tangkai leh chak tak a ni. A chhunga thu awm zawng zawng deuhthaw support turin siam danglam la, tihzauh 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) te chu 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">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 .

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

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>

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.

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

Group item thupui chu ziak rawh
Ni 3 kalta khan

Donec id elit non mi porta gravida chu eget metus ah a awm a. A rilru a buai em em a, a rilru a hah em em bawk a. risus varius blandit.

Donec id elit a ni lo.
Group item thupui chu ziak rawh
Ni 3 kalta khan

Donec id elit non mi porta gravida chu eget metus ah a awm a. A rilru a buai em em a, a rilru a hah em em bawk a. risus varius blandit.

Donec id elit a ni lo.
Group item thupui chu ziak rawh
Ni 3 kalta khan

Donec id elit non mi porta gravida chu eget metus ah a awm a. A rilru a buai em em a, a rilru a hah em em bawk a. risus varius blandit.

Donec id elit a ni lo. 
<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>

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.

A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. adipisicing exercitation fugiat tempor. Voluptate deserunt thut sunt nisi aliqua fugiat proident ea ut. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a, a rilru a hah em em bawk a. A rilru a hah lutuk chuan a rilru a buai em em a, a rilru a hah lutuk chuan a rilru a buai em em bawk a. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. A rilru a buai em em a, a rilru a hah em em bawk a, a rilru a buai em em bawk a, a rilru a hah em em bawk a.

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>

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 active tab hmasa (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 active tab hmasa (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
})