सूची समूह
सूचीसमूहाः सामग्रीश्रृङ्खलां प्रदर्शयितुं लचीलः शक्तिशाली च घटकः अस्ति । अन्तः प्रायः कस्यापि सामग्रीयाः समर्थनार्थं तान् परिवर्तयन्तु विस्तारयन्तु च।
मूलभूत उदाहरणम्
अत्यन्तं मूलभूतः सूचीसमूहः सूचीवस्तूनाम्, समुचितवर्गाणां च सह अक्रमिता सूची अस्ति । तदनुवर्तमानैः विकल्पैः सह, अथवा आवश्यकतानुसारं स्वस्य 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 मध्ये योजयन्तु । ध्यानं कुर्वन्तु यत् केचन तत्त्वानि with इत्यनेन स्वस्य क्लिक् इवेण्ट् (उदा., लिङ्क्स्) पूर्णतया निष्क्रियं कर्तुं कस्टम् 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 इत्यस्य उपयोगं कृत्वा hover, disabled, active states इत्यनेन सह actionable<button>
list group items इत्यस्य निर्माणं कुर्वन्तु । वयं एतान् छद्मवर्गान् पृथक् कुर्मः यत् अ-अन्तर्क्रियाशील-तत्त्वैः ( s अथवा s इत्यादिभिः) निर्मिताः सूची-समूहाः क्लिक्-अथवा टैप्-क्षमतां न प्रदास्यन्ति इति सुनिश्चितं कुर्मः ।.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 class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
s इत्यनेन सह <button>
, भवान् वर्गस्य disabled
स्थाने विशेषतायाः अपि उपयोगं कर्तुं शक्नोति । .disabled
दुःखदं यत् <a>
s अक्षमविशेषणं न समर्थयन्ति ।
<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 मार्गेण सङ्ख्याः उत्पद्यन्ते (s पूर्वनिर्धारितब्राउजस्टाइलिंग् इत्यस्य विरुद्धम् )<ol>
संख्याः द्वारा उत्पद्यन्ते , ततः शैलीकृत्य with and counter-reset
इत्यत्र छद्म-तत्त्वेन सह स्थापिताः भवन्ति ।<ol>
::before
<li>
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}
वैकल्पिकरूपेण, तस्मिन् breakpoint इत्यस्य आरभ्य सूचीसमूहं क्षैतिजं कर्तुं प्रतिक्रियाशीलं रूपान्तरं चिनोतु 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>
सन्दर्भवर्गाः
अवस्थायुक्तपृष्ठभूमियुक्तानि वर्णयुक्तानि वस्तूनि सूचीतुं शैलीं कर्तुं सन्दर्भवर्गाणां उपयोगं कुर्वन्तु ।
- एकं सरलं पूर्वनिर्धारितं सूचीसमूहद्रव्यम्
- एकं सरलं प्राथमिकसूचीसमूहद्रव्यम्
- एकं सरलं गौणसूचीसमूहद्रव्यम्
- एक सरल सफलता सूची समूह आइटम
- एकः सरलः खतरासूचीसमूहस्य द्रव्यम्
- एकं सरलं चेतावनीसूचीसमूहद्रव्यम्
- एकः सरलः info list group item
- एक सरल प्रकाश सूची समूह आइटम
- एकः सरलः अन्धकारसूचीसमूहस्य द्रव्यम्
<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 योजयन्तु, अधः इव लिङ्क् कृतसूचीसमूहानां कृते अपि, flexbox utilities इत्यस्य साहाय्येन ।
समूह मद शीर्षक सूचीबद्ध करें
३ दिन पूर्वएकस्मिन् अनुच्छेदे काचित् स्थानधारकसामग्री।
तथा कुछ लघु मुद्रण।समूह मद शीर्षक सूचीबद्ध करें
३ दिन पूर्वएकस्मिन् अनुच्छेदे काचित् स्थानधारकसामग्री।
तथा केचन म्यूट् लघु मुद्रणम्।समूह मद शीर्षक सूचीबद्ध करें
३ दिन पूर्वएकस्मिन् अनुच्छेदे काचित् स्थानधारकसामग्री।
तथा केचन म्यूट् लघु मुद्रणम्।<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 इत्यस्य चेकबॉक्स् रेडियो च सूचीसमूहवस्तूनाम् अन्तः स्थापयित्वा आवश्यकतानुसारं अनुकूलितं कुर्वन्तु । भवान् तान् 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()
mixin इत्यनेन सह modifier classes जनयति ।
// 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);
}
जावास्क्रिप्ट व्यवहार
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"
केवलं निर्दिश्य वा तत्त्वे वा किमपि जावास्क्रिप्ट् लिखित्वा विना सूचीसमूहस्य नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति । एतानि data विशेषतानि उपयुज्यताम् .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
tabs panel fade in कर्तुं, प्रत्येकं योजयन्तु .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
एकं सूचीवस्तुतत्त्वं सामग्रीपात्रं च सक्रिययति । ट्याब् मध्ये DOM मध्ये एकं पात्रं नोड् लक्ष्यं कृत्वा एकं data-bs-target
वा एकं वा भवितव्यम् ।href
<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
कस्यचित् तत्वस्य ट्याब् नष्टं करोति ।
getInstance
स्थिरविधिः या भवन्तं 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
and hidden.bs.tab
इवेण्ट्स् न प्रज्वलिताः भविष्यन्ति ।
घटना प्रकार | वर्णनम् |
---|---|
show.bs.tab |
इदं इवेण्ट् ट्याब् शो इत्यत्र अग्निम् अङ्गीकुर्वति, परन्तु नूतनं ट्याब् दर्शितस्य पूर्वं । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए event.target और का प्रयोग करें ।event.relatedTarget |
shown.bs.tab |
एतत् इवेण्ट् ट्याब् दर्शितस्य अनन्तरं tab show इत्यत्र प्रज्वलितं भवति । सक्रिय ट्याब् तथा पूर्व सक्रिय ट्याब् (यदि उपलब्ध है) को क्रमशः लक्षित करने के लिए 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
})
}