Sertifikat olingYANGIW3Schools ilovasiiOS va AndroidSarguzashtni boshlang

BS 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 »

Nishonli ro‘yxat guruhi

Ro‘yxat guruhiga nishonlar ham qo‘shishingiz mumkin. Nishonlar avtomatik ravishda o‘ng tomonga joylashadi:

  • 12 New
  • 5 Deleted
  • 3 Warnings

Nishon yaratish uchun ro‘yxat elementi ichida .badge klassiga ega <span> elementini yarating:

Misol

<ul class="list-group">   <li class="list-group-item">New <span class="badge">12</span></li>   <li class="list-group-item">Deleted <span class="badge">5</span></li>   <li class="list-group-item">Warnings <span class="badge">3</span></li> </ul>
O‘zingiz sinab ko‘ring »

Havolali elementlarga ega ro‘yxat guruhi

Ro‘yxat guruhidagi elementlar giperhavolalar ham bo‘lishi mumkin. Bunda sichqoncha ustiga olib borilganda (hover) kulrang fon rangi paydo bo‘ladi:

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:

Misol

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

Faol holat

First item Second item Third item

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

Misol

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

Nofaol element

Quyidagi ro‘yxat guruhida nofaol element bor:

First item Second item Third item

Elementni nofaol qilish uchun .disabled klassini qo‘shing:

Misol

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

Kontekstual klasslar

Ro‘yxat elementlariga rang berish uchun kontekstual klasslardan foydalanish mumkin:

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

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

Misol

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

Maxsus kontent

Ro‘yxat guruhi elementi ichiga deyarli istalgan HTML kodni qo‘shishingiz mumkin.

Bootstrap .list-group-item-heading va .list-group-item-text klasslarini taqdim etadi, ulardan quyidagicha foydalanish mumkin:

Misol

<div class="list-group">   <a href="#" class="list-group-item active">     <h4 class="list-group-item-heading">First List Group Item Heading</h4>     <p class="list-group-item-text">List Group Item Text</p>   </a>   <a href="#" class="list-group-item">     <h4 class="list-group-item-heading">Second List Group Item Heading</h4>     <p class="list-group-item-text">List Group Item Text</p>   </a>   <a href="#" class="list-group-item">     <h4 class="list-group-item-heading">Third List Group Item Heading</h4>     <p class="list-group-item-text">List Group Item Text</p>   </a> </div>
O‘zingiz sinab ko‘ring »

‹ OrqagaKeyingisi

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tishKirish