Ro'yxat guruhi
Ro'yxat guruhlari bir qator tarkibni ko'rsatish uchun moslashuvchan va kuchli komponentdir. Deyarli har qanday tarkibni qo'llab-quvvatlash uchun ularni o'zgartiring va kengaytiring.
Asosiy misol
Eng asosiy ro'yxat guruhi - bu ro'yxat elementlari va tegishli sinflar bilan tartiblanmagan ro'yxat. Unga keyingi variantlar yoki kerak bo'lganda o'z CSS-ni yarating.
- Buyum
- Ikkinchi element
- Uchinchi element
- To'rtinchi element
- Va beshinchisi
<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>
Faol elementlar
Joriy faol tanlovni ko'rsatish .active
uchun a ga qo'shing ..list-group-item
- Faol element
- Ikkinchi element
- Uchinchi element
- To'rtinchi element
- Va beshinchisi
<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>
O'chirilgan elementlar
Uni o'chirib.disabled
qo'yish uchun a ga qo'shing . E'tibor bering, ba'zi elementlar bosish hodisalarini (masalan, havolalar) to'liq o'chirish uchun maxsus JavaScript-ni ham talab qiladi..list-group-item
.disabled
- O'chirilgan element
- Ikkinchi element
- Uchinchi element
- To'rtinchi element
- Va beshinchisi
<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>
Havolalar va tugmalar
<a>
s yoki s tugmalaridan foydalanib , sichqonchani koʻtarib turgan, oʻchirilgan va faol holatlarga ega boʻlgan amal qilinadigan roʻyxat guruhi elementlarini qoʻshish <button>
orqali yarating . Interaktiv bo'lmagan elementlardan (masalan , s yoki s) tuzilgan ro'yxat guruhlari bosish yoki teginish imkoniyatini ta'minlamasligi uchun biz ushbu psevdosinflarni ajratamiz..list-group-item-action
<li>
<div>
Bu erda standart sinflardan foydalanmaslikka.btn
ishonch hosil qiling .
<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>
s bilan siz sinf o'rniga atributdan <button>
ham foydalanishingiz mumkin . Afsuski, s disabled atributini qo'llab-quvvatlamaydi.disabled
.disabled
<a>
<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>
Yuvish
.list-group-flush
Roʻyxat guruhlari elementlarini ota-konteynerda (masalan, kartalar) chekka-chekka koʻrsatish uchun baʼzi chegaralar va yumaloq burchaklarni olib tashlash uchun qoʻshing .
- Buyum
- Ikkinchi element
- Uchinchi element
- To'rtinchi element
- Va beshinchisi
<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
Roʻyxat guruhi elementlarining tartibini barcha toʻxtash nuqtalari boʻyicha vertikaldan gorizontalga oʻzgartirish uchun qoʻshing . .list-group-horizontal-{sm|md|lg|xl}
Shu bilan bir qatorda, ro'yxat guruhini o'sha to'xtash nuqtasidan boshlab gorizontal qilish uchun javob beruvchi variantni tanlang min-width
. Hozirda gorizontal roʻyxat guruhlarini toza roʻyxat guruhlari bilan birlashtirib boʻlmaydi.
Maslahat: Gorizontal bo'lganda teng kenglikdagi ro'yxat guruhlari elementlarini xohlaysizmi? .flex-fill
Har bir roʻyxat guruh bandiga qoʻshing .
- Buyum
- Ikkinchi element
- Uchinchi element
- Buyum
- Ikkinchi element
- Uchinchi element
- Buyum
- Ikkinchi element
- Uchinchi element
- Buyum
- Ikkinchi element
- Uchinchi element
- Buyum
- Ikkinchi element
- Uchinchi 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>
Kontekstli sinflar
Holatli fon va rangga ega roʻyxat elementlarini uslublash uchun kontekstli sinflardan foydalaning.
- Oddiy standart ro'yxat guruh elementi
- Oddiy asosiy ro'yxat guruh elementi
- Oddiy ikkilamchi ro'yxat guruh elementi
- Oddiy muvaffaqiyat ro'yxati guruh elementi
- Oddiy xavf ro'yxati guruh elementi
- Oddiy ogohlantirish ro'yxati guruh elementi
- Oddiy ma'lumotlar ro'yxati guruh elementi
- Oddiy yorug'lik ro'yxati guruh elementi
- Oddiy qorong'u ro'yxat guruh 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>
Kontekstli sinflar ham bilan ishlaydi .list-group-item-action
. Oldingi misolda mavjud bo'lmagan hover uslublari qo'shilishiga e'tibor bering. Shuningdek, .active
davlat tomonidan qo'llab-quvvatlanadi; kontekstli ro'yxat guruhi elementida faol tanlovni ko'rsatish uchun uni qo'llang.
<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>
Yordamchi texnologiyalarga ma'no etkazish
Ma'no qo'shish uchun rangdan foydalanish faqat vizual ko'rsatkichni ta'minlaydi, bu yordamchi texnologiyalar foydalanuvchilariga, masalan, ekranni o'qiydiganlarga etkazilmaydi. Rang bilan belgilangan ma'lumotlar mazmunning o'zidan (masalan, ko'rinadigan matn) aniq bo'lishiga yoki .sr-only
sinf bilan yashiringan qo'shimcha matn kabi muqobil vositalar orqali kiritilganligiga ishonch hosil qiling.
Belgilar bilan
Baʼzi yordamchi dasturlar yordamida oʻqilmaganlar soni, faollik va boshqalarni koʻrsatish uchun roʻyxatdagi istalgan guruh bandiga nishonlar qoʻshing .
- Ro'yxat elementi14
- Ro'yxatning ikkinchi elementi2
- Uchinchi ro'yxat 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>
Shaxsiy tarkib
Flexbox yordam dasturlari yordamida, hatto quyidagi kabi bog'langan ro'yxat guruhlari uchun ham deyarli har qanday HTML qo'shing .
<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 harakati
bootstrap.js
Mahalliy kontentning yorliqli panellarini yaratish uchun ro'yxat guruhimizni kengaytirish uchun JavaScript plaginidan foydalaning - uni alohida yoki tuzilgan fayl orqali kiriting.
<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>
Ma'lumotlar atributlaridan foydalanish
Roʻyxat guruhi navigatsiyasini biron bir JavaScript yozmasdan, oddiygina koʻrsatib data-toggle="list"
yoki elementda faollashtirishingiz mumkin. Ushbu ma'lumotlar atributlaridan foydalaning .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 orqali
JavaScript orqali yorliqlar ro'yxati elementini yoqish (har bir ro'yxat elementi alohida faollashtirilishi kerak):
$('#myList a').on('click', function (event) {
event.preventDefault()
$(this).tab('show')
})
Siz alohida ro'yxat elementini bir necha usul bilan faollashtirishingiz mumkin:
$('#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
Yopish effekti
Yorliqlar panelini .fade
oʻchirish uchun har biriga qoʻshing .tab-pane
. Birinchi yorliq paneli ham .show
boshlang'ich tarkibni ko'rinadigan qilish kerak.
<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>
Usullari
$().tab
Roʻyxat elementi elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-target
yoki a bo'lishi kerak .href
<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('shou')
Berilgan ro'yxat elementini tanlaydi va unga bog'langan panelni ko'rsatadi. Oldindan tanlangan boshqa har qanday roʻyxat elementi tanlanmagan boʻladi va unga bogʻliq boʻlgan panel berkitiladi. Qo'ng'iroq qiluvchiga yorliqlar paneli ko'rsatilishidan oldin (masalan, shown.bs.tab
voqea sodir bo'lishidan oldin) qaytadi.
$('#someListItem').tab('show')
Voqealar
Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:
hide.bs.tab
(joriy faol yorliqda)show.bs.tab
(ko'rsatiladigan yorliqda)hidden.bs.tab
(oldingi faol yorliqda, voqea uchun bir xilhide.bs.tab
)shown.bs.tab
(yangi faol ko'rsatilgan yorliqda, xuddishow.bs.tab
voqea uchun)
Agar hech qanday yorliq faol bo'lmasa, hide.bs.tab
va hidden.bs.tab
hodisalari o'chirilmaydi.
Tadbir turi | Tavsif |
---|---|
show.bs.tab | Bu voqea tab ko'rsatishda ishga tushadi, lekin yangi tab ko'rsatilishidan oldin. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.target foydalaning .event.relatedTarget |
ko'rsatilgan.bs.tab | Ushbu hodisa varaq ko'rsatilgandan so'ng yorliqlar ko'rsatishda ishga tushadi. Faol va oldingi faol varaqni (agar mavjud bo'lsa) mos ravishda belgilash uchun va event.target foydalaning .event.relatedTarget |
hide.bs.tab | Ushbu hodisa yangi yorliq ko'rsatilishi kerak bo'lganda boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Joriy faol yorliq va yaqinda faol boʻladigan yangi yorliq uchun mos ravishda va event.target foydalaning .event.relatedTarget |
yashirin.bs.tab | Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Oldingi faol yorliq va yangi faol yorliq uchun mos ravishda event.target va dan foydalaning .event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})