Bootstrap List Groups
กลุ่มรายการพื้นฐาน
กลุ่มรายการพื้นฐานที่สุดคือรายการแบบไม่เรียงลำดับพร้อมรายการ:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
ในการสร้างกลุ่มรายการพื้นฐาน ให้ใช้<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>
รายชื่อกลุ่มพร้อมป้าย
คุณยังสามารถเพิ่มป้ายชื่อในกลุ่มรายการ ป้ายจะถูกวางโดยอัตโนมัติทางด้านขวา:
- 12 ใหม่
- 5 ถูกลบ
- 3 คำเตือน
ในการสร้างตราสัญลักษณ์ ให้สร้าง<span>องค์ประกอบที่มีคลาส.badge
ภายในรายการ:
ตัวอย่าง
<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>
รายการกลุ่มที่มีรายการที่เชื่อมโยง
รายการในกลุ่มรายการสามารถเป็นไฮเปอร์ลิงก์ได้ สิ่งนี้จะเพิ่มสีพื้นหลังสีเทาเมื่อวางเมาส์เหนือ:
ในการสร้างกลุ่มรายการที่มีรายการที่เชื่อมโยง ให้ใช้<div>แทน<ul>
และ<a>แทน<li>:
ตัวอย่าง
<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>
สถานะใช้งาน
ใช้.activeชั้นเรียนเพื่อเน้นรายการปัจจุบัน:
ตัวอย่าง
<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>
รายการคนพิการ
กลุ่มรายการต่อไปนี้มีรายการที่ปิดใช้งาน:
หากต้องการปิดใช้งานรายการ ให้เพิ่ม.disabledคลาส:
ตัวอย่าง
<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>
ชั้นเรียนตามบริบท
คลาสตามบริบทสามารถใช้เพื่อระบายสีรายการ:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
- รายการที่สี่
คลาสสำหรับรายการระบายสีคือ:
.list-group-item-success, list-group-item-info,
list-group-item-warning, และ.list-group-item-danger:
ตัวอย่าง
<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>
เนื้อหาที่กำหนดเอง
คุณสามารถเพิ่ม HTML ได้เกือบทุกรายการในกลุ่มรายการ
Bootstrap มีคลาส.list-group-item-headingและ
.list-group-item-textใช้งานได้ดังนี้:
ตัวอย่าง
<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>