Source

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.

  • 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>

Faol elementlar

Joriy faol tanlovni ko'rsatish .activeuchun 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 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

  • 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" aria-disabled="true">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 .

Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Eroz va vestibulum 
<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" tabindex="-1" aria-disabled="true">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>

Yuvish

.list-group-flushRoʻ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>

Gorizontal

.list-group-horizontalRoʻ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 elementlarini xohlaysizmi? Har bir ro'yxat guruhi elementiga qo'shing .flex-fill.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-sm">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-md">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-lg">
  <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>
</ul>
  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
<ul class="list-group list-group-horizontal-xl">
  <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>
</ul>

Kontekstli sinflar

Holatli fon va rangga ega roʻyxat elementlarini uslublash uchun kontekstli sinflardan foydalaning.

  • Dapibus ac facilisis in
  • 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">Dapibus ac facilisis in</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'shilganligiga e'tibor bering. Shuningdek, .activedavlat tomonidan qo'llab-quvvatlanadi; kontekstli ro'yxat guruhi elementida faol tanlovni ko'rsatish uchun uni qo'llang.

Dapibus ac facilisis in 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 
<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">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-onlysinf 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 .

  • 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>

Shaxsiy tarkib

Flexbox yordam dasturlari yordamida, hatto quyidagi kabi bog'langan ro'yxat guruhlari uchun ham deyarli har qanday HTML qo'shing .

Guruh sarlavhasi
3 kun oldin

Donec 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 oldin

Donec 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 oldin

Donec 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 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">
    <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">
    <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>

JavaScript harakati

bootstrap.jsMahalliy kontentning yorliqli panellarini yaratish uchun ro'yxat guruhimizni kengaytirish uchun JavaScript plaginidan foydalaning - uni alohida yoki tuzilgan fayl orqali kiriting.

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit mashq qilish identifikatori identifikatori bo'lmagan holda minimal bo'lmagan vaqtni takrorlaydi. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

<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.

<!-- 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>

JavaScript orqali

JavaScript orqali yorliqlar ro'yxati elementini yoqish (har bir ro'yxat elementi alohida faollashtirilishi kerak):

$('#myList a').on('click', function (e) {
  e.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 .fadeoʻchirish uchun har biriga qoʻshing .tab-pane. Birinchi yorliq paneli ham .showboshlang'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-targetyoki 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. Yorliqlar paneli ko'rsatilishidan oldin (masalan, voqea sodir bo'lishidan oldin) qo'ng'iroq qiluvchiga qaytadi .shown.bs.tab

$('#someListItem').tab('show')

Voqealar

Yangi yorliq ko'rsatilganda voqealar quyidagi tartibda yonadi:

  1. hide.bs.tab(joriy faol yorliqda)
  2. show.bs.tab(ko'rsatiladigan yorliqda)
  3. hidden.bs.tab(oldingi faol yorliqda, voqea uchun bir xil hide.bs.tab)
  4. shown.bs.tab(yangi faol ko'rsatilgan yorliqda, xuddi show.bs.tabvoqea uchun)

Agar hech qanday yorliq faol bo'lmasa, hide.bs.tabva hidden.bs.tabhodisalari 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.targetfoydalaning .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.targetfoydalaning .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.targetfoydalaning .event.relatedTarget
yashirin.bs.tab Ushbu hodisa yangi yorliq ko'rsatilgandan so'ng boshlanadi (va shuning uchun oldingi faol yorliq yashiriladi). Foydalanishevent.targetevent.relatedTargetOldingi faol yorliq va yangi faol yorliq uchun mos ravishda va 
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})