in English

Buidheann liosta

Tha buidhnean liosta nam pàirt sùbailte is cumhachdach airson sreath de shusbaint a thaisbeanadh. Atharraich agus leudaich iad gus taic a thoirt do cha mhòr susbaint sam bith a-staigh.

Eisimpleir bunaiteach

Is e am buidheann liosta as bunaitiche liosta gun òrdugh le nithean liosta agus na clasaichean ceart. Tog air leis na roghainnean a leanas, no leis an CSS agad fhèin mar a dh’ fheumar.

  • An dàrna nì
  • An treas nì
  • An ceathramh nì
  • Agus an còigeamh fear
<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>

Nithean gnìomhach

Cuir .activeri a .list-group-itemgus an taghadh gnìomhach làithreach a chomharrachadh.

  • Rud gnìomhach
  • An dàrna nì
  • An treas nì
  • An ceathramh nì
  • Agus an còigeamh fear
<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>

Nithean ciorramach

Cuir .disabledri a .list-group-itemgus am bi e ciorramach . Thoir an aire gum feum cuid de na h-eileamaidean le .disabledJavaScript àbhaisteach gus na tachartasan cliog aca a chuir dheth gu tur (me, ceanglaichean).

  • Rud à comas
  • An dàrna nì
  • An treas nì
  • An ceathramh nì
  • Agus an còigeamh fear
<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>

Cleachd <a>s no <button>s gus nithean buidhne liosta gnìomh a chruthachadh le hover , ciorramach, agus stàitean gnìomhach le bhith a’ cur .list-group-item-action. Bidh sinn a’ sgaradh nan clasaichean meallta sin gus dèanamh cinnteach nach toir buidhnean liosta air an dèanamh le eileamaidean neo-eadar-ghnìomhach (mar <li>s no <div>s) cosgais cliog no tap.

Dèan cinnteach nach cleachd thu na .btnclasaichean àbhaisteach an seo .

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

Le <button>s, faodaidh tu cuideachd am disabledfeart a chleachdadh an àite a’ .disabledchlas. Gu mì-fhortanach, <a>chan eil s a’ toirt taic don fheart ciorramach.

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

Fliuch

Cuir .list-group-flushris gus cuid de chrìochan agus oiseanan cruinn a thoirt air falbh gus liosta de nithean buidhne a thoirt seachad oir ri oir ann an soitheach pàrant (me, cairtean).

  • An dàrna nì
  • An treas nì
  • An ceathramh nì
  • Agus an còigeamh fear
<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>

Cothromach

Cuir ris .list-group-horizontalgus cruth nithean buidhne liosta atharrachadh bho dhìreach gu còmhnard thar gach briseadh. Air neo, tagh caochladair freagairteach .list-group-horizontal-{sm|md|lg|xl}gus buidheann liosta a dhèanamh còmhnard a’ tòiseachadh aig a’ phuing-bhriseadh sin min-width. An- dràsta chan urrainnear buidhnean liosta còmhnard a chur còmhla ri buidhnean liosta sruthach.

ProTip: Ag iarraidh nithean buidhne liosta co-ionann nuair a tha iad còmhnard? Cuir .flex-fillri gach nì buidhne liosta.

  • An dàrna nì
  • An treas nì
  • An dàrna nì
  • An treas nì
  • An dàrna nì
  • An treas nì
  • An dàrna nì
  • An treas nì
  • An dàrna nì
  • An treas nì
<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>

Clasaichean co-theacsail

Cleachd clasaichean co-theacsail gus rudan a liostadh le cùl-fhiosrachadh agus dath stàiteil.

  • Nì buidheann liosta bunaiteach sìmplidh
  • Earrann buidheann liosta bun-sgoile sìmplidh
  • Nì buidheann liosta àrd-sgoile sìmplidh
  • Nì buidheann liosta soirbheachail sìmplidh
  • Buidheann liosta de chunnartan sìmplidh
  • Nì buidheann liosta rabhaidh sìmplidh
  • Nì buidheann liosta fiosrachaidh sìmplidh
  • Rud buidheann liosta aotrom sìmplidh
  • Rud buidheann liosta dorcha sìmplidh
<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>

Bidh clasaichean co-theacsa cuideachd ag obair le .list-group-item-action. Thoir an aire gu bheil na stoidhlichean hover air an cur ris an seo nach eil an làthair san eisimpleir roimhe. Cuideachd a 'faighinn taic tha an .activestàit; cuir an sàs e gus taghadh gnìomhach a chomharrachadh air nì buidheann liosta co-theacsail.

<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>
A’ toirt brìgh do theicneòlasan cuideachail

Chan eil a bhith a’ cleachdadh dath gus brìgh a chur ris ach a’ toirt seachad sealladh lèirsinneach, nach tèid a thoirt do luchd-cleachdaidh theicneòlasan taice - leithid leughadairean sgrion. Dèan cinnteach gu bheil fiosrachadh air a chomharrachadh leis an dath an dàrna cuid follaiseach bhon t-susbaint fhèin (me an teacsa faicsinneach), no air a thoirt a-steach tro dhòighean eile, leithid teacsa a bharrachd falaichte leis a’ .sr-onlychlas.

Le bràistean

Cuir bràistean ri nì buidhne liosta sam bith gus cunntasan gun leughadh, gnìomhachd agus barrachd a shealltainn le cuideachadh bho chuid de ghoireasan .

  • Rud liosta14
  • An dàrna nì liosta2
  • An treas nì liosta1
<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>

Susbaint gnàthaichte

Cuir cha mhòr HTML sam bith a-staigh, eadhon airson buidhnean liosta ceangailte mar an tè gu h-ìosal, le cuideachadh bho ghoireasan 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">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>

Giùlan JavaScript

Cleachd am plugan tab JavaScript - cuir a-steach e leotha fhèin no tron bootstrap.js​​​​fhaidhle cruinnichte - gus ar buidheann liosta a leudachadh gus panaichean tabable de shusbaint ionadail a chruthachadh.

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

A’ cleachdadh feartan dàta

Faodaidh tu seòladh buidhne liosta a chuir an gnìomh gun JavaScript sam bith a sgrìobhadh le bhith dìreach a’ sònrachadh data-toggle="list"no air eileamaid. Cleachd na feartan dàta seo air .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>

Air sgàth javascript

Dèan comas air nì liosta tabbable tro JavaScript (feumaidh gach nì liosta a chuir an gnìomh leotha fhèin):

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

Faodaidh tu nì liosta fa leth a chuir an gnìomh ann an grunn dhòighean:

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

A 'bhuaidh a dh' fhalbh

Gus am bi am pannal tabaichean a’ seargadh a-steach, cuir .faderis gach faidhle .tab-pane. Feumaidh a’ chiad phana taba cuideachd .showan susbaint tùsail a dhèanamh follaiseach.

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

Dòighean-obrach

$().tab

Cuir an gnìomh eileamaid nì liosta agus inneal susbaint. Bu chòir gum biodh an dàrna cuid data-targetno hrefnòta targaideach aig tab anns an 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('show')

Tagh an nì liosta a chaidh a thoirt seachad agus seallaidh e am pana co-cheangailte ris. Bidh nì liosta sam bith eile a chaidh a thaghadh roimhe gun a bhith air a thaghadh agus tha am pana co-cheangailte ris falaichte. Tillidh e chun neach-fios mus deach am pana taba a shealltainn (mar eisimpleir, mus tachair an shown.bs.tabtachartas).

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

Tachartasan

Nuair a sheallas tu taba ùr, bidh na tachartasan a’ losgadh san òrdugh a leanas:

  1. hide.bs.tab(air an taba gnìomhach làithreach)
  2. show.bs.tab(air an taba a tha ri fhaicinn)
  3. hidden.bs.tab(air an taba gnìomhach roimhe, an aon fhear ris an hide.bs.tabtachartas)
  4. shown.bs.tab(air an taba a tha dìreach air a thaisbeanadh gu gnìomhach, an aon fhear ris an show.bs.tabtachartas)

Mura robh taba gnìomhach mu thràth, cha tèid na tachartasan hide.bs.tabagus na tachartasan a chuir às.hidden.bs.tab

Seòrsa tachartas Tuairisgeul
seall.bs.tab Bidh an tachartas seo a’ losgadh air taisbeanadh tab, ach mus deach an taba ùr a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
air a shealltainn.bs.tab Bidh an tachartas seo a’ losgadh air taisbeanadh tabaichean às deidh taba a bhith air a shealltainn. Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach agus an taba gnìomhach roimhe (ma tha sin ri fhaighinn) fa leth.
seiche.bs.tab Bidh an tachartas seo a’ losgadh nuair a tha taba ùr gu bhith air a shealltainn (agus mar sin tha an taba gnìomhach roimhe gu bhith falaichte). Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach gnàthach agus an taba ùr a dh’ aithghearr gu bhith gnìomhach, fa leth.
falaichte.bs.tab Bidh an tachartas seo a’ losgadh às deidh taba ùr a nochdadh (agus mar sin tha an taba gnìomhach roimhe falaichte). Cleachd event.targetagus event.relatedTargetgus cuimseachadh air an taba gnìomhach roimhe agus an taba gnìomhach ùr, fa leth.
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})