
Bootstrap 5 การสร้าง List Groups
โดยปกติ การสร้าง List รายการทั่วไป เราจะใช้เอลิเมนต์ <ul>
ครอบเอลิเมนต์ <li>
ดังนี้
<ul> <li>รายการที่ 1</li> <li>รายการที่ 2</li> <li>รายการที่ 3</li> <li>รายการที่ 4</li> <li>รายการที่ 5</li> </ul>

เราสามารถใช้ Bootstrap 5 สร้างกลุ่มรายการ List Group สวย ๆ ได้ โดยการระบุคลาส .list-group
ในเอลิเมนต์ <ul>
และระบุคลาส .list-group-item
ในเอลิเมนต์ <li>
<ul class="list-group"> <li class="list-group-item">รายการที่ 1</li> <li class="list-group-item">รายการที่ 2</li> <li class="list-group-item">รายการที่ 3</li> <li class="list-group-item">รายการที่ 4</li> <li class="list-group-item">รายการที่ 5</li> </ul>

ถ้าต้องการแสดงสถานะ Active ให้ระบุคลาส .active
ในเอลิเมนต์ <li>
<ul class="list-group"> <li class="list-group-item">รายการที่ 1</li> <li class="list-group-item">รายการที่ 2</li> <li class="list-group-item active">รายการที่ 3</li> <li class="list-group-item">รายการที่ 4</li> <li class="list-group-item">รายการที่ 5</li> </ul>
List Group ที่เป็นลิงก์
ถ้าต้องการสร้าง List Group ที่เป็นลิงก์สำหรับคลิกได้ ให้ใช้เอลิเมนต์ <div>
แทน <ul>
และใช้เอลิเมนต์ <a>
แทน <li>
<div class="list-group"> <a href="#" class="list-group-item">รายการที่ 1</a> <a href="#" class="list-group-item">รายการที่ 2</a> <a href="#" class="list-group-item">รายการที่ 3</a> <a href="#" class="list-group-item">รายการที่ 4</a> <a href="#" class="list-group-item">รายการที่ 5</a> </div>

นอกจากนี้ ถ้าระบุคลาส .list-group-item-action ในเอลิเมนต์ <a> จะทำให้พื้นหลังของรายการเป็นสีเทาเมื่อนำเมาส์ไปชี้
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">รายการที่ 1</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 2</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 3</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 4</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 5</a> </div>

กำหนดสถานะ Disabled
ถ้าต้องการกำหนดสถานะ Disabled ให้รายการใด ให้ใช้คลาส .disabled
จะมีผลทำให้ตัวอักษรเป็นสีเทาจาง และถ้ารายการนั้นเป็นลิงก์ เอฟเฟ็กต์ hover จะถูกลบออก
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action disabled">รายการที่ 1</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 2</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 3</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 4</a> <a href="#" class="list-group-item list-group-item-action">รายการที่ 5</a> </div>

ลบเส้นขอบของกลุ่มรายการ
ถ้าต้องการลบเส้นขอบของกลุ่มรายการ ให้ระบุคลาส .list-group-flush
ในเอลิเมนต์ <ul>
เส้นขอบจะถูกลบออก
<ul class="list-group list-group-flush"> <li class="list-group-item">รายการที่ 1</li> <li class="list-group-item">รายการที่ 2</li> <li class="list-group-item">รายการที่ 3</li> <li class="list-group-item">รายการที่ 4</li> <li class="list-group-item">รายการที่ 5</li> </ul>

List Group แบบมีเลขลำดับ
ถ้าต้องการสร้างกลุ่มรายการ List Group แบบมีเลขลำดับ ให้เปลี่ยนจากเอลิเมนต์ <ul>
เป็น <ol>
พร้อมระบุคลาส .list-group-numbered
เพิ่มเติม
<ol class="list-group list-group-numbered"> <li class="list-group-item">รายการที่ 1</li> <li class="list-group-item">รายการที่ 2</li> <li class="list-group-item">รายการที่ 3</li> <li class="list-group-item">รายการที่ 4</li> <li class="list-group-item">รายการที่ 5</li> </ol>

List Group แนวนอน
ถ้าต้องการให้รายการแสดงแบบแนวนอน คือเรียงกันไปตามลำดับในแนวนอน ให้ใช้คลาส .list-group-horizontal
ร่วมกับคลาส .list-group
<ul class="list-group list-group-horizontal"> <li class="list-group-item">รายการที่ 1</li> <li class="list-group-item">รายการที่ 2</li> <li class="list-group-item">รายการที่ 3</li> <li class="list-group-item">รายการที่ 4</li> <li class="list-group-item">รายการที่ 5</li> </ul>

ใช้ Contextual Classes ร่วมกับ List Group
ถ้ากลุ่มรายการธรรมดา ๆ มันไม่มีสีสันเพียงพอ เราสามารถใช้งาน Contextual Classes เพื่อตกแต่งกลุ่มรายการให้สวยงามขึ้นได้ โดยคลาสที่สามารถใช้งานได้ประกอบด้วย .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">คลาส list-group-item-success</li> <li class="list-group-item list-group-item-secondary">คลาส list-group-item-secondary</li> <li class="list-group-item list-group-item-info">คลาส list-group-item-info</li> <li class="list-group-item list-group-item-warning">คลาส list-group-item-warning</li> <li class="list-group-item list-group-item-danger">คลาส list-group-item-danger</li> <li class="list-group-item list-group-item-primary">คลาส list-group-item-primary</li> <li class="list-group-item list-group-item-dark">คลาส list-group-item-dark</li> <li class="list-group-item list-group-item-light">คลาส list-group-item-light</li> </ul>

สำหรับ List Group ที่เป็นลิงก์ ก็สามารถใช้งาน Contextual Classes ได้เช่นเดียวกัน
<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>

ใช้งาน Badge ร่วมกับ List Group
ถ้าต้องการใช้งาน Badge ร่วมกับ List Group ก็สามารถทำได้เช่นเดียวกัน
<ul class="list-group"> <li class="list-group-item d-flex justify-content-between align-items-center"> แจ้งเตือน <span class="badge bg-success 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-warning rounded-pill">99</span> </li> </ul>

- Bootstrap 5 Get Started
- Bootstrap 5 Container
- Bootstrap 5 Grid Basic
- Bootstrap 5 Typography
- Bootstrap 5 Colors
- Bootstrap 5 Tables
- Bootstrap 5 Images
- Bootstrap 5 Jambotron
- Bootstrap 5 Alerts
- Bootstrap 5 สร้างปุ่มกดสวย ๆ
- Bootstrap 5 การจัดกลุ่มให้ปุ่มกด
- Bootstrap 5 การสร้าง Badge
- Bootstrap 5 การสร้าง Progress Bar
- Bootstrap 5 การสร้าง Spinner
- Bootstrap 5 กับการแบ่งหน้า
- Bootstrap 5 การสร้าง List Groups
- Bootstrap 5 การใช้งาน Card
- Bootstrap 5 การสร้าง Dropdown Menu
- Bootstrap 5 Collapse
- Bootstrap 5 Navs
- Bootstrap 5 Navbars
- Bootstrap 5 Carousel
- Bootstrap 5 Modal
- Bootstrap 5 Tooltip
- Bootstrap 5 Popover
- Bootstrap 5 Toasts
- Bootstrap 5 Scrollspy
- Bootstrap 5 Offcanvas
- Bootstrap 5 Utilities
- Bootstrap 5 Flex
- Bootstrap 5 Forms
- Bootstrap 5 Select
- Bootstrap 5 Checkboxes and Radio buttons
- Bootstrap 5 Range
- Bootstrap 5 Input Groups
- Bootstrap 5 Form Floating Labels
- Bootstrap 5 Form Validation
- Bootstrap 5 Grid System
- Bootstrap 5 Grid Stacked to horizontal
- Bootstrap 5 Grid Extra Small
- Bootstrap 5 Grid Small
- Bootstrap 5 Grid Medium
- Bootstrap 5 Grid Large
- Bootstrap 5 Grid Extra Large
- Bootstrap 5 Grid XXL
- Bootstrap 5 Grid Examples