Source

Liosta grúpa

Is comhpháirt solúbtha chumhachtach iad grúpaí liosta chun sraith ábhar a thaispeáint. Déan iad a mhodhnú agus a leathnú chun tacú le beagnach aon ábhar laistigh.

Sampla bunúsach

Is é an grúpa liosta is bunúsaí ná liosta neamhordaithe le míreanna liosta agus na ranganna cearta. Tóg air leis na roghanna a leanann, nó le do CSS féin de réir mar is gá.

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

Míreanna gníomhacha

Cuir .activele a .list-group-itemchun an roghnú gníomhach reatha a léiriú.

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

Míreanna faoi mhíchumas

Cuir .disabledle a .list-group-itemchun é a dhéanamh díchumasaithe . Tabhair faoi deara go .disabledmbeidh gá le JavaScript saincheaptha freisin chun a n-imeachtaí cliceáil a dhíchumasú go hiomlán (m.sh., naisc).

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

Úsáid <a>s nó s chun míreanna grúpa liosta inghníomhaithe<button> a chruthú le hover, díchumasaithe, agus stáit ghníomhacha trí . Scaraimid na bréige-ranganna seo lena chinntiú nach soláthraíonn grúpaí liostaí déanta d’eilimintí neamh-idirghníomhacha (cosúil le s nó s) acmhainn cliceáil nó sconna..list-group-item-action<li><div>

Déan cinnte nach n-úsáideann tú na gnáth- .btnranganna anseo .

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

Le <button>s, is féidir leat úsáid a bhaint as an disabledtréith in ionad an .disabledranga. Faraor, <a>ní thacaíonn s leis an aitreabúid díchumasaithe.

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

Sruthán

Cuir .list-group-flushleis chun roinnt teorainneacha agus coirnéil chothromaithe a bhaint chun liosta a dhéanamh de mhíreanna grúpa imeall-go-imeall i gcoimeádán tuismitheora (m.sh., cártaí).

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

Ranganna comhthéacsúla

Bain úsáid as ranganna comhthéacsúla chun míreanna a liostáil le cúlra agus dath státmhar.

  • Dapibus agus facilisis i
  • Is mír ghrúpa liosta príomhúil é seo
  • Is mír ghrúpa liosta tánaisteach é seo
  • Seo mír ghrúpa ar an liosta rathúlachta
  • Is mír ghrúpa liosta contúirte é seo
  • Is mír ghrúpa liosta rabhaidh é seo
  • Is mír ghrúpa liosta faisnéise é seo
  • Is mír ghrúpa liosta éadrom é seo
  • Is mír ghrúpa liosta dorcha é seo
<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</li>


  <li class="list-group-item list-group-item-primary">This is a primary list group item</li>
  <li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
  <li class="list-group-item list-group-item-success">This is a success list group item</li>
  <li class="list-group-item list-group-item-danger">This is a danger list group item</li>
  <li class="list-group-item list-group-item-warning">This is a warning list group item</li>
  <li class="list-group-item list-group-item-info">This is a info list group item</li>
  <li class="list-group-item list-group-item-light">This is a light list group item</li>
  <li class="list-group-item list-group-item-dark">This is a dark list group item</li>
</ul>

Oibríonn ranganna comhthéacsúla le .list-group-item-action. Tabhair faoi deara go bhfuil na stíleanna hover curtha leis anseo nach bhfuil i láthair sa sampla roimhe seo. Tá tacaíocht freisin ag an .activestát; cuir i bhfeidhm é chun roghnú gníomhach a léiriú ar mhír ghrúpa ar liosta comhthéacs.

<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">This is a primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>
</div>
Brí a chur in iúl do theicneolaíochtaí cúnta

Ní thugann úsáid dath chun brí a chur leis ach tásc amhairc, nach gcuirfear in iúl d’úsáideoirí na dteicneolaíochtaí cúnta – mar léitheoirí scáileáin. Cinntigh go bhfuil an t-eolas atá sainaitheanta leis an dath soiléir ón ábhar féin (m.sh. an téacs infheicthe), nó go n-áirítear í ar mhodhanna eile, mar théacs breise i bhfolach leis an .sr-onlyrang.

Le suaitheantais

Cuir suaitheantais le haon mhír ghrúpa liosta chun comhaireamh neamhléite, gníomhaíocht agus tuilleadh a thaispeáint le cabhair ó roinnt fóntais .

  • Cras justo odio14
  • Dapibus agus facilisis i2
  • 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>

Ábhar saincheaptha

Cuir beagnach aon HTML istigh leis, fiú do ghrúpaí liostaí nasctha mar an ceann thíos, le cabhair ó fhóntais flexbox .

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

Iompar javascript

Bain úsáid as an breiseán JavaScript cluaisín - cuir san áireamh é ina n-aonar nó tríd an bootstrap.jsgcomhad tiomsaithe - chun ár liosta grúpa a leathnú chun pannaí cluaisíní d'ábhar áitiúil a chruthú.

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

Ag baint úsáide as tréithe sonraí

Is féidir leat nascleanúint grúpa liosta a ghníomhachtú gan aon JavaScript a scríobh ach go simplí a shonrú data-toggle="list"nó ar eilimint. Úsáid na tréithe sonraí seo 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>

Trí JavaScript

Cumasaigh mír liosta tabbable trí JavaScript (ní mór gach mír liosta a ghníomhachtú ina n-aonar):

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

Is féidir leat mír liosta aonair a ghníomhachtú ar go leor bealaí:

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

Éifeacht céimnithe

Chun an painéal cluaisíní a mhaolú, cuir .fadele gach .tab-pane. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .showan t-ábhar tosaigh a dhéanamh le feiceáil.

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

Modhanna

$().cluaisín

Gníomhachtaíonn eilimint mhír liosta agus coimeádán ábhair. Ba cheart go mbeadh nód coimeádán data-targethrefnód dírithe ar an gcluaisín sa 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('taispeáin')

Roghnaíonn sé an mhír liosta tugtha agus taispeánann sé an phána a bhaineann leis. Ní roghnaítear aon mhír liosta eile a roghnaíodh roimhe seo agus tá an phána a bhaineann leis i bhfolach. Filleann sé ar an nglaoiteoir sula dtaispeántar an phána cluaisín (mar shampla, sula shown.bs.tabdtarlaíonn an teagmhas).

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

Imeachtaí

Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:

  1. hide.bs.tab(ar an gcluaisín gníomhach reatha)
  2. show.bs.tab(ar an gcluaisín le taispeáint)
  3. hidden.bs.tab(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis an hide.bs.tabimeacht)
  4. shown.bs.tab(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis an show.bs.tabimeacht)

Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tabagus hidden.bs.tabimeachtaí a bhácáil.

Cineál imeachta Cur síos
taispeáin.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní, ach sula dtaispeántar an cluaisín nua. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
taispeántar.bs.cluaisín Teann an teagmhas seo ar thaispeántas cluaisíní tar éis cluaisín a thaispeáint. Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach agus an cluaisín gníomhach roimhe seo (má tá sé ar fáil) faoi seach a dhíriú.
folaigh.bs.cluaisín Tineann an teagmhas seo nuair atá cluaisín nua le taispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo le cur i bhfolach). Bain úsáid as event.targetagus event.relatedTargetchun an cluaisín gníomhach reatha agus an cluaisín nua go luath le bheith gníomhach a dhíriú, faoi seach.
i bhfolach.bs.cluaisín Lasann an teagmhas seo tar éis cluaisín nua a thaispeáint (agus mar sin tá an cluaisín gníomhach roimhe seo i bhfolach). Úsáid event.targetagus event.relatedTargetchun an cluaisín gníomhach roimhe seo agus an cluaisín gníomhach nua a dhíriú, faoi seach.
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})