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.
Eng asosiy ro'yxat guruhi - bu ro'yxat elementlari va tegishli sinflar bilan tartiblanmagan ro'yxat. Unga keyingi variantlardan yoki kerak bo'lganda o'z CSS-dan foydalaning.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Eroz va vestibulum
<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>
Joriy faol tanlovni ko'rsatish .active
uchun a ga qo'shing ..list-group-item
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Eroz va vestibulum
<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>
Oʻchirilgan koʻrinishi.disabled
uchun a .list-group-item
ga qoʻshing . E'tibor bering, ba'zi elementlar bosish hodisalarini (masalan, havolalar) to'liq o'chirish uchun maxsus JavaScript-ni ham talab qiladi..disabled
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Eroz va vestibulum
<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>
<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">
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>
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">
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>
.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 .
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Eroz va vestibulum
<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>
Holatli fon va rangga ega roʻyxat elementlarini uslublash uchun kontekstli sinflardan foydalaning.
- Dapibus ac facilisis in
- Bu asosiy roʻyxat guruhi elementi
- Bu ikkinchi darajali guruh elementi
- Bu muvaffaqiyat roʻyxati guruhi elementi
- Bu xavf roʻyxati guruhi elementi
- Bu ogohlantirish ro'yxati guruhi elementi
- Bu ma'lumotlar ro'yxati guruh elementi
- Bu engil ro'yxatdagi guruh elementi
- Bu qorong'u ro'yxatdagi guruh elementi
<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>
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">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>
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.
Baʼzi yordamchi dasturlar yordamida oʻqilmaganlar soni, faollik va boshqalarni koʻrsatish uchun roʻyxatdagi istalgan guruh bandiga nishonlar qoʻshing .
- Cras justo odio14
- Dapibus ac facilisis in2
- 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>
Flexbox yordam dasturlari yordamida, hatto quyidagi kabi bog'langan ro'yxat guruhlari uchun ham deyarli har qanday HTML qo'shing .
Guruh sarlavhasi
3 kun oldinDonec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Guruh sarlavhasi
3 kun oldinDonec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.Guruh sarlavhasi
3 kun oldinDonec id elit non mi porta gravida va eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta.<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>
bootstrap.js
Mahalliy kontentning yorliqli panellarini yaratish uchun ro'yxat guruhimizni kengaytirish uchun JavaScript plaginidan foydalaning - uni alohida yoki tuzilgan fayl orqali kiriting.
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
.
JavaScript orqali yorliqlar ro'yxati elementini yoqish (har bir ro'yxat elementi alohida faollashtirilishi kerak):
Siz alohida ro'yxat elementini bir necha usul bilan faollashtirishingiz mumkin:
Yorliqlar panelini .fade
oʻchirish uchun har biriga qoʻshing .tab-pane
. Birinchi yorliq paneli ham .show
boshlang'ich tarkibni ko'rinadigan qilish kerak.
Roʻyxat elementi elementi va kontent konteynerini faollashtiradi. Yorliqda DOM-dagi konteyner tuguniga mo'ljallangan data-target
yoki a bo'lishi kerak .href
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. Yorliqlar paneli ko'rsatilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.tab
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 |