Bootstrap 5 กลุ่มรายการ

รายการรายชื่อพื้นฐาน

รายการรายชื่อพื้นฐานเป็นรายการรายชื่อที่ไม่มีลำดับที่มีรายการรายชื่อ

เพื่อสร้างรายการรายชื่อพื้นฐาน ใช้คลาส .list-group ของ <ul> องค์ประกอบและคลาสเป็น .list-group-item ของ <li> องค์ประกอบ：

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item">รายการที่หนึ่ง</li>
  <li class="list-group-item">รายการที่สอง</li>
  <li class="list-group-item">รายการที่สาม</li>
</ul>

ทดสอบเองเลย

สถานะที่กำลังใช้งาน

ใช้ .active เพื่อขนานนานรายการที่กำลังใช้งาน

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item active">รายการที่กำลังใช้งาน</li>
  <li class="list-group-item">รายการที่สอง</li>
  <li class="list-group-item">รายการที่สาม</li>
</ul>

ทดสอบเองเลย

รายการรายชื่อที่มีลิงก์

เพื่อสร้างรายการรายชื่อที่มีลิงก์ ใช้ <div> แทน <ul>ด้วย <a> แทน <li>โดยเลือกตัวเลือก หากคุณต้องการสีหลังเงาเมื่อเลื่อนหมุน .list-group-item-action ประเภท：

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">เมนูที่หนึ่ง</a>
  <a href="#" class="list-group-item list-group-item-action">เมนูที่สอง</a>
  <a href="#" class="list-group-item list-group-item-action">รายการที่สาม</a>
</div>

ทดสอบเองเลย

รายการที่ถูกปิดการใช้งาน

.disabled คลาสที่เพิ่มสีของข้อความที่เบาของรายการที่ถูกปิดการใช้งาน. เมื่อใช้ในลิงก์ จะลบปรากฏการณ์เมื่อเคลื่อนที่มือเหนือลิงก์:

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item disabled">รายการที่ถูกปิดการใช้งาน</a>
  <a href="#" class="list-group-item disabled">รายการที่ถูกปิดการใช้งาน</a>
  <a href="#" class="list-group-item">รายการที่สาม</a>
</div>

ทดสอบเองเลย

ลบเขตเส้นขอบ

ใช้ .list-group-flush คลาสที่ลบเขตเส้นขอบและรอบเขต

ตัวอย่าง

<ul class="list-group list-group-flush">
  <li class="list-group-item">รายการที่หนึ่ง</li>
  <li class="list-group-item">รายการที่สอง</li>
  <li class="list-group-item">รายการที่สาม</li>
  <li class="list-group-item">รายการที่สี่</li>
</ul>

ทดสอบเองเลย

รายการลิสต์ที่มีตัวเลข

ใช้ .list-group-numbered คลาสที่สร้างรายการลิสต์ที่มีตัวเลขหน้า

ตัวอย่าง

<ol class="list-group list-group-numbered">
  <li class="list-group-item">รายการที่หนึ่ง</li>
  <li class="list-group-item">รายการที่สอง</li>
  <li class="list-group-item">รายการที่สาม</li>
</ol>

ทดสอบเองเลย

รายการลิสต์ระดับนอก

หากคุณต้องการให้รายการลิสต์แสดงระดับนอกเช่นเดียวกับแสดงตั้งแนวตรง (แสดงความร่วมกันแทนการเรียงขึ้นกัน) โปรดเพิ่ม .list-group-horizontal คลาสเพิ่มเข้าไปใน .list-group：

ตัวอย่าง

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">รายการที่หนึ่ง</li>
  <li class="list-group-item">รายการที่สอง</li>
  <li class="list-group-item">รายการที่สาม</li>
  <li class="list-group-item">รายการที่สี่</li>
</ul>

ทดสอบเองเลย

คลาสที่ใช้เพื่อเพิ่มสี

คลาสที่สามารถใช้เพื่อเพิ่มสีให้กับรายการลิสต์ได้:

คลาสที่ใช้เพื่อเพิ่มสีให้กับรายการลิสต์คือ：

  • .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
  • .list-group-item-light

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item list-group-item-success">สำเร็จ</li>
  <li class="list-group-item list-group-item-secondary">รอง</li>
  <li class="list-group-item list-group-item-info">ข้อมูล</li>
  <li class="list-group-item list-group-item-warning">คำเตือน</li>
  <li class="list-group-item list-group-item-danger">อันตราย</li>
  <li class="list-group-item list-group-item-primary">สีหลัก</li>
  <li class="list-group-item list-group-item-dark">สีมืด</li>
  <li class="list-group-item list-group-item-light">สีแสดง</li>
</ul>

ทดสอบเองเลย

ลิงก์สินค้าที่มีคลาสความหมาย

ตัวอย่าง

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">การกระทำ</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">สำเร็จ</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">รอง</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">ข้อมูล</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">คำเตือน</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">ของอันตราย</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">ของหลัก</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">ของมืด</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">ของแดงแจ้ง</a>
</div>

ทดสอบเองเลย

ลิสต์กรุ๊ปที่มีเม็ด

นำ .badge รวมกับรูปแบบ class และ utility/helper ซึ่งสามารถเพิ่มเม็ดที่ลิสต์กรุ๊ปได้

ตัวอย่าง

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ตู้รับ
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    อีเมลโฆษณา
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ถังขยะ
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

ทดสอบเองเลย