รายการกลุ่ม
กลุ่มรายการเป็นองค์ประกอบที่ยืดหยุ่นและมีประสิทธิภาพสำหรับการแสดงชุดเนื้อหา แก้ไขและขยายให้รองรับเนื้อหาใดก็ได้ภายใน
ตัวอย่างพื้นฐาน
กลุ่มรายการพื้นฐานที่สุดคือรายการแบบไม่เรียงลำดับที่มีรายการในรายการและคลาสที่เหมาะสม สร้างด้วยตัวเลือกที่ตามมา หรือด้วย 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
เพื่อระบุการเลือกที่ใช้งานอยู่ในปัจจุบัน
- รายการที่ใช้งานอยู่
- A second item
- A third item
- A fourth item
- And a fifth one
<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 ที่กำหนดเองเพื่อปิดใช้งานเหตุการณ์การคลิกโดยสมบูรณ์ (เช่น ลิงก์)
- รายการคนพิการ
- A second item
- A third item
- A fourth item
- And a fifth one
<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-numbered
คลาสตัวแก้ไข (และเลือกใช้<ol>
องค์ประกอบ) เพื่อเลือกรายการกลุ่มรายการที่มีหมายเลข ตัวเลขถูกสร้างขึ้นผ่าน CSS (ซึ่งต่างจาก<ol>
สไตล์เบราว์เซอร์เริ่มต้น) เพื่อการจัดวางที่ดีขึ้นภายในรายการกลุ่มรายการและเพื่อให้สามารถกำหนดเองได้ดียิ่งขึ้น
ตัวเลขถูกสร้างขึ้นโดยcounter-reset
บน<ol>
จากนั้นจัดรูปแบบและวางด้วยองค์ประกอบ::before
หลอกบน<li>
with counter-increment
และcontent
- รายการ
- รายการ
- รายการ
<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>
สิ่งเหล่านี้ใช้งานได้ดีกับเนื้อหาที่กำหนดเองเช่นกัน
-
หัวข้อย่อยเนื้อหาสำหรับรายการ
-
หัวข้อย่อยเนื้อหาสำหรับรายการ
-
หัวข้อย่อยเนื้อหาสำหรับรายการ
<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
ไปยังแต่ละรายการในกลุ่มรายการ
- รายการ
- รายการที่สอง
- รายการที่สาม
- รายการ
- รายการที่สอง
- รายการที่สาม
- รายการ
- รายการที่สอง
- รายการที่สาม
- รายการ
- รายการที่สอง
- รายการที่สาม
- รายการ
- รายการที่สอง
- รายการที่สาม
- รายการ
- รายการที่สอง
- รายการที่สาม
<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>
ชั้นเรียนตามบริบท
ใช้คลาสตามบริบทเพื่อจัดรูปแบบรายการด้วยพื้นหลังและสีแบบเก็บสถานะ
- รายการกลุ่มเริ่มต้นอย่างง่าย
- รายการกลุ่มรายการหลักอย่างง่าย
- รายการกลุ่มรายการรองอย่างง่าย
- รายการกลุ่มความสำเร็จอย่างง่าย
- รายการกลุ่มอันตรายอย่างง่าย
- รายการกลุ่มคำเตือนอย่างง่าย
- รายการกลุ่มรายการข้อมูลอย่างง่าย
- รายการกลุ่มไลท์ลิสต์อย่างง่าย
- รายการกลุ่มรายการมืดที่เรียบง่าย
<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>
ถ่ายทอดความหมายสู่เทคโนโลยีอำนวยความสะดวก
การใช้สีเพื่อเพิ่มความหมายเป็นเพียงการแสดงภาพเท่านั้น ซึ่งจะไม่ถูกถ่ายทอดไปยังผู้ใช้เทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ ตรวจสอบให้แน่ใจว่าข้อมูลที่แสดงด้วยสีนั้นชัดเจนจากเนื้อหา (เช่น ข้อความที่มองเห็นได้) หรือรวมไว้ด้วยวิธีการอื่น เช่น ข้อความเพิ่มเติมที่ซ่อนอยู่ใน.visually-hidden
ชั้นเรียน
พร้อมป้าย
เพิ่มตราให้กับรายการกลุ่มเพื่อแสดงจำนวนที่ยังไม่ได้อ่าน กิจกรรม และอื่นๆ ด้วยความช่วยเหลือของยูทิลิตี้ บาง อย่าง
- รายการ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 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 วันที่ผ่านมาเนื้อหาตัวยึดตำแหน่งบางส่วนในย่อหน้า
และพิมพ์เล็กปิดเสียงบางส่วน<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
แอตทริบิวต์และค่าสำหรับการเข้าถึง
- ช่องทำเครื่องหมายแรก
- ช่องทำเครื่องหมายที่สอง
- ช่องทำเครื่องหมายที่สาม
- ช่องทำเครื่องหมายที่สี่
- ช่องทำเครื่องหมายที่ห้า
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
First checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Second checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Third checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fourth checkbox
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
Fifth checkbox
</li>
</ul>
และถ้าคุณต้องการ<label>
เป็นพื้นที่.list-group-item
สำหรับโจมตีขนาดใหญ่ คุณก็สามารถทำได้เช่นกัน
<div class="list-group">
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
First checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Second checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Third checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fourth checkbox
</label>
<label class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="">
Fifth checkbox
</label>
</div>
ซาส
ตัวแปร
$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-item
s
@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
ไฟล์ที่คอมไพล์แล้ว เพื่อขยายกลุ่มรายการของเราเพื่อสร้างบานหน้าต่างที่แท็บได้ของเนื้อหาในเครื่อง
<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 (ต้องเปิดใช้งานแต่ละรายการแยกกัน):
var triggerTabList = [].slice.call(document.querySelectorAll('#myTab a'))
triggerTabList.forEach(function (triggerEl) {
var tabTrigger = new bootstrap.Tab(triggerEl)
triggerEl.addEventListener('click', function (event) {
event.preventDefault()
tabTrigger.show()
})
})
คุณสามารถเปิดใช้งานแต่ละรายการได้หลายวิธี:
var triggerEl = document.querySelector('#myTab a[href="#profile"]')
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
var 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>
วิธีการ
constructor
เปิดใช้งานอิลิเมนต์ไอเท็มในรายการและคอนเทนเนอร์เนื้อหา แท็บควรมี a data-bs-target
หรือ การhref
กำหนดเป้าหมายโหนดคอนเทนเนอร์ใน DOM
<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>
<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>
var firstTabEl = document.querySelector('#myTab a:last-child')
var firstTab = new bootstrap.Tab(firstTabEl)
firstTab.show()
</script>
แสดง
เลือกรายการที่กำหนดและแสดงบานหน้าต่างที่เกี่ยวข้อง รายการอื่นๆ ที่เลือกไว้ก่อนหน้านี้จะไม่ถูกเลือกและบานหน้าต่างที่เกี่ยวข้องจะถูกซ่อนไว้ กลับไปยังผู้โทรก่อนที่จะมีการแสดงบานหน้าต่างแท็บจริง (เช่น ก่อนที่shown.bs.tab
เหตุการณ์จะเกิดขึ้น)
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
ทิ้ง
ทำลายแท็บขององค์ประกอบ
รับอินสแตนซ์
วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แท็บที่เกี่ยวข้องกับองค์ประกอบ DOM
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
วิธีการ แบบคงที่ซึ่งช่วยให้คุณได้รับอินสแตนซ์แท็บที่เชื่อมโยงกับองค์ประกอบ DOM หรือสร้างใหม่ในกรณีที่ไม่ได้เริ่มต้น
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
เหตุการณ์
เมื่อแสดงแท็บใหม่ เหตุการณ์จะเริ่มขึ้นตามลำดับต่อไปนี้:
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 เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ |
shown.bs.tab |
เหตุการณ์นี้เริ่มทำงานในการแสดงแท็บหลังจากแสดงแท็บแล้ว ใช้event.target และevent.relatedTarget เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่และแท็บที่ใช้งานอยู่ก่อนหน้า (ถ้ามี) ตามลำดับ |
hide.bs.tab |
เหตุการณ์นี้เริ่มทำงานเมื่อมีการแสดงแท็บใหม่ (และทำให้แท็บที่ใช้งานอยู่ก่อนหน้านี้ถูกซ่อนไว้) ใช้event.target และevent.relatedTarget เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่ในปัจจุบันและแท็บใหม่ที่จะใช้งานเร็วๆ นี้ ตามลำดับ |
hidden.bs.tab |
เหตุการณ์นี้เริ่มทำงานหลังจากแสดงแท็บใหม่ (และทำให้แท็บที่ใช้งานอยู่ก่อนหน้านี้ถูกซ่อนไว้) ใช้event.target และevent.relatedTarget เพื่อกำหนดเป้าหมายแท็บที่ใช้งานอยู่ก่อนหน้าและแท็บใหม่ที่ใช้งานอยู่ตามลำดับ |
var tabElms = document.querySelectorAll('a[data-bs-toggle="list"]')
tabElms.forEach(function(tabElm) {
tabElm.addEventListener('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})
}