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 .

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

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

Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

Ystyr geiriau: Donec id elit non mi porta.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

Ystyr geiriau: Donec id elit non mi porta.
Rhestrwch bennawd eitem grŵp
3 diwrnod yn ôl

Ystyr geiriau: Donec id elit non mi porta gravida yn eget metus. Maecenas sed diam eget risus varius blandit.

Ystyr geiriau: Donec id elit non mi porta. 
<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.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa ymarfer corff adipisicing fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi a non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip 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>

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