सूची समूह
सूची समूहहरू सामग्रीको श्रृंखला प्रदर्शन गर्न लचिलो र शक्तिशाली घटक हुन्। परिमार्जन गर्नुहोस् र तिनीहरूलाई भित्र कुनै पनि सामग्रीको बारेमा समर्थन गर्न विस्तार गर्नुहोस्।
आधारभूत उदाहरण
सबैभन्दा आधारभूत सूची समूह सूची वस्तुहरू र उचित वर्गहरूको साथ एक अक्रमित सूची हो। यसलाई पछ्याउने विकल्पहरू, वा आवश्यकता अनुसार तपाईंको आफ्नै 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
लागि a मा थप्नुहोस् । ध्यान दिनुहोस् कि केही तत्वहरूसँग तिनीहरूको क्लिक घटनाहरू (जस्तै, लिङ्कहरू) पूर्ण रूपमा असक्षम गर्न अनुकूलन JavaScript आवश्यक पर्दछ।.list-group-item
.disabled
- असक्षम वस्तु
- 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 वा s प्रयोग गर्नुहोस् । गैर-अन्तर्क्रियात्मक तत्वहरू (जस्तै s वा s) बाट बनेका सूची समूहहरूले क्लिक वा ट्याप गर्ने क्षमता प्रदान गर्दैनन् भन्ने कुरा सुनिश्चित गर्न हामी यी स्यूडो-वर्गहरूलाई अलग गर्छौं।<button>
.list-group-item-action
<li>
<div>
यहाँ मानक कक्षाहरू प्रयोग नगर्न.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 href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
</div>
s को साथ , तपाइँ क्लास को सट्टा विशेषता <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>
, र त्यसपछि स्टाइल गरिन्छ र with र ::before
मा छद्म-तत्वको साथ राखिन्छ ।<li>
counter-increment
content
- Cras justo odio
- Cras justo odio
- Cras justo odio
<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>
यी अनुकूलन सामग्रीको साथ राम्रो काम गर्दछ।
-
उपशीर्षकCras justo odio
-
उपशीर्षकCras justo odio
-
उपशीर्षकCras justo odio
<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>
Cras justo odio
</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>
Cras justo odio
</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>
Cras justo odio
</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
। हाल तेर्सो सूची समूहहरूलाई फ्लश सूची समूहहरूसँग जोड्न सकिँदैन।
प्रोटिप: तेर्सो हुँदा बराबर चौडाइ सूची समूह वस्तुहरू चाहनुहुन्छ? .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
कक्षासँग लुकेको अतिरिक्त पाठ।
ब्याज सहित
केही उपयोगिताहरूको मद्दतले नपढिएको गणना, गतिविधि र थप देखाउन कुनै पनि सूची समूह वस्तुमा ब्याजहरू थप्नुहोस् ।
- एक सूची वस्तु१४
- दोस्रो सूची वस्तु२
- तेस्रो सूची वस्तु१
<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 थप्नुहोस् ।
<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>
चेकबक्स र रेडियो
बुटस्ट्र्यापको चेकबक्सहरू र रेडियोहरू सूची समूह वस्तुहरू भित्र राख्नुहोस् र आवश्यकता अनुसार अनुकूलित गर्नुहोस्। तपाईंले तिनीहरूलाई s बिना प्रयोग गर्न सक्नुहुन्छ <label>
, तर कृपया 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>
रूपमा s चाहनुहुन्छ भने .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;
मिक्सन
s का लागि प्रासंगिक भिन्न वर्गहरू$theme-colors
उत्पन्न गर्न संयोजनमा प्रयोग गरियो ।.list-group-item
@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 व्यवहार
ट्याब 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>
डाटा विशेषताहरू प्रयोग गर्दै
तपाईले कुनै पनि जाभास्क्रिप्ट नलेखी मात्र निर्दिष्ट गरेर 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>
जाभास्क्रिप्ट मार्फत
जाभास्क्रिप्ट मार्फत ट्याबयोग्य सूची वस्तु सक्षम गर्नुहोस् (प्रत्येक सूची वस्तुलाई व्यक्तिगत रूपमा सक्रिय गर्न आवश्यक छ):
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
सूची वस्तु तत्व र सामग्री कन्टेनर सक्रिय गर्दछ। ट्याबमा या त एक 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>
show
दिइएको सूची वस्तु चयन गर्छ र यसको सम्बन्धित फलक देखाउँछ। पहिले चयन गरिएको कुनै पनि अन्य सूची वस्तु अचयनित हुन्छ र यसको सम्बन्धित फलक लुकेको हुन्छ। ट्याब फलक वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (उदाहरणका लागि, shown.bs.tab
घटना हुनु अघि)।
var someListItemEl = document.querySelector('#someListItem')
var tab = new bootstrap.Tab(someListItemEl)
tab.show()
dispose
तत्वको ट्याबलाई नष्ट गर्छ।
उदाहरण प्राप्त गर्नुहोस्
स्थिर विधि जसले तपाईंलाई 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
})
}