Bootstrap 4 รายการกลุ่ม
กลุ่มรายการพื้นฐาน
กลุ่มรายการพื้นฐานที่สุดคือรายการแบบไม่เรียงลำดับพร้อมรายการ:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
ในการสร้างกลุ่มรายการพื้นฐาน ให้ใช้<ul>องค์ประกอบที่มี class .list-groupและ
<li>องค์ประกอบที่มี class .list-group-item:
ตัวอย่าง
<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>
สถานะใช้งาน
- รายการที่ใช้งานอยู่
- รายการที่สอง
- รายการที่สาม
ใช้.activeชั้นเรียนเพื่อเน้นรายการปัจจุบัน:
ตัวอย่าง
<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>
รายการกลุ่มที่มีรายการที่เชื่อมโยง
หากต้องการสร้างกลุ่มรายการที่มีรายการที่เชื่อมโยง ให้ใช้<div>แทน<ul>
และ<a>แทน<li>. เพิ่ม.list-group-item-actionคลาสถ้าคุณต้องการสีพื้นหลังสีเทาเมื่อวางเมาส์เหนือ:
ตัวอย่าง
<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>
รายการคนพิการ
ชั้น.disabledเรียนเพิ่มสีข้อความที่สว่างกว่าให้กับรายการที่ถูกปิดใช้งาน และเมื่อใช้กับลิงค์ มันจะลบเอฟเฟกต์โฮเวอร์:
ตัวอย่าง
<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>
ล้าง / ลบเส้นขอบ
ใช้.list-group-flushคลาสเพื่อลบขอบและมุมโค้งมนบางส่วน:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
- รายการที่สี่
ตัวอย่าง
<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>
กลุ่มรายการแนวนอน
หากคุณต้องการให้รายการแสดงในแนวนอนแทนที่จะเป็นแนวตั้ง (เคียงข้างกันแทนที่จะวางทับกัน) ให้เพิ่ม.list-group-horizontalคลาสไปที่.list-group:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
- รายการที่สี่
ตัวอย่าง
<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>
ชั้นเรียนตามบริบท
คลาสตามบริบทสามารถใช้เพื่อระบายสีรายการ:
- ไอเทมความสำเร็จ
- รายการรอง
- รายการข้อมูล
- รายการเตือน
- รายการอันตราย
- รายการหลัก
- ไอเทมมืด
- ไอเทมไลท์
คลาสสำหรับรายการระบายสีคือ:
.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">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>
เชื่อมโยงรายการกับชั้นเรียนตามบริบท
ตัวอย่าง
<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คลาสกับคลาสยูทิลิตี้/ตัวช่วยเพื่อเพิ่มตราภายในกลุ่มรายการ:
- กล่องจดหมาย 12
- โฆษณา 50
- ขยะ 99
ตัวอย่าง
<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>
เคล็ดลับ:อ่านเพิ่มเติมเกี่ยวกับคลาส Bootstrap 4 Utility/Helper ในบทยูทิลิตี้ BS4ของ เรา