सूची समूह
सूची समूह सामग्री की एक श्रृंखला प्रदर्शित करने के लिए एक लचीला और शक्तिशाली घटक हैं। लगभग किसी भी सामग्री का समर्थन करने के लिए उन्हें संशोधित और विस्तारित करें।
मूल उदाहरण
सबसे बुनियादी सूची समूह सूची वस्तुओं और उचित वर्गों के साथ एक अनियंत्रित सूची है। इसके बाद आने वाले विकल्पों के साथ या आवश्यकतानुसार अपने स्वयं के सीएसएस के साथ इसका निर्माण करें।
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
- पोर्टा एसी कॉन्सेक्टेटूर एसी
- वेस्टिबुलम और एरोसी
<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
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
- पोर्टा एसी कॉन्सेक्टेटूर एसी
- वेस्टिबुलम और एरोसी
<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
के लिए a में जोड़ें । ध्यान दें कि कुछ तत्वों को अपने क्लिक इवेंट (जैसे, लिंक) को पूरी तरह से अक्षम करने के लिए कस्टम जावास्क्रिप्ट की भी आवश्यकता होगी।.list-group-item
.disabled
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
- पोर्टा एसी कॉन्सेक्टेटूर एसी
- वेस्टिबुलम और एरोसी
<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 या 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">
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
पैरेंट कंटेनर (जैसे, कार्ड) में किनारे-से-किनारे सूची समूह आइटम रेंडर करने के लिए कुछ बॉर्डर और गोल कोनों को निकालने के लिए जोड़ें ।
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
- पोर्टा एसी कॉन्सेक्टेटूर एसी
- वेस्टिबुलम और एरोसी
<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
प्रत्येक सूची समूह आइटम में जोड़ें ।
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
<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>
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
<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>
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
<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>
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
<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>
- क्रैस जस्टो ओडियो
- दापीबस एसी सुविधा
- मोरबी लियो रिसुस
<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>
प्रासंगिक कक्षाएं
स्टेटफुल बैकग्राउंड और रंग के साथ सूची आइटम को स्टाइल करने के लिए प्रासंगिक कक्षाओं का उपयोग करें।
- दापीबस एसी सुविधा
- एक साधारण प्राथमिक सूची समूह आइटम
- एक साधारण माध्यमिक सूची समूह आइटम
- एक साधारण सफलता सूची समूह आइटम
- एक साधारण खतरे की सूची समूह आइटम
- एक साधारण चेतावनी सूची समूह आइटम
- एक साधारण जानकारी सूची समूह आइटम
- एक साधारण प्रकाश सूची समूह आइटम
- एक साधारण डार्क लिस्ट ग्रुप आइटम
<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
कक्षा के साथ छिपा हुआ अतिरिक्त पाठ।
बैज के साथ
कुछ उपयोगिताओं की सहायता से अपठित गणना, गतिविधि, और बहुत कुछ दिखाने के लिए किसी भी सूची समूह आइटम में बैज जोड़ें ।
- क्रैस जस्टो ओडियो14
- दापीबस एसी सुविधा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 को जोड़ें ।
सूची समूह आइटम शीर्षक
3 दिन पहलेDonec id elit non mi porta gravida और eget metus. मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट।
डोनेक आईडी एलीट नॉन एमआई पोर्टा।सूची समूह आइटम शीर्षक
3 दिन पहलेDonec id elit non mi porta gravida और eget metus. मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट।
डोनेक आईडी एलीट नॉन एमआई पोर्टा।सूची समूह आइटम शीर्षक
3 दिन पहलेDonec id elit non mi porta gravida और eget metus. मेकेनास सेड डायम एगेट रिसस वेरियस ब्लैंडिट।
डोनेक आईडी एलीट नॉन एमआई पोर्टा।<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>
जावास्क्रिप्ट व्यवहार
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
।
<!-- 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>
जावास्क्रिप्ट के माध्यम से
जावास्क्रिप्ट के माध्यम से टैब करने योग्य सूची आइटम सक्षम करें (प्रत्येक सूची आइटम को व्यक्तिगत रूप से सक्रिय करने की आवश्यकता है):
$('#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>
तरीकों
$().टैब
एक सूची आइटम तत्व और सामग्री कंटेनर को सक्रिय करता है। टैब में या तो एक 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>
टैब ('शो')
दी गई सूची आइटम का चयन करता है और उससे संबंधित फलक दिखाता है। कोई अन्य सूची आइटम जिसे पहले चुना गया था, अचयनित हो जाता है और उसका संबद्ध फलक छिपा होता है। टैब फलक वास्तव में दिखाए जाने से पहले कॉलर पर वापस आ जाता है (उदाहरण के लिए, 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.टैब | एक टैब दिखाए जाने के बाद यह ईवेंट टैब शो पर सक्रिय होता है। क्रमशः सक्रिय टैब और पिछले सक्रिय टैब (यदि उपलब्ध हो) का उपयोग करें event.target और लक्षित करें।event.relatedTarget |
छुपाएं.बीएस.टैब | यह घटना तब सक्रिय होती है जब एक नया टैब दिखाया जाना है (और इस प्रकार पिछला सक्रिय टैब छिपाया जाना है)। वर्तमान सक्रिय टैब और नए शीघ्र-से-सक्रिय टैब को क्रमशः उपयोग event.target और लक्षित करने के लिए।event.relatedTarget |
हिडन.bs.टैब | एक नया टैब दिखाए जाने के बाद यह घटना सक्रिय होती है (और इस प्रकार पिछला सक्रिय टैब छिपा हुआ है)। पिछले सक्रिय टैब और नए सक्रिय टैब को क्रमशः उपयोग event.target और लक्षित करने के लिए।event.relatedTarget |
$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {
e.target // newly activated tab
e.relatedTarget // previous active tab
})