Sanaw topary
Sanaw toparlary bir topar mazmuny görkezmek üçin çeýe we güýçli komponentdir. Içindäki islendik mazmuny goldamak üçin olary üýtgediň we giňeldiň.
Esasy mysal
Iň esasy sanaw topary, sanaw elementleri we degişli synplar bilen tertipsiz sanaw. Ondan soňky saýlawlar ýa-da zerur bolanda öz CSS-leriňiz bilen guruň.
- Bir element
- Ikinji element
- Üçünji element
- Dördünji element
- Bäşinji
<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>
Işjeň zatlar
Häzirki işjeň saýlamany görkezmek .active
üçin a goşuň ..list-group-item
- Işjeň element
- Ikinji element
- Üçünji element
- Dördünji element
- Bäşinji
<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>
Öçürilen zatlar
Öçürilen ýaly görünmek üçin .disabled
a goşuň . Käbir elementleriň basmak hadysalaryny (meselem, baglanyşyklar) doly öçürmek üçin ýörite JavaScript talap ediljekdigine üns beriň ..list-group-item
.disabled
- Öçürilen element
- Ikinji element
- Üçünji element
- Dördünji element
- Bäşinji
<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>
Salgylar we düwmeler
Goşmak arkaly hereketli, ýapyk we işjeň ýagdaýlar bilen hereket edip boljak sanaw toparlaryny döretmek üçin <a>
s ýa-da s ulanyň . Interaktiw däl elementlerden düzülen sanaw toparlarynyň ( ýa-da lar) basmak ýa-da basmak mümkinçiligini üpjün etmezligi üçin bu galp synplary bölýäris.<button>
.list-group-item-action
<li>
<div>
Bu ýerde adaty sapaklary ulanmaň.btn
.
<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>
<button>
S bilen , synpyň disabled
ýerine atributdan peýdalanyp bilersiňiz. .disabled
Gynansagam, <a>
s ýapyk atributy goldamaýar.
<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>
Flush
.list-group-flush
Ene konteýnerde (meselem, kartoçkalarda) sanaw toparlarynyň elementlerini gyrada görkezmek üçin käbir serhetleri we tegelek burçlary aýyrmak üçin goşuň .
- Bir element
- Ikinji element
- Üçünji element
- Dördünji element
- Bäşinji
<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>
Gorizontal
.list-group-horizontal
Sanaw toparlarynyň elementleriniň ýerleşişini ähli kesiş nokatlarynda dikligine keseligine üýtgetmek üçin goşuň . Ativea-da bolmasa, .list-group-horizontal-{sm|md|lg|xl}
şol nokatdan başlap sanaw toparyny keseligine düzmek üçin täsirli warianty saýlaň min-width
. Häzirki wagtda keseligine sanaw toparlaryny sanaw sanawy toparlary bilen birleşdirip bolmaz.
ProTip: Gorizontal bolanda deň giňlikdäki sanaw topar elementlerini isleýärsiňizmi? .flex-fill
Her sanaw toparyna element goşuň .
- Bir element
- Ikinji element
- Üçünji element
- Bir element
- Ikinji element
- Üçünji element
- Bir element
- Ikinji element
- Üçünji element
- Bir element
- Ikinji element
- Üçünji element
- Bir element
- Ikinji element
- Üçünji element
<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>
Kontekst sapaklary
Düzgünli we reňkli elementleriň sanawyny düzmek üçin kontekst sapaklaryny ulanyň.
- Simpleönekeý deslapky sanaw topary elementi
- Simpleönekeý başlangyç sanaw topary elementi
- Simpleönekeý ikinji derejeli topar elementi
- Successönekeý üstünlik sanawy topar elementi
- Dangerönekeý howp sanawy topary elementi
- Simpleönekeý duýduryş sanawy topary elementi
- Simpleönekeý maglumat sanawy topar elementi
- Lightönekeý yşyk sanawy topary elementi
- Simpleönekeý garaňky sanaw topary elementi
<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>
Kontekst sapaklary hem işleýär .list-group-item-action
. Öňki mysalda ýok bu ýerdäki aýlaw stilleriniň goşulmagyna üns beriň. Şeýle hem .active
döwlet goldaw berýär; kontekstdäki sanaw topary elementinde işjeň saýlamany görkezmek üçin ulanyň.
<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>
Kömekçi tehnologiýalara many bermek
Reňk ulanmak manysyny goşmak üçin diňe ekran okyjylary ýaly kömekçi tehnologiýalary ulanyjylara ýetirip bolmajak wizual görkezme berýär. Reňk bilen görkezilen maglumatlaryň mazmunyň özünden (meselem, görünýän tekstden) aç-açan ýa-da .sr-only
synp bilen gizlenen goşmaça tekst ýaly alternatiw usullar arkaly girizilendigine göz ýetiriň.
Nyşanlar bilen
Käbir kömekçi enjamlaryň kömegi bilen okalmadyk sanlary, işjeňligi we başga zatlary görkezmek üçin islendik sanaw toparyna element goşuň .
- Sanaw elementi14
- Ikinji sanaw elementi2
- Üçünji sanaw elementi1
<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>
Omörite mazmun
Flexbox kömekçi enjamlarynyň kömegi bilen, hatda aşakdaky ýaly baglanyşdyrylan sanaw toparlary üçin hem islendik HTML diýen ýaly goşuň .
Topar elementiniň sözbaşysyny sanaň
3 gün öňAbzasdaky käbir ýer eýesi mazmuny.
Käbir ownuk çap.Topar elementiniň sözbaşysyny sanaň
3 gün öňAbzasdaky käbir ýer eýesi mazmuny.
Käbirleri bolsa kiçijik çap edildi.Topar elementiniň sözbaşysyny sanaň
3 gün öňAbzasdaky käbir ýer eýesi mazmuny.
Käbirleri bolsa kiçijik çap edildi.<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 häsiýeti
bootstrap.js
Javaerli mazmunyň tablisa panellerini döretmek üçin sanaw toparymyzy giňeltmek üçin JavaScript pluginini ulanyň - ony aýratyn ýa-da düzülen faýlyň üsti bilen goşuň.
<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>
Maglumat atributlaryny ulanmak
Diňe bir elementi ýa-da bir elementi görkezip, hiç hili JavaScript ýazmazdan sanaw topary nawigasiýasyny işjeňleşdirip bilersiňiz data-toggle="list"
. Bu maglumat atributlaryny ulanyň .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>
JavaScript arkaly
JavaScript arkaly tablisa sanawy elementini açyň (her sanaw elementi aýratyn işjeňleşdirilmeli):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Aýry-aýry sanaw elementlerini birnäçe usul bilen işjeňleşdirip bilersiňiz:
$('#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
Öçürilen effekt
Salgylar paneliniň ýitmegi .fade
üçin hersine goşuň .tab-pane
. Ilkinji goýma paneli .show
başlangyç mazmuny görünmeli.
<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>
Usullar
$ () goýmasy
Sanaw elementiniň elementini we mazmun gapyny işjeňleşdirýär. Salgyda ýa data-target
-da href
DOM-da konteýner düwünini nyşana alýan bolmaly.
<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 ('görkezmek')
Berlen sanaw elementini saýlaýar we baglanyşykly paneli görkezýär. Öň saýlanan islendik beýleki sanaw elementi saýlanmaýar we oňa bagly panel gizlenýär. Salgy paneli hakykatdanam görkezilmänkä (mysal üçin, shown.bs.tab
waka ýüze çykmazdan ozal) jaň edijä gaýdyp gelýär.
$('#someListItem').tab('show')
Wakalar
Täze tab görkezilende wakalar aşakdaky tertipde ýanýar:
hide.bs.tab
(häzirki işjeň goýmada)show.bs.tab
(görkezilmeli goýmada)hidden.bs.tab
hide.bs.tab
(öňki işjeň goýmada, waka bilen birmeňzeş )shown.bs.tab
show.bs.tab
(täze işjeň görkezilen ýaňy görkezilen goýmada, waka bilen birmeňzeş )
Hiç bir tab goýmasy işjeň bolmadyk bolsa hide.bs.tab
, hidden.bs.tab
wakalar atylmaz.
Çäräniň görnüşi | Düşündiriş |
---|---|
show.bs.tab | Bu waka tab goýmasynda ýanýar, ýöne täze goýma görkezilmänkä. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.target we nyşana alyň.event.relatedTarget |
görkezilen.bs.tab | Bu waka, görkezme görkezilenden soň tab goýmasynda ýanýar. Işjeň goýmany we öňki işjeň goýmany degişlilikde ulanyň event.target we nyşana alyň.event.relatedTarget |
hide.bs.tab | Bu waka täze goýma görkezilmeli bolanda ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenmeli). Häzirki işjeň goýmany we ýakyn wagtda işjeň boljak täze goýmany ulanyň event.target we nyşana alyň.event.relatedTarget |
gizlenen.bs.tab | Bu waka täze goýma görkezilenden soň ýanýar (we şeýlelik bilen öňki işjeň goýma gizlenýär). Öňki işjeň goýmany we täze işjeň goýmany degişlilikde ulanyň event.target we nyşana alyň.event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})