सूची समूह
सूची समूह सामग्री कें एकटा श्रृंखला कें प्रदर्शित करय कें लेल एकटा लचीला आ शक्तिशाली घटक छै. भीतर के लगभग कोनो सामग्री के समर्थन करय लेल ओकरा संशोधित आ विस्तार करू.
मूल उदाहरण
सबसे बेसिक सूची समूह सूची आइटम आ उचित वर्गक कें साथ एकटा अक्रमित सूची छै. एकरा बाद जे विकल्प आबै छै ओकरो साथ निर्माण करू, या जरूरत के अनुसार अपन सीएसएस के साथ.
- एकटा आइटम
- एकटा दोसर आइटम
- एकटा तेसर वस्तु
- एकटा चारिम मद
- आ एकटा पाँचम
<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
- एकटा सक्रिय आइटम
- एकटा दोसर आइटम
- एकटा तेसर वस्तु
- एकटा चारिम मद
- आ एकटा पाँचम
<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
भी कस्टम जावास्क्रिप्ट केरऽ आवश्यकता होतै अपनऽ क्लिक घटना (जैना, लिंक) क॑ पूरा तरह स॑ अक्षम करै लेली ।
- एकटा अक्षम आइटम
- एकटा दोसर आइटम
- एकटा तेसर वस्तु
- एकटा चारिम मद
- आ एकटा पाँचम
<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 class="list-group-item list-group-item-action disabled">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-horizontal
सब ब्रेकपॉइंट भर मे सूची समूह आइटम कें लेआउट कें ऊर्ध्वाधर सं क्षैतिज मे बदलय कें लेल जोड़ू . वैकल्पिक रूप सँ, एकटा सूची समूह कें क्षैतिज बनावा कें लेल एकटा प्रतिक्रियाशील रूपांतर चुनू .list-group-horizontal-{sm|md|lg|xl}
जे ओय ब्रेकपॉइंट कें 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">
<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>
सहायक प्रौद्योगिकी के अर्थ संप्रेषित करब
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-only
वर्ग कें साथ छिपल अतिरिक्त पाठ.
बैज के साथ
किछ उपयोगिताक कें मदद सं अपठित गिनती, गतिविधि, आओर बेसि देखाबय कें लेल कोनों सूची समूह आइटम मे बैज जोड़ू .
- एकटा सूची आइटम14
- एकटा दोसर सूची आइटम२
- एकटा तेसर सूची आइटम१
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
A list item
<span class="badge badge-primary badge-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A second list item
<span class="badge badge-primary badge-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
A third list item
<span class="badge badge-primary badge-pill">1</span>
</li>
</ul>
कस्टम सामग्री
भीतर लगभग कोनो एचटीएमएल जोड़ू, एतय तक कि नीचा देल गेल तरहक लिंक कएल गेल सूची समूहक लेल, flexbox उपयोगिता क मदद स .
समूह आइटम शीर्षक सूचीबद्ध करू
३ दिन पहिनेएकटा पैराग्राफ मे किछु प्लेसहोल्डर सामग्री।
आ किछु छोट-छोट छाप।समूह आइटम शीर्षक सूचीबद्ध करू
३ दिन पहिनेएकटा पैराग्राफ मे किछु प्लेसहोल्डर सामग्री।
आ किछु म्यूट छोट-छोट प्रिंट।समूह आइटम शीर्षक सूचीबद्ध करू
३ दिन पहिनेएकटा पैराग्राफ मे किछु प्लेसहोल्डर सामग्री।
आ किछु म्यूट छोट-छोट प्रिंट।<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">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.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-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>
डेटा विशेषताओं का उपयोग करना
data-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-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>
</div>
जावास्क्रिप्ट के माध्यम से
जावास्क्रिप्ट कें माध्यम सं टैबेबल सूची आइटम कें सक्षम करूं (प्रत्येक सूची आइटम कें व्यक्तिगत रूप सं सक्रिय करय कें जरूरत छै):
$('#myList a').on('click', function (event) {
event.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>
विधियाँ
$ ().टैब
एकटा सूची आइटम तत्व आ सामग्री कंटेनर कें सक्रिय करयत छै. टैब मे या त एकटा data-target
या एकटा href
टारगेटिंग एकटा कंटेनर नोड कें डीओएम मे होबाक चाही.
<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
घटनाकेँ फायर नहि कएल जाएत.
घटना प्रकार | वर्णन |
---|---|
देखाउ.बीएस.टैब | ई घटना टैब शो पर फायर करैत अछि, मुदा नव टैब देखाबय सं पहिने. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.target आ कें उपयोग करूं .event.relatedTarget |
देखाओल गेल अछि.bs.tab | एकटा टैब देखाओल गेलाक बाद ई घटना टैब शो पर फायर करैत अछि. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.target आ कें उपयोग करूं .event.relatedTarget |
छिपाएँ.बीएस.टैब | ई घटना तखन फायर करैत अछि जखन कोनो नव टैब देखाओल जेबाक अछि (आ एहि तरहें पिछला सक्रिय टैब केँ नुकाएबाक अछि) । वर्तमान सक्रिय टैब आ नव जल्द सक्रिय होबय बला टैब कें लक्षित करय कें लेल क्रमशः event.target आ कें उपयोग करूं .event.relatedTarget |
छिपल.बीएस.टैब | ई घटना एकटा नव टैब देखाओल गेलाक बाद फायर करैत अछि (आ एहि तरहें पिछला सक्रिय टैब नुका जाइत अछि) । क्रमशः पिछला सक्रिय टैब आ नव सक्रिय टैब कें लक्षित करय कें लेल event.target आ कें उपयोग करूं .event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (event) {
event.target // newly activated tab
event.relatedTarget // previous active tab
})