กลุ่มรายการพื้นฐาน
กลุ่มรายการพื้นฐานที่สุดคือรายการเรียงลำดับกับรายการ:
- รายการแรก
- รายการที่สอง
- รายการที่สาม
เพื่อสร้างกลุ่มรายการพื้นฐานให้ใช้ <ul> องค์ประกอบที่มีระดับ .list-group และ <li> องค์ประกอบที่มีระดับ .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"><span class="badge">12</span> New</li>
<li
class="list-group-item"><span class="badge">5</span> Deleted</li>
<li class="list-group-item"><span class="badge">3</span> Warnings</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> ลองตัวเอง» ทดสอบด้วยตัวเองด้วยการออกกำลังกาย!
การใช้สิทธิ 1 » ออกกำลังกาย 2 » ออกกำลังกาย 3 » 4 การออกกำลังกาย» ออกกำลังกาย 5 »