Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS4 ro‘yxat guruhlari

ULASHISH

Oddiy ro‘yxat guruhlari

Eng oddiy ro‘yxat guruhi — ro‘yxat elementlaridan iborat tartiblanmagan ro‘yxat:

  • First item
  • Second item
  • Third item

Oddiy ro‘yxat guruhini yaratish uchun .list-group klassiga ega <ul> elementidan va .list-group-item klassiga ega <li> elementlaridan foydalaning:

Misol

<ul class="list-group">   <li class="list-group-item">First item</li>   <li class="list-group-item">Second item</li>   <li class="list-group-item">Third item</li> </ul>
O‘zingiz sinab ko‘ring »

Faol holat

  • Active item
  • Second item
  • Third item

Joriy elementni ajratib ko‘rsatish uchun .active klassidan foydalaning:

Misol

<ul class="list-group">   <li class="list-group-item active">Active item</li>   <li class="list-group-item">Second item</li>   <li class="list-group-item">Third item</li> </ul>
O‘zingiz sinab ko‘ring »

Havolali elementlarga ega ro‘yxat guruhi

First item Second item Third item

Havolali elementlarga ega ro‘yxat guruhini yaratish uchun <ul> o‘rniga <div> dan, <li> o‘rniga esa <a> dan foydalaning. Agar sichqoncha ustiga olib borilganda kulrang fon rangi paydo bo‘lishini istasangiz, ixtiyoriy ravishda .list-group-item-action klassini qo‘shing:

Misol

<div class="list-group">   <a href="#" class="list-group-item list-group-item-action">First item</a>   <a href="#" class="list-group-item list-group-item-action">Second item</a>   <a href="#" class="list-group-item list-group-item-action">Third item</a> </div>
O‘zingiz sinab ko‘ring »

Nofaol element

.disabled klassi nofaol elementga ochroq matn rangini beradi. Havolalarda ishlatilganda esa hover effektini olib tashlaydi:

Disabled item Disabled item Third item

Misol

<div class="list-group">   <a href="#" class="list-group-item disabled">Disabled item</a>   <a href="#" class="list-group-item disabled">Disabled item</a>   <a href="#" class="list-group-item">Third item</a> </div>
O‘zingiz sinab ko‘ring »

Flush / chegaralarni olib tashlash

Ba’zi chegaralar va yumaloq burchaklarni olib tashlash uchun .list-group-flush klassidan foydalaning:

  • First item
  • Second item
  • Third item
  • Fourth item

Misol

<ul class="list-group list-group-flush">   <li class="list-group-item">First item</li>   <li class="list-group-item">Second item</li>   <li class="list-group-item">Third item</li>   <li class="list-group-item">Fourth item</li> </ul>
O‘zingiz sinab ko‘ring »

Gorizontal ro‘yxat guruhlari

Agar ro‘yxat elementlari vertikal emas, balki gorizontal ko‘rinishda (bir-birining ustida emas, yonma-yon) joylashishini istasangiz, .list-group ga .list-group-horizontal klassini qo‘shing:

  • First item
  • Second item
  • Third item
  • Fourth item

Misol

<ul class="list-group list-group-horizontal">   <li class="list-group-item">First item</li>   <li class="list-group-item">Second item</li>   <li class="list-group-item">Third item</li>   <li class="list-group-item">Fourth item</li> </ul>
O‘zingiz sinab ko‘ring »

Kontekstual klasslar

Ro‘yxat elementlarini bo‘yash uchun kontekstual klasslardan foydalanish mumkin:

  • Success item
  • Secondary item
  • Info item
  • Warning item
  • Danger item
  • Primary item
  • Dark item
  • Light item

Ro‘yxat elementlarini bo‘yash uchun klasslar: .list-group-item-success, list-group-item-secondary, list-group-item-info, list-group-item-warning, .list-group-item-danger, .list-group-item-primary, list-group-item-dark va list-group-item-light:

Misol

<ul class="list-group">   <li class="list-group-item list-group-item-success">Success item</li>   <li class="list-group-item list-group-item-secondary">Secondary item</li>   <li class="list-group-item list-group-item-info">Info item</li>   <li class="list-group-item list-group-item-warning">Warning item</li>   <li class="list-group-item list-group-item-danger">Danger item</li>   <li class="list-group-item list-group-item-primary">Primary item</li>   <li class="list-group-item list-group-item-dark">Dark item</li>   <li class="list-group-item list-group-item-light">Light item</li> </ul>
O‘zingiz sinab ko‘ring »

Kontekstual klassli havola elementlari

Action item Success item Secondary item Info item Warning item Danger item Primary item Dark item Light item

Misol

<div class="list-group">   <a href="#" class="list-group-item list-group-item-action">Action item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>   <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a> </div>
O‘zingiz sinab ko‘ring »

Nishonli ro‘yxat guruhi

Ro‘yxat guruhi ichiga nishonlar qo‘shish uchun .badge klasslarini yordamchi klasslar bilan birgalikda qo‘llang:

  • Inbox 12
  • Ads 50
  • Junk 99

Misol

<ul class="list-group">   <li class="list-group-item d-flex justify-content-between align-items-center">     Inbox     <span class="badge badge-primary badge-pill">12</span>   </li>   <li class="list-group-item d-flex justify-content-between align-items-center">     Ads     <span class="badge badge-primary badge-pill">50</span>   </li>   <li class="list-group-item d-flex justify-content-between align-items-center">     Junk     <span class="badge badge-primary badge-pill">99</span>   </li> </ul>
O‘zingiz sinab ko‘ring »

Maslahat: Bootstrap 4 yordamchi klasslari haqida BS4 yordamchi klasslar bobida batafsil o‘qing.


‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish