Ẹgbẹ akojọ
Awọn ẹgbẹ atokọ jẹ ẹya to rọ ati agbara fun iṣafihan lẹsẹsẹ ti akoonu. Ṣatunṣe ki o faagun wọn lati ṣe atilẹyin fun eyikeyi akoonu laarin.
Apẹẹrẹ ipilẹ
Ẹgbẹ atokọ ipilẹ julọ jẹ atokọ ti a ko paṣẹ pẹlu awọn ohun atokọ ati awọn kilasi to dara. Kọ sori rẹ pẹlu awọn aṣayan ti o tẹle, tabi pẹlu CSS tirẹ bi o ṣe nilo.
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kẹrin
- Ati ọkan karun
<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>
Awọn nkan ti nṣiṣe lọwọ
Ṣafikun .active
-un lati .list-group-item
tọka si yiyan ti nṣiṣe lọwọ lọwọlọwọ.
- Ohun ti nṣiṣe lọwọ
- Nkan keji
- Ohun kẹta
- Ohun kẹrin
- Ati ọkan karun
<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>
Awọn nkan alaabo
Fikun -un .disabled
lati jẹ .list-group-item
ki o dabi alaabo. Ṣe akiyesi pe diẹ ninu awọn eroja pẹlu .disabled
yoo tun nilo JavaScript aṣa lati pa awọn iṣẹlẹ titẹ wọn ni kikun (fun apẹẹrẹ, awọn ọna asopọ).
- Nkan alaabo
- Nkan keji
- Ohun kẹta
- Ohun kẹrin
- Ati ọkan karun
<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>
Awọn ọna asopọ ati awọn bọtini
Lo <a>
awọn s tabi <button>
s lati ṣẹda awọn ohun ẹgbẹ ti o le ṣiṣẹ pẹlu rababa, alaabo, ati awọn ipinlẹ ti nṣiṣe lọwọ nipa fifi .list-group-item-action
. A ya awọn kilasi afarape wọnyi sọtọ lati rii daju pe awọn ẹgbẹ atokọ ti a ṣe ti awọn eroja ti kii ṣe ibaraenisepo (bii awọn <li>
s tabi <div>
s) ko pese titẹ tabi tẹ owo ni kia kia.
Rii daju pe o ko lo awọn .btn
kilasi boṣewa nibi .
<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>
Pẹlu <button>
s, o tun le ṣe awọn lilo ti awọn disabled
abuda dipo ti .disabled
kilasi. Ibanujẹ, <a>
s ko ṣe atilẹyin abuda alaabo.
<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>
Fọ
Fikun -un .list-group-flush
lati yọ diẹ ninu awọn aala ati awọn igun yika lati ṣe awọn ohun ẹgbẹ akojọ eti-si-eti ninu apo obi kan (fun apẹẹrẹ, awọn kaadi).
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kẹrin
- Ati ọkan karun
<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>
Petele
Ṣafikun .list-group-horizontal
lati yi ifilelẹ awọn ohun ẹgbẹ atokọ pada lati inaro si petele kọja gbogbo awọn aaye fifọ. Ni omiiran, yan iyatọ idahun .list-group-horizontal-{sm|md|lg|xl}
lati ṣe akojọpọ atokọ petele ti o bẹrẹ ni aaye fifọ yẹn min-width
. Lọwọlọwọ petele akojọ awọn ẹgbẹ ko le wa ni idapo pelu danu akojọ awọn ẹgbẹ.
ProTip: Ṣe o fẹ awọn ohun ẹgbẹ atokọ iwọn-dogba nigbati petele? Fi .flex-fill
si kọọkan akojọ ẹgbẹ ohun kan.
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kan
- Nkan keji
- Ohun kẹta
- Ohun kan
- Nkan keji
- Ohun kẹta
<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>
Awọn kilasi asọye
Lo awọn kilasi ọrọ-ọrọ si awọn ohun atokọ ara pẹlu abẹlẹ ipinlẹ ati awọ.
- A o rọrun akojọ aiyipada akojọ ohun kan
- Nkan ẹgbẹ atokọ akọkọ ti o rọrun
- A o rọrun Atẹle akojọ Ẹgbẹ ohun kan
- A o rọrun akojọ ohun ẹgbẹ aseyori
- A o rọrun akojọ ewu Ẹgbẹ ohun kan
- A o rọrun Ikilọ akojọ Ẹgbẹ ohun kan
- A o rọrun info akojọ ohun kan ẹgbẹ
- A o rọrun ina akojọ Ẹgbẹ ohun kan
- A o rọrun dudu akojọ Ẹgbẹ ohun kan
<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>
Awọn kilasi asọye tun ṣiṣẹ pẹlu .list-group-item-action
. Ṣe akiyesi afikun ti awọn aza rababa nibi ko wa ninu apẹẹrẹ ti tẹlẹ. Tun ni atilẹyin ni .active
ipinle; lo lati ṣe afihan yiyan ti nṣiṣe lọwọ lori ohun ẹgbẹ atokọ ọrọ-ọrọ kan.
<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>
Gbigbe itumo si awọn imọ-ẹrọ iranlọwọ
Lilo awọ lati ṣafikun itumọ nikan n pese itọkasi wiwo, eyiti kii yoo gbe lọ si awọn olumulo ti awọn imọ-ẹrọ iranlọwọ - gẹgẹbi awọn oluka iboju. Rii daju pe alaye ti o tọka si nipasẹ awọ jẹ eyiti o han gbangba lati inu akoonu funrararẹ (fun apẹẹrẹ ọrọ ti o han), tabi pẹlu pẹlu awọn ọna omiiran, gẹgẹbi afikun ọrọ ti o farapamọ pẹlu .sr-only
kilasi naa.
Pẹlu awọn baaji
Ṣafikun awọn baagi si eyikeyi ohun ẹgbẹ atokọ lati ṣafihan awọn iṣiro ti a ko ka, iṣẹ ṣiṣe, ati diẹ sii pẹlu iranlọwọ ti diẹ ninu awọn ohun elo .
- Nkan akojọ 14
- Nkan atokọ keji 2
- Atokọ kẹta nkan 1
<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>
Aṣa akoonu
Ṣafikun fere eyikeyi HTML laarin, paapaa fun awọn ẹgbẹ atokọ ti o sopọ bi eyiti o wa ni isalẹ, pẹlu iranlọwọ ti awọn ohun elo flexbox .
Atokọ nkan ẹgbẹ
3 ọjọ seyinDiẹ ninu akoonu dimu ni ìpínrọ kan.
Ati diẹ ninu awọn titẹ kekere.Atokọ nkan ẹgbẹ
3 ọjọ seyinDiẹ ninu akoonu dimu ni ìpínrọ kan.
Ati diẹ ninu awọn titẹ kekere ti o dakẹ.Atokọ nkan ẹgbẹ
3 ọjọ seyinDiẹ ninu akoonu dimu ni ìpínrọ kan.
Ati diẹ ninu awọn titẹ kekere ti o dakẹ.<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>
JavaScript ihuwasi
Lo ohun itanna JavaScript taabu-pẹlu ẹyọkan tabi nipasẹ bootstrap.js
faili ti a ṣajọpọ—lati faagun ẹgbẹ atokọ wa lati ṣẹda awọn panee ti akoonu agbegbe.
<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>
Lilo awọn abuda data
O le mu lilọ kiri ẹgbẹ akojọ kan ṣiṣẹ laisi kikọ eyikeyi JavaScript nipa sisọ pato data-toggle="list"
tabi lori nkan kan. Lo awọn abuda data wọnyi lori .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>
Nipasẹ JavaScript
Jeki ohun atokọ tabbable ṣiṣẹ nipasẹ JavaScript (ohun atokọ kọọkan nilo lati muu ṣiṣẹ ni ẹyọkan):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
O le mu nkan atokọ kọọkan ṣiṣẹ ni awọn ọna pupọ:
$('#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
Ipa ipare
Lati jẹ ki nronu awọn taabu ipare sinu, fi .fade
si kọọkan .tab-pane
. PAN taabu akọkọ gbọdọ tun ni .show
lati jẹ ki akoonu ibẹrẹ han.
<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>
Awọn ọna
$().taabu
Mu ohun akojọ kan ṣiṣẹ ati eiyan akoonu. Taabu yẹ ki o ni boya a data-target
tabi href
ifọkansi oju ipade apoti kan ninu 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>
.taabu('ifihan')
Yan ohun akojọ ti a fun ati ṣafihan PAN ti o somọ. Eyikeyi ohun akojọ miiran ti o ti yan tẹlẹ di aiyan ati pe apamọ ti o somọ ti wa ni pamọ. Pada si olupe ṣaaju ki iwe taabu ti han gangan (fun apẹẹrẹ, ṣaaju ki shown.bs.tab
iṣẹlẹ to waye).
$('#someListItem').tab('show')
Awọn iṣẹlẹ
Nigbati o ba nfihan taabu tuntun, awọn iṣẹlẹ ina ni ilana atẹle:
hide.bs.tab
(lori taabu lọwọ lọwọlọwọ)show.bs.tab
(lori taabu ti yoo han)hidden.bs.tab
(lori taabu ti nṣiṣe lọwọ iṣaaju, ọkan kanna funhide.bs.tab
iṣẹlẹ naa)shown.bs.tab
(lori taabu ti o ṣẹṣẹ n ṣiṣẹ tuntun, ọkan kanna funshow.bs.tab
iṣẹlẹ naa)
Ti ko ba si taabu ti ṣiṣẹ tẹlẹ, hide.bs.tab
ati awọn hidden.bs.tab
iṣẹlẹ ko ni le kuro lenu ise.
Iru iṣẹlẹ | Apejuwe |
---|---|
fihan.bs.taabu | Iṣẹlẹ yii ina lori ifihan taabu, ṣugbọn ṣaaju ki o to han taabu tuntun. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele. |
han.bs.taabu | Iṣẹlẹ yi ina lori ifihan taabu lẹhin ti a ti fi taabu kan han. Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ ati taabu lọwọlọwọ ti tẹlẹ (ti o ba wa) ni atele. |
tọju.bs.taabu | Iṣẹlẹ yii n ṣiṣẹ nigbati taabu tuntun yoo han (ati nitorinaa taabu ti nṣiṣe lọwọ tẹlẹ ni lati farapamọ). Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ lọwọlọwọ ati taabu tuntun lai-lati-ṣiṣẹ, ni atele. |
farasin.bs.taabu | Iṣẹlẹ yii n tan lẹhin ti taabu tuntun ti han (ati nitorinaa taabu ti nṣiṣe lọwọ iṣaaju ti farapamọ). Lo event.target ati event.relatedTarget lati fojusi taabu ti nṣiṣe lọwọ iṣaaju ati taabu ti nṣiṣe lọwọ tuntun, lẹsẹsẹ. |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})