Liosta grúpa
Is comhpháirt sholú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á.
- Mír
- An dara mír
- An tríú mír
- An ceathrú mír
- Agus an cúigiú cuid
<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>
Míreanna gníomhacha
Cuir .active
le a .list-group-item
chun an roghnú gníomhach reatha a léiriú.
- Mír gníomhach
- An dara mír
- An tríú mír
- An ceathrú mír
- Agus an cúigiú cuid
<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>
Míreanna faoi mhíchumas
Cuir .disabled
le a .list-group-item
chun é a dhéanamh díchumasaithe . Tabhair faoi deara go .disabled
mbeidh gá le JavaScript saincheaptha freisin chun a n-imeachtaí cliceáil a dhíchumasú go hiomlán (m.sh., naisc).
- Mír díchumasaithe
- An dara mír
- An tríú mír
- An ceathrú mír
- Agus an cúigiú cuid
<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>
Naisc agus cnaipí
Ú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- .btn
ranganna anseo .
<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, is féidir leat úsáid a bhaint as an disabled
tréith in ionad an .disabled
ranga. 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" 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>
Sruthán
Cuir .list-group-flush
leis 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í).
- Mír
- An dara mír
- An tríú mír
- An ceathrú mír
- Agus an cúigiú cuid
<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>
Cothrománach
Cuir .list-group-horizontal
leis chun leagan amach na míreanna liostaí a athrú ó cheartingearach go cothrománach trasna gach brisphointe. Nó, roghnaigh malairt sofhreagrach .list-group-horizontal-{sm|md|lg|xl}
chun liosta a dhéanamh cothrománach ag tosú ag an brisphointe sin min-width
. Faoi láthair ní féidir grúpaí liosta cothrománacha a chomhcheangal le grúpaí liostaí sruthlaithe.
ProTip: Ar mhaith leat míreanna grúpa liosta comhionann-leithead agus iad cothrománach? Cuir .flex-fill
le gach mír ghrúpa liosta.
- Mír
- An dara mír
- An tríú mír
- Mír
- An dara mír
- An tríú mír
- Mír
- An dara mír
- An tríú mír
- Mír
- An dara mír
- An tríú mír
- Mír
- An dara mír
- An tríú mír
<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>
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.
- Mír ghrúpa simplí de liosta réamhshocraithe
- Príomh-mhír ghrúpa liosta simplí
- Mír ghrúpa liosta tánaisteach simplí
- Mír ghrúpa simplí den liosta rathúlachta
- Liosta contúirte simplí grúpa
- Liosta rabhaidh shimplí mír ghrúpa
- Mír grúpa liosta faisnéise simplí
- Mír grúpa liosta éadrom simplí
- Mír grúpa simplí liosta dorcha
<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>
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 .active
stá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">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>
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-only
rang.
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 .
- Mír liosta14
- An dara mír liosta2
- An tríú mír 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>
Ábhar saincheaptha
Cuir beagnach aon HTML istigh leis, fiú do ghrúpaí liostaí nasctha mar an ceann thíos, le cabhair ó fhóntais flexbox .
Liosta ceannteideal míre grúpa
3 lá ó shinRoinnt ábhar áitsealbhóra i mír.
Agus roinnt cló beag.Liosta ceannteideal míre grúpa
3 lá ó shinRoinnt ábhar áitsealbhóra i mír.
Agus roinnt cló beag balbh.Liosta ceannteideal míre grúpa
3 lá ó shinRoinnt ábhar áitsealbhóra i mír.
Agus roinnt cló beag balbh.<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>
Iompar javascript
Bain úsáid as an breiseán JavaScript cluaisín - cuir san áireamh é ina n-aonar nó tríd an bootstrap.js
gcomhad tiomsaithe - chun ár ngrúpa liosta 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
.
<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>
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 (event) {
event.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 .fade
le gach .tab-pane
. Ní mór go mbeadh ar an gcéad phána cluaisín freisin .show
an 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 sé eilimint mhír liosta agus coimeádán ábhair. Ba cheart go mbeadh nód coimeádán data-target
nó href
nó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.tab
dtarlaíonn an teagmhas).
$('#someListItem').tab('show')
Imeachtaí
Agus cluaisín nua á thaispeáint, cuirtear na himeachtaí ar lasadh san ord seo a leanas:
hide.bs.tab
(ar an gcluaisín gníomhach reatha)show.bs.tab
(ar an gcluaisín le taispeáint)hidden.bs.tab
(ar an gcluaisín gníomhach roimhe seo, an ceann céanna leis anhide.bs.tab
imeacht)shown.bs.tab
(ar an gcluaisín nua-ghníomhach díreach taispeánta, mar an gcéanna leis anshow.bs.tab
imeacht)
Mura raibh aon chluaisín gníomhach cheana féin, ní dhéanfar an hide.bs.tab
agus hidden.bs.tab
imeachtaí 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.target agus event.relatedTarget chun 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.target agus event.relatedTarget chun 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.target agus event.relatedTarget chun an cluaisín gníomhach reatha agus an cluaisín nua luath-le-bheith-ghní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.target agus event.relatedTarget chun 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 (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})