รายการกลุ่ม

กลุ่มรายการเป็นองค์ประกอบที่ยืดหยุ่นและมีประสิทธิภาพสำหรับการแสดงชุดเนื้อหา แก้ไขและขยายให้รองรับเนื้อหาใดก็ได้ภายใน

ตัวอย่างพื้นฐาน

กลุ่มรายการพื้นฐานที่สุดคือรายการแบบไม่เรียงลำดับที่มีรายการในรายการและคลาสที่เหมาะสม สร้างด้วยตัวเลือกที่ตามมา หรือด้วย CSS ของคุณเองตามต้องการ

รายการ
รายการที่สอง
รายการที่สาม
รายการที่สี่
และตัวที่ห้า

<ul class="list-group">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

รายการที่ใช้งานอยู่

เพิ่ม.activeไปยัง a .list-group-itemเพื่อระบุการเลือกที่ใช้งานอยู่ในปัจจุบัน

รายการที่ใช้งานอยู่
รายการที่สอง
รายการที่สาม
รายการที่สี่
และตัวที่ห้า

<ul class="list-group">
  <li class="list-group-item active" aria-current="true">An active item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

รายการคนพิการ

เพิ่ม.disabledเพื่อ.list-group-itemให้ดูเหมือนปิด การใช้งาน โปรดทราบว่าองค์ประกอบบางอย่างด้วย.disabledจะต้องใช้ JavaScript ที่กำหนดเองเพื่อปิดใช้งานเหตุการณ์การคลิกโดยสมบูรณ์ (เช่น ลิงก์)

รายการคนพิการ
รายการที่สอง
รายการที่สาม
รายการที่สี่
และตัวที่ห้า

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">A disabled item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

ลิงค์และปุ่ม

ใช้<a>s หรือ<button>s เพื่อสร้างรายการกลุ่มรายการที่ดำเนินการได้.list-group-item-action โดยมีสถานะโฮเวอร์ ปิดใช้งาน และใช้งานอยู่โดยการ เพิ่ม เราแยกคลาสหลอกเหล่านี้ออกเพื่อให้แน่ใจว่ากลุ่มรายการที่สร้างจากองค์ประกอบที่ไม่โต้ตอบ (เช่น<li>s หรือ<div>s) ไม่มีการคลิกหรือแตะ

อย่า ใช้ คลาสมาตรฐาน.btnที่ นี่

รายการลิงก์ปัจจุบัน รายการลิงก์ที่สอง รายการลิงก์ที่สาม รายการลิงก์ที่สี่ รายการลิงก์ที่ปิดใช้งาน

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    The current link item
  </a>
  <a href="#" class="list-group-item list-group-item-action">A second link item</a>
  <a href="#" class="list-group-item list-group-item-action">A third link item</a>
  <a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
  <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>

ด้วย<button>s คุณสามารถใช้disabledแอตทริบิวต์แทน.disabledคลาสได้ น่าเศร้า<a>ที่ไม่สนับสนุนแอตทริบิวต์ที่ถูกปิดใช้งาน

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active" aria-current="true">
    The current button
  </button>
  <button type="button" class="list-group-item list-group-item-action">A second item</button>
  <button type="button" class="list-group-item list-group-item-action">A third button item</button>
  <button type="button" class="list-group-item list-group-item-action">A fourth button item</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>A disabled button item</button>
</div>

ฟลัช

เพิ่ม.list-group-flushเพื่อลบเส้นขอบและมุมโค้งมนเพื่อแสดงรายการกลุ่มแบบขอบถึงขอบในคอนเทนเนอร์หลัก (เช่น การ์ด)

รายการ
รายการที่สอง
รายการที่สาม
รายการที่สี่
และตัวที่ห้า

<ul class="list-group list-group-flush">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
  <li class="list-group-item">A fourth item</li>
  <li class="list-group-item">And a fifth one</li>
</ul>

แนวนอน

เพิ่ม.list-group-horizontalเพื่อเปลี่ยนเค้าโครงของรายการกลุ่มรายการจากแนวตั้งเป็นแนวนอนทั่วเบรกพอยต์ทั้งหมด หรือเลือกตัวแปรที่ตอบสนอง.list-group-horizontal-{sm|md|lg|xl}เพื่อสร้างกลุ่มรายการตามแนวนอนโดยเริ่มต้นที่จุดพักmin-widthนั้น ขณะนี้ไม่สามารถรวมกลุ่มรายการแนวนอนกับกลุ่มรายการแบบล้างได้

ProTip:ต้องการรายการกลุ่มรายการที่มีความกว้างเท่ากันเมื่ออยู่ในแนวนอนหรือไม่ เพิ่ม.flex-fillไปยังแต่ละรายการในกลุ่มรายการ

รายการ
รายการที่สอง
รายการที่สาม

รายการ
รายการที่สอง
รายการที่สาม

รายการ
รายการที่สอง
รายการที่สาม

รายการ
รายการที่สอง
รายการที่สาม

รายการ
รายการที่สอง
รายการที่สาม

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>
<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">An item</li>
  <li class="list-group-item">A second item</li>
  <li class="list-group-item">A third item</li>
</ul>

ชั้นเรียนตามบริบท

ใช้คลาสตามบริบทเพื่อจัดรูปแบบรายการด้วยพื้นหลังและสีแบบเก็บสถานะ

รายการกลุ่มเริ่มต้นอย่างง่าย
รายการกลุ่มรายการหลักอย่างง่าย
รายการกลุ่มรายการรองอย่างง่าย
รายการกลุ่มความสำเร็จอย่างง่าย
รายการกลุ่มอันตรายอย่างง่าย
รายการกลุ่มคำเตือนอย่างง่าย
รายการกลุ่มรายการข้อมูลอย่างง่าย
รายการกลุ่มไลท์ลิสต์อย่างง่าย
รายการกลุ่มรายการมืดที่เรียบง่าย

<ul class="list-group">
  <li class="list-group-item">A simple default list group item</li>

  <li class="list-group-item list-group-item-primary">A simple primary list group item</li>
  <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
  <li class="list-group-item list-group-item-success">A simple success list group item</li>
  <li class="list-group-item list-group-item-danger">A simple danger list group item</li>
  <li class="list-group-item list-group-item-warning">A simple warning list group item</li>
  <li class="list-group-item list-group-item-info">A simple info list group item</li>
  <li class="list-group-item list-group-item-light">A simple light list group item</li>
  <li class="list-group-item list-group-item-dark">A simple dark list group item</li>
</ul>

คลาสตามบริบทยังใช้งานได้กับ.list-group-item-action. สังเกตว่าการเพิ่มสไตล์โฮเวอร์ที่นี่ไม่มีในตัวอย่างก่อนหน้านี้ ยังได้รับการสนับสนุนคือ.activeรัฐ ใช้เพื่อระบุการเลือกที่ใช้งานอยู่ในรายการกลุ่มตามบริบท

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">A simple default list group item</a>

  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">A simple primary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">A simple secondary list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">A simple success list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">A simple danger list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">A simple warning list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">A simple info list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">A simple light list group item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">A simple dark list group item</a>
</div>

ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก

การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.sr-onlyชั้นเรียน

พร้อมป้าย

เพิ่มตราให้กับรายการกลุ่มเพื่อแสดงจำนวนที่ยังไม่ได้อ่าน กิจกรรม และอื่นๆ ด้วยความช่วยเหลือของยูทิลิตี้ บาง อย่าง

รายการ14
รายการที่สอง2
รายการที่สาม1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A list item
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A second list item
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    A third list item
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

เนื้อหาที่กำหนดเอง

เพิ่ม HTML เกือบทั้งหมดภายใน แม้แต่สำหรับกลุ่มรายการที่เชื่อมโยง เช่น กลุ่มด้านล่าง ด้วยความช่วยเหลือของ ยูทิลิ ตี้flexbox

รายการส่วนหัวของรายการกลุ่ม

3 วันที่ผ่านมา

เนื้อหาตัวยึดตำแหน่งบางส่วนในย่อหน้า

และพิมพ์เล็ก

รายการส่วนหัวของรายการกลุ่ม

3 วันที่ผ่านมา

เนื้อหาตัวยึดตำแหน่งบางส่วนในย่อหน้า

และพิมพ์เล็กปิดเสียงบางส่วน

รายการส่วนหัวของรายการกลุ่ม

3 วันที่ผ่านมา

เนื้อหาตัวยึดตำแหน่งบางส่วนในย่อหน้า

และพิมพ์เล็กปิดเสียงบางส่วน

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small>And some small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
  <a href="#" class="list-group-item list-group-item-action">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>
    <p class="mb-1">Some placeholder content in a paragraph.</p>
    <small class="text-muted">And some muted small print.</small>
  </a>
</div>

พฤติกรรมจาวาสคริปต์

ใช้แท็บ ปลั๊กอิน JavaScript รวมทีละรายการหรือผ่านbootstrap.jsไฟล์ที่คอมไพล์แล้ว เพื่อขยายกลุ่มรายการของเราเพื่อสร้างบานหน้าต่างที่แท็บได้ของเนื้อหาในเครื่อง

บ้าน ประวัติโดยย่อ ข้อความ การตั้งค่า

เนื้อหาตัวยึดตำแหน่งบางส่วนในย่อหน้าที่เกี่ยวข้องกับ "หน้าแรก" และเนื้อหาเพิ่มเติมบางส่วน ใช้ที่นี่เพียงเพื่อเติมและเติมแผงแท็บนี้ ในการผลิต คุณจะมีเนื้อหาจริงมากขึ้นที่นี่ และไม่ใช่แค่ข้อความ จะเป็นอะไรก็ได้จริงๆ ข้อความ รูปภาพ แบบฟอร์ม

Some placeholder content in a paragraph relating to "Profile". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Messages". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

Some placeholder content in a paragraph relating to "Settings". And some more content, used here just to pad out and fill this tab panel. In production, you would obviously have more real content here. And not just text. It could be anything, really. Text, images, forms.

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">...</div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">...</div>
      <div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">...</div>
      <div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">...</div>
    </div>
  </div>
</div>

การใช้แอตทริบิวต์ข้อมูล

คุณสามารถเปิดใช้งานการนำทางกลุ่มรายการโดยไม่ต้องเขียน JavaScript ใดๆ เพียงแค่ระบุdata-toggle="list"หรือบนองค์ประกอบ ใช้แอตทริบิวต์ข้อมูลเหล่านี้.list-group-itemใน

<div role="tabpanel">
  <!-- List group -->
  <div class="list-group" id="myList" role="tablist">
    <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
  </div>

  <!-- Tab panes -->
  <div class="tab-content">
    <div class="tab-pane active" id="home" role="tabpanel">...</div>
    <div class="tab-pane" id="profile" role="tabpanel">...</div>
    <div class="tab-pane" id="messages" role="tabpanel">...</div>
    <div class="tab-pane" id="settings" role="tabpanel">...</div>
  </div>
</div>

ผ่านจาวาสคริปต์

เปิดใช้งานรายการแบบแท็บได้ผ่าน JavaScript (ต้องเปิดใช้งานแต่ละรายการแยกกัน):

$('#myList a').on('click', function (event) {
  event.preventDefault()
  $(this).tab('show')
})

คุณสามารถเปิดใช้งานแต่ละรายการได้หลายวิธี:

$('#myList a[href="#profile"]').tab('show') // Select tab by name
$('#myList a:first-child').tab('show') // Select first tab
$('#myList a:last-child').tab('show') // Select last tab
$('#myList a:nth-child(3)').tab('show') // Select third tab

เอฟเฟกต์จาง

หากต้องการให้แผงแท็บจางลง ให้เพิ่ม.fadeแต่ละ.tab-paneไฟล์ . บานหน้าต่างแท็บแรกยังต้อง.showทำให้เนื้อหาเริ่มต้นมองเห็นได้

<div class="tab-content">
  <div class="tab-pane fade show active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div>
  <div class="tab-pane fade" id="messages" role="tabpanel">...</div>
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

วิธีการ

$().tab

เปิดใช้งานอิลิเมนต์ไอเท็มในรายการและคอนเทนเนอร์เนื้อหา แท็บควรมี a data-targetหรือ การhrefกำหนดเป้าหมายโหนดคอนเทนเนอร์ใน DOM

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

<script>
  $(function () {
    $('#myList a:last-child').tab('show')
  })
</script>

.tab('แสดง')

เลือกรายการที่กำหนดและแสดงบานหน้าต่างที่เกี่ยวข้อง รายการอื่นๆ ที่เลือกไว้ก่อนหน้านี้จะไม่ถูกเลือกและบานหน้าต่างที่เกี่ยวข้องจะถูกซ่อนไว้ กลับไปยังผู้โทรก่อนที่จะมีการแสดงบานหน้าต่างแท็บจริง (เช่น ก่อนที่shown.bs.tabเหตุการณ์จะเกิดขึ้น)

$('#someListItem').tab('show')

เหตุการณ์

เมื่อแสดงแท็บใหม่ เหตุการณ์จะเริ่มขึ้นตามลำดับต่อไปนี้:

hide.bs.tab(บนแท็บที่ใช้งานอยู่ในปัจจุบัน)
show.bs.tab(บนแท็บที่จะแสดง)
hidden.bs.tab(ในแท็บที่ใช้งานก่อนหน้านี้ อันเดียวกับhide.bs.tabเหตุการณ์)
shown.bs.tab(บนแท็บเพิ่งแสดงที่เพิ่งเปิดใช้งาน อันเดียวกับshow.bs.tabเหตุการณ์)

หากไม่มีแท็บใดเปิดใช้งานอยู่ เหตุการณ์ hide.bs.tabและhidden.bs.tabจะไม่เริ่มทำงาน

ประเภทงาน	คำอธิบาย
show.bs.tab	เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บ แต่ก่อนที่จะมีการแสดงแท็บใหม่ ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ
แสดง.bs.tab	เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บหลังจากแสดงแท็บแล้ว ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ
hide.bs.tab	เหตุการณ์นี้เริ่มทำงานเมื่อมีการแสดงแท็บใหม่ (และทำให้แท็บที่ใช้งานอยู่ก่อนหน้านี้ถูกซ่อนไว้) ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่ในปัจจุบันและแท็บใหม่ที่จะใช้งานเร็วๆ นี้ ตามลำดับ
hidden.bs.tab	เหตุการณ์นี้เริ่มทำงานหลังจากแสดงแท็บใหม่ (และทำให้แท็บที่ใช้งานอยู่ก่อนหน้านี้ถูกซ่อนไว้) ใช้`event.target`และ`event.relatedTarget`เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่ก่อนหน้าและแท็บใหม่ที่ใช้งานอยู่ตามลำดับ

$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
  event.target // newly activated tab
  event.relatedTarget // previous active tab
})