รายการกลุ่ม

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

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

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

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส
Porta ac consectetur ac
ขนถ่ายที่ eros

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส
Porta ac consectetur ac
ขนถ่ายที่ eros

<ul class="list-group">
  <li class="list-group-item active">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส
Porta ac consectetur ac
ขนถ่ายที่ eros

<ul class="list-group">
  <li class="list-group-item disabled" aria-disabled="true">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

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

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

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

Cras justo odio Dapibus ac สิ่งอำนวยความสะดวกใน มอร์บี ลีโอ ริซัส Porta ac consectetur ac ขนถ่ายที่ eros

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
  <a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
</div>

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

<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action active">
    Cras justo odio
  </button>
  <button type="button" class="list-group-item list-group-item-action">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item list-group-item-action">Morbi leo risus</button>
  <button type="button" class="list-group-item list-group-item-action">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item list-group-item-action" disabled>Vestibulum at eros</button>
</div>

ฟลัช

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

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส
Porta ac consectetur ac
ขนถ่ายที่ eros

<ul class="list-group list-group-flush">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

แนวนอน

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

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

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส

<ul class="list-group list-group-horizontal-sm">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส

<ul class="list-group list-group-horizontal-md">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส

<ul class="list-group list-group-horizontal-lg">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

Cras justo odio
Dapibus ac สิ่งอำนวยความสะดวกใน
มอร์บี ลีโอ ริซัส

<ul class="list-group list-group-horizontal-xl">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
</ul>

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

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

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

<ul class="list-group">
  <li class="list-group-item">Dapibus ac facilisis in</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">Dapibus ac facilisis in</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ชั้นเรียน

พร้อมป้าย

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

Cras justo odio14
Dapibus ac สิ่งอำนวยความสะดวกใน2
มอร์บี ลีโอ ริซัส1

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Cras justo odio
    <span class="badge badge-primary badge-pill">14</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <span class="badge badge-primary badge-pill">2</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    Morbi leo risus
    <span class="badge badge-primary badge-pill">1</span>
  </li>
</ul>

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

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

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

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

Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.

Donec id elit ไม่ใช่ mi porta

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

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

Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.

Donec id elit ไม่ใช่ mi porta

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

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

Donec id elit non mi porta gravida ที่ eget metus Maecenas sed diam eget risus varius blandit.

Donec id elit ไม่ใช่ mi porta

<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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small>Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</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">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
    <small class="text-muted">Donec id elit non mi porta.</small>
  </a>
</div>

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

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

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

Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adpisicing การออกกำลังกาย fugiat tempor Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. อาสาสมัคร Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur id การออกกำลังกายเป็นโมฆะ Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. เหตุการณ์ที่เกิดขึ้น Anim ad Lorem aliqua ในกามเทพ nisi enim eu nostrud do aliquip veniam minim.

Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.

Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.

Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.

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

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

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

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

$('#myList a').on('click', function (e) {
  e.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	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown.bs.tab	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
hide.bs.tab	This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use `event.target` and `event.relatedTarget` to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab	This event fires after a new tab is shown (and thus the previous active tab is hidden). Use `event.target` and `event.relatedTarget` to target the previous active tab and the new active tab, respectively.

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