รายการกลุ่ม

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

ในหน้านี้

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

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

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

html

<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เพื่อระบุการเลือกที่ใช้งานอยู่ในปัจจุบัน

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

html

<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 ที่กำหนดเองเพื่อปิดใช้งานเหตุการณ์การคลิกโดยสมบูรณ์ (เช่น ลิงก์)

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

html

<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ที่ นี่

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

html

<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>ที่ไม่สนับสนุนแอตทริบิวต์ที่ถูกปิดใช้งาน

html

<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 button 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เพื่อลบเส้นขอบและมุมโค้งมนเพื่อแสดงรายการกลุ่มแบบขอบถึงขอบในคอนเทนเนอร์หลัก (เช่น การ์ด)

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

html

<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-numberedคลาสตัวแก้ไข (และเลือกใช้<ol>องค์ประกอบ) เพื่อเลือกรายการกลุ่มรายการที่มีหมายเลข ตัวเลขถูกสร้างขึ้นผ่าน CSS (ซึ่งต่างจาก<ol>สไตล์เบราว์เซอร์เริ่มต้น) เพื่อการจัดวางที่ดีขึ้นภายในรายการกลุ่มรายการและเพื่อให้สามารถกำหนดเองได้ดียิ่งขึ้น

ตัวเลขถูกสร้างขึ้นโดยcounter-resetบน<ol>จากนั้นจัดรูปแบบและวางด้วยองค์ประกอบ::beforeหลอกบน<li>with counter-incrementและcontent

รายการ
รายการ
รายการ

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
  <li class="list-group-item">A list item</li>
</ol>

สิ่งเหล่านี้ใช้งานได้ดีกับเนื้อหาที่กำหนดเองเช่นกัน

หัวข้อย่อย
เนื้อหาสำหรับรายการ
14
หัวข้อย่อย
เนื้อหาสำหรับรายการ
14
หัวข้อย่อย
เนื้อหาสำหรับรายการ
14

html

<ol class="list-group list-group-numbered">
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-start">
    <div class="ms-2 me-auto">
      <div class="fw-bold">Subheading</div>
      Content for list item
    </div>
    <span class="badge bg-primary rounded-pill">14</span>
  </li>
</ol>

แนวนอน

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

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

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

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

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

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

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

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

html

<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 list-group-horizontal-xxl">
  <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>

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

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

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

html

<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รัฐ ใช้เพื่อระบุการเลือกที่ใช้งานอยู่ในรายการกลุ่มตามบริบท

html

<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>

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

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

พร้อมป้าย

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

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

html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
    <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>

ช่องทำเครื่องหมายและวิทยุ

วางช่องทำเครื่องหมายและวิทยุของ Bootstrap ไว้ในรายการกลุ่มรายการและปรับแต่งตามต้องการ คุณสามารถใช้ได้โดยไม่ต้องใช้<label>s แต่อย่าลืมใส่aria-labelแอตทริบิวต์และค่าสำหรับการเข้าถึง

ช่องทำเครื่องหมายแรก
ช่องทำเครื่องหมายที่สอง
ช่องทำเครื่องหมายที่สาม

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckbox">
    <label class="form-check-label" for="firstCheckbox">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckbox">
    <label class="form-check-label" for="secondCheckbox">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckbox">
    <label class="form-check-label" for="thirdCheckbox">Third checkbox</label>
  </li>
</ul>

วิทยุเครื่องแรก
วิทยุที่สอง
วิทยุที่สาม

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="firstRadio" checked>
    <label class="form-check-label" for="firstRadio">First radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="secondRadio">
    <label class="form-check-label" for="secondRadio">Second radio</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="radio" name="listGroupRadio" value="" id="thirdRadio">
    <label class="form-check-label" for="thirdRadio">Third radio</label>
  </li>
</ul>

คุณสามารถใช้.stretched-linkon <label>เพื่อทำให้รายการกลุ่มรายการทั้งหมดสามารถคลิกได้

ช่องทำเครื่องหมายแรก
ช่องทำเครื่องหมายที่สอง
ช่องทำเครื่องหมายที่สาม

html

<ul class="list-group">
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="firstCheckboxStretched">
    <label class="form-check-label stretched-link" for="firstCheckboxStretched">First checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="secondCheckboxStretched">
    <label class="form-check-label stretched-link" for="secondCheckboxStretched">Second checkbox</label>
  </li>
  <li class="list-group-item">
    <input class="form-check-input me-1" type="checkbox" value="" id="thirdCheckboxStretched">
    <label class="form-check-label stretched-link" for="thirdCheckboxStretched">Third checkbox</label>
  </li>
</ul>

CSS

ตัวแปร

เพิ่มใน v5.2.0

ในฐานะที่เป็นส่วนหนึ่งของแนวทางการเปลี่ยนแปลง CSS ของ Bootstrap กลุ่มรายการใช้ตัวแปร CSS ใน.list-groupเครื่องเพื่อปรับแต่งตามเวลาจริงที่ได้รับการปรับปรุง ค่าสำหรับตัวแปร CSS ถูกกำหนดผ่าน Sass ดังนั้นยังคงรองรับการปรับแต่ง Sass ด้วยเช่นกัน

  --#{$prefix}list-group-color: #{$list-group-color};
  --#{$prefix}list-group-bg: #{$list-group-bg};
  --#{$prefix}list-group-border-color: #{$list-group-border-color};
  --#{$prefix}list-group-border-width: #{$list-group-border-width};
  --#{$prefix}list-group-border-radius: #{$list-group-border-radius};
  --#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
  --#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
  --#{$prefix}list-group-action-color: #{$list-group-action-color};
  --#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
  --#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
  --#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
  --#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
  --#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
  --#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
  --#{$prefix}list-group-active-color: #{$list-group-active-color};
  --#{$prefix}list-group-active-bg: #{$list-group-active-bg};
  --#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};

ตัวแปร Sass

$list-group-color:                  $gray-900;
$list-group-bg:                     $white;
$list-group-border-color:           rgba($black, .125);
$list-group-border-width:           $border-width;
$list-group-border-radius:          $border-radius;

$list-group-item-padding-y:         $spacer * .5;
$list-group-item-padding-x:         $spacer;
$list-group-item-bg-scale:          -80%;
$list-group-item-color-scale:       40%;

$list-group-hover-bg:               $gray-100;
$list-group-active-color:           $component-active-color;
$list-group-active-bg:              $component-active-bg;
$list-group-active-border-color:    $list-group-active-bg;

$list-group-disabled-color:         $gray-600;
$list-group-disabled-bg:            $list-group-bg;

$list-group-action-color:           $gray-700;
$list-group-action-hover-color:     $list-group-action-color;

$list-group-action-active-color:    $body-color;
$list-group-action-active-bg:       $gray-200;

มิกซ์อิน

ใช้ร่วมกับ$theme-colorsเพื่อสร้างคลาสตัวแปรตามบริบทสำหรับ.list-group-items

@mixin list-group-item-variant($state, $background, $color) {
  .list-group-item-#{$state} {
    color: $color;
    background-color: $background;

    &.list-group-item-action {
      &:hover,
      &:focus {
        color: $color;
        background-color: shade-color($background, 10%);
      }

      &.active {
        color: $white;
        background-color: $color;
        border-color: $color;
      }
    }
  }
}

ห่วง

ลูปที่สร้างคลาสโมดิฟายlist-group-item-variant()เออร์ด้วยมิกซ์อิน

// List group contextual variants
//
// Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states.

@each $state, $value in $theme-colors {
  $list-group-variant-bg: shift-color($value, $list-group-item-bg-scale);
  $list-group-variant-color: shift-color($value, $list-group-item-color-scale);
  @if (contrast-ratio($list-group-variant-bg, $list-group-variant-color) < $min-contrast-ratio) {
    $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
  }

  @include list-group-item-variant($state, $list-group-variant-bg, $list-group-variant-color);
}

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

ใช้แท็บ ปลั๊กอิน 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-bs-toggle="list" href="#list-home" role="tab" aria-controls="list-home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-bs-toggle="list" href="#list-profile" role="tab" aria-controls="list-profile">Profile</a>
      <a class="list-group-item list-group-item-action" id="list-messages-list" data-bs-toggle="list" href="#list-messages" role="tab" aria-controls="list-messages">Messages</a>
      <a class="list-group-item list-group-item-action" id="list-settings-list" data-bs-toggle="list" href="#list-settings" role="tab" aria-controls="list-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-bs-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-bs-toggle="list" href="#home" role="tab">Home</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#profile" role="tab">Profile</a>
    <a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#messages" role="tab">Messages</a>
    <a class="list-group-item list-group-item-action" data-bs-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 (ต้องเปิดใช้งานแต่ละรายการแยกกัน):

const triggerTabList = document.querySelectorAll('#myTab a')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

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

const triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name

const triggerFirstTabEl = document.querySelector('#myTab li:first-child a')
bootstrap.Tab.getInstance(triggerFirstTabEl).show() // Select first 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>

วิธีการ

วิธีการและการเปลี่ยนแบบอะซิงโครนัส

เมธอด API ทั้งหมดเป็นแบบอะซิงโครนัสและเริ่มต้นการเปลี่ยนแปลง พวกเขาจะกลับไปที่ผู้โทรทันทีที่เริ่มเปลี่ยน แต่ ก่อน ที่จะสิ้นสุด นอกจากนี้ การเรียกเมธอดบนคอมโพเนนต์การเปลี่ยนจะถูกละเว้น

ดูเอกสาร JavaScript ของเราสำหรับข้อมูลเพิ่มเติม

เปิดใช้งานเนื้อหาของคุณเป็นองค์ประกอบแท็บ

คุณสามารถสร้างอินสแตนซ์แท็บด้วยตัวสร้างได้ เช่น

const bsTab = new bootstrap.Tab('#myTab')

วิธี	คำอธิบาย
`dispose`	ทำลายแท็บขององค์ประกอบ
`getInstance`	วิธีการแบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แท็บที่เชื่อมโยงกับองค์ประกอบ DOM คุณสามารถใช้ได้ดังนี้`bootstrap.Tab.getInstance(element)`:
`getOrCreateInstance`	วิธีการแบบคงที่ซึ่งส่งคืนอินสแตนซ์แท็บที่เกี่ยวข้องกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น คุณสามารถใช้สิ่งนี้: `bootstrap.Tab.getOrCreateInstance(element)`.
`show`	เลือกแท็บที่กำหนดและแสดงบานหน้าต่างที่เกี่ยวข้อง แท็บอื่น ๆ ที่เลือกไว้ก่อนหน้านี้จะไม่ถูกเลือกและบานหน้าต่างที่เกี่ยวข้องจะถูกซ่อนไว้ กลับไปยังผู้โทรก่อนที่บานหน้าต่างแท็บจะแสดงขึ้นจริง (เช่น ก่อนที่`shown.bs.tab`เหตุการณ์จะเกิดขึ้น)

เหตุการณ์

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

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

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

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

const tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(tabElm => {
  tabElm.addEventListener('shown.bs.tab', event => {
    event.target // newly activated tab
    event.relatedTarget // previous active tab
  })
})