Source

Rhestr grŵp

Mae grwpiau rhestr yn elfen hyblyg a phwerus ar gyfer arddangos cyfres o gynnwys. Eu haddasu a'u hymestyn i gefnogi bron unrhyw gynnwys o fewn.

Enghraifft sylfaenol

Y grŵp rhestr mwyaf sylfaenol yw rhestr heb ei threfnu gydag eitemau rhestr a'r dosbarthiadau cywir. Adeiladwch arno gyda'r opsiynau sy'n dilyn, neu gyda'ch CSS eich hun yn ôl yr angen.

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

Eitemau gweithredol

Ychwanegu .activeat a .list-group-itemi ddangos y dewis gweithredol cyfredol.

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

Eitemau anabl

Ychwanegu .disabledat .list-group-itemi wneud iddo ymddangos yn anabl. Sylwch y bydd angen JavaScript wedi'i deilwra ar rai elfennau .disabledhefyd i analluogi eu digwyddiadau clicio yn llawn (ee, dolenni).

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

Defnyddiwch <a>s neu <button>s i greu eitemau grŵp rhestr y gellir eu gweithredu gyda chyflyrau hofran, anabl a gweithredol trwy ychwanegu .list-group-item-action. Rydyn ni'n gwahanu'r ffug-ddosbarthiadau hyn i sicrhau nad yw grwpiau rhestr sydd wedi'u gwneud o elfennau nad ydynt yn rhyngweithiol (fel <li>s neu <div>s) yn darparu fforddiadwyedd clicio neu dap.

Cofiwch beidio â defnyddio'r dosbarthiadau safonol .btnyma .

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

Gydag <button>s, gallwch hefyd ddefnyddio'r disabledpriodoledd yn lle'r .disableddosbarth. Yn anffodus, <a>nid yw s yn cefnogi'r briodwedd anabl.

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

Fflysio

Ychwanegu .list-group-flushi gael gwared ar rai borderi a chorneli crwn i wneud rhestr o eitemau grŵp ymyl-i-ymyl mewn cynhwysydd rhiant (ee, cardiau).

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

Llorweddol

Ychwanegu .list-group-horizontali newid cynllun eitemau grŵp rhestr o fertigol i lorweddol ar draws pob torbwynt. Fel arall, dewiswch amrywiad ymatebol .list-group-horizontal-{sm|md|lg|xl}i wneud grŵp rhestr yn llorweddol gan ddechrau ar y torbwynt hwnnw min-width. Ar hyn o bryd ni ellir cyfuno grwpiau rhestr llorweddol â grwpiau rhestr fflysio.

ProTip: Eisiau eitemau grŵp rhestr lled cyfartal pan yn llorweddol? Ychwanegu .flex-fillat bob eitem grŵp rhestr.

  • Cras justo odio
  • Dapibus ac facilisis yn
  • Morbi leo risus
<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
  • Dapibus ac facilisis yn
  • Morbi leo risus
<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
  • Dapibus ac facilisis yn
  • Morbi leo risus
<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
  • Dapibus ac facilisis yn
  • Morbi leo risus
<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
  • Dapibus ac facilisis yn
  • Morbi leo risus
<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>

Dosbarthiadau cyd-destunol

Defnyddiwch ddosbarthiadau cyd-destunol i steilio eitemau rhestru gyda chefndir a lliw urddasol.

  • Dapibus ac facilisis yn
  • Eitem grŵp rhestr gynradd syml
  • Eitem grŵp rhestr eilaidd syml
  • Eitem grŵp rhestr llwyddiant syml
  • Eitem grŵp rhestr beryglon syml
  • Eitem grŵp rhestr rhybuddio syml
  • Eitem grŵp rhestr wybodaeth syml
  • Eitem grŵp rhestr ysgafn syml
  • Eitem grŵp rhestr dywyll syml
<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>

Mae dosbarthiadau cyd-destunol hefyd yn gweithio gyda .list-group-item-action. Sylwch ar ychwanegu'r arddulliau hofran yma nad ydynt yn bresennol yn yr enghraifft flaenorol. Cefnogir hefyd y .activewladwriaeth; ei gymhwyso i nodi detholiad gweithredol ar eitem grŵp rhestr gyd-destunol.

<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>
Cyfleu ystyr i dechnolegau cynorthwyol

Mae defnyddio lliw i ychwanegu ystyr yn rhoi arwydd gweledol yn unig, na fydd yn cael ei gyfleu i ddefnyddwyr technolegau cynorthwyol - megis darllenwyr sgrin. Sicrhewch fod gwybodaeth a ddynodir gan y lliw naill ai'n amlwg o'r cynnwys ei hun (ee y testun gweladwy), neu'n cael ei chynnwys trwy ddulliau amgen, megis testun ychwanegol wedi'i guddio gyda'r .sr-onlydosbarth.

Gyda bathodynnau

Ychwanegu bathodynnau at unrhyw eitem grŵp rhestr i ddangos cyfrifon heb eu darllen, gweithgarwch, a mwy gyda chymorth rhai cyfleustodau .

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

Cynnwys personol

Ychwanegwch bron unrhyw HTML o fewn, hyd yn oed ar gyfer grwpiau rhestr cysylltiedig fel yr un isod, gyda chymorth cyfleustodau flexbox .

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

Ymddygiad JavaScript

Defnyddiwch yr ategyn tab JavaScript - ei gynnwys yn unigol neu drwy'r bootstrap.jsffeil a luniwyd - i ymestyn ein grŵp rhestr i greu cwareli tabable o gynnwys lleol.

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

Defnyddio priodoleddau data

Gallwch chi actifadu llywio grŵp rhestr heb ysgrifennu unrhyw JavaScript trwy nodi data-toggle="list"neu ar elfen yn unig. Defnyddiwch y priodoleddau data hyn ar .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>

Trwy JavaScript

Galluogi eitem rhestr tabladwy trwy JavaScript (mae angen actifadu pob eitem rhestr yn unigol):

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

Gallwch chi actifadu eitem rhestr unigol mewn sawl ffordd:

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

Effaith pylu

I wneud i banel tabiau bylu i mewn, ychwanegwch .fadeat bob .tab-pane. Rhaid i'r cwarel tab cyntaf hefyd .showwneud y cynnwys cychwynnol yn weladwy.

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

Dulliau

$().tab

Yn actifadu elfen eitem rhestr a chynhwysydd cynnwys. Dylai fod gan dab naill ai nod cynhwysydd data-targetneu hrefnod targedu yn y 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('dangos')

Yn dewis yr eitem rhestr a roddir ac yn dangos ei phaen cysylltiedig. Mae unrhyw eitem rhestr arall a ddewiswyd yn flaenorol yn mynd yn an-ddewis ac mae ei cwarel cysylltiedig wedi'i guddio. Yn dychwelyd i'r galwr cyn i'r cwarel tab gael ei ddangos mewn gwirionedd (er enghraifft, cyn i'r shown.bs.tabdigwyddiad ddigwydd).

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

Digwyddiadau

Wrth ddangos tab newydd, mae'r digwyddiadau'n tanio yn y drefn ganlynol:

  1. hide.bs.tab(ar y tab gweithredol cyfredol)
  2. show.bs.tab(ar y tab i'w ddangos)
  3. hidden.bs.tab(ar y tab gweithredol blaenorol, yr un un ag ar gyfer y hide.bs.tabdigwyddiad)
  4. shown.bs.tab(ar y tab newydd-weithredol sydd newydd ei ddangos, yr un un ag ar gyfer y show.bs.tabdigwyddiad)

Os nad oedd unrhyw dab eisoes yn weithredol, ni fydd y hide.bs.taba hidden.bs.tabdigwyddiadau yn cael eu tanio.

Math o ddigwyddiad Disgrifiad
dangos.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe tab, ond cyn i'r tab newydd gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
dangos.bs.tab Mae'r digwyddiad hwn yn tanio ar sioe dabiau ar ôl i dab gael ei ddangos. Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol a'r tab gweithredol blaenorol (os yw ar gael) yn y drefn honno.
cuddio.bs.tab Mae'r digwyddiad hwn yn tanio pan fydd tab newydd yn cael ei ddangos (ac felly mae'r tab gweithredol blaenorol i'w guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol cyfredol a'r tab newydd cyn bo hir, yn y drefn honno.
cudd.bs.tab Mae'r digwyddiad hwn yn tanio ar ôl i dab newydd gael ei ddangos (ac felly mae'r tab gweithredol blaenorol wedi'i guddio). Defnyddiwch event.targetac event.relatedTargeti dargedu'r tab gweithredol blaenorol a'r tab gweithredol newydd, yn y drefn honno.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})