in English

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.

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

Eitemau gweithredol

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

  • Eitem weithredol
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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).

  • Eitem anabl
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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 .

Yr eitem ddolen gyfredol Eitem ail ddolen Trydydd eitem cyswllt Pedwerydd eitem cyswllt Eitem cyswllt anabl 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</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" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</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).

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Pedwerydd eitem
  • A phumed un
<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</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.

  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
  • Eitem
  • Ail eitem
  • Trydydd eitem
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

Dosbarthiadau cyd-destunol

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

  • Eitem grŵp rhestr ddiofyn syml
  • 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">A simple default list group item</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.

Eitem grŵp rhestr ddiofyn syml 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 
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</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 .

  • Eitem rhestr14
  • Ail eitem rhestr2
  • Trydydd eitem rhestr1 
<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <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 .

Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

Ac ychydig o brint mân.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

A rhai print mân tawel.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Rhywfaint o gynnwys dalfan mewn paragraff.

A rhai print mân tawel. 
<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">Some placeholder content in a paragraph.</p>
    <small>And some small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</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.

Rhywfaint o gynnwys dalfan mewn paragraff sy'n ymwneud â "Cartref". A rhywfaint mwy o gynnwys, a ddefnyddir yma dim ond i padio a llenwi'r panel tab hwn. Wrth gynhyrchu, mae'n amlwg y byddai gennych fwy o gynnwys go iawn yma. Ac nid testun yn unig. Gallai fod yn unrhyw beth, mewn gwirionedd. Testun, delweddau, ffurflenni.

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

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

<div role="tabpanel">
  <!-- 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>
</div>

Trwy JavaScript

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

$('#myList a').on('click', function (event) {
  event.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 (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})