सूची समूह सामग्री कें एकटा श्रृंखला कें प्रदर्शित करय कें लेल एकटा लचीला आ शक्तिशाली घटक छै. भीतर लगभग कोनो सामग्री के समर्थन करय लेल ओकरा संशोधित आ विस्तार करू.
मूल उदाहरण
सबसे बेसिक सूची समूह सूची आइटम आ उचित वर्गक कें साथ एकटा अक्रमित सूची छै. एकरा बाद जे विकल्प आबै छै, ओकरा साथ निर्माण करू, या जरूरत के अनुसार अपन सीएसएस के साथ.
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा एसी consectetur एसी
इरोस पर वेस्टिबुलम
सक्रिय आइटम
वर्तमान सक्रिय चयन केँ इंगित करबाक .activeलेल a मे जोड़ू ..list-group-item
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा एसी consectetur एसी
इरोस पर वेस्टिबुलम
अक्षम आइटम
.disabledएकटा मे जोड़ू .list-group-itemजे एकरा अक्षम देखाएब . ध्यान रहे कि कुछ तत्वों क॑ साथ .disabledभी कस्टम जावास्क्रिप्ट केरऽ आवश्यकता होतै ताकि ओकरऽ क्लिक घटना (जैना, लिंक) क॑ पूरा तरह स॑ अक्षम करलऽ जाय सक॑ ।
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा एसी consectetur एसी
इरोस पर वेस्टिबुलम
लिंक आ बटन
जोड़ि कए होवर, अक्षम, आओर सक्रिय अवस्था क संग कार्यवाही योग्य सूची समूह आइटम बनेबाक लेल <a>s अथवा s क उपयोग करू . हम इ छद्म-वर्गक कें अलग करय छै इ सुनिश्चित करय कें लेल कि गैर-इंटरएक्टिव तत्वक (जैना s या s) सं बनल सूची समूह क्लिक या टैप अफोर्डेंस प्रदान नहि करय.<button>.list-group-item-action<li><div>
s के साथ , आप क्लास के बजाय एट्रिब्यूट <button>के उपयोग भी कर सकते हैं | दुखक बात ई जे s अक्षम विशेषता केँ समर्थन नहि करैत अछि.disabled.disabled<a>
फ्लश करब
.list-group-flushएकटा मूल कंटेनर (जैना, कार्ड) मे सूची समूह आइटम कें किनारे सं किनारा रेंडर करय कें लेल किच्छू सीमा आ गोल कोना कें हटावय कें लेल जोड़ूं .
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा एसी consectetur एसी
इरोस पर वेस्टिबुलम
क्षैतिज
.list-group-horizontalसब ब्रेकपॉइंट भर मे सूची समूह आइटम कें लेआउट कें ऊर्ध्वाधर सं क्षैतिज मे बदलय कें लेल जोड़ू . वैकल्पिक रूप सँ, एकटा सूची समूह कें क्षैतिज बनावा कें लेल एकटा प्रतिक्रियाशील रूपांतर चुनू .list-group-horizontal-{sm|md|lg|xl}जे ओय ब्रेकपॉइंट कें min-width. वर्तमान मे क्षैतिज सूची समूह कें फ्लश सूची समूहक कें साथ संयोजित नहि कैल जा सकय छै.
ProTip: क्षैतिज रहला पर समान-चौड़ाई सूची समूह आइटम चाहैत छी? .flex-fillप्रत्येक सूची समूह आइटम मे जोड़ू ।
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
सन्दर्भ कक्षाएँ
एकटा स्टेटफुल बैकग्राउंड आ रंग के साथ आइटम के स्टाइल सूचीबद्ध करय लेल संदर्भ वर्ग के उपयोग करू.
दापिबस एसी सुविधा में
एकटा सरल प्राथमिक सूची समूह आइटम
एकटा सरल माध्यमिक सूची समूह आइटम
एकटा सरल सफलता सूची समूह आइटम
एकटा सरल खतरा सूची समूह आइटम
एकटा सरल चेतावनी सूची समूह आइटम
एकटा सरल जानकारी सूची समूह आइटम
एकटा सरल प्रकाश सूची समूह आइटम
एकटा सरल डार्क लिस्ट ग्रुप आइटम
संदर्भ कक्षा सेहो .list-group-item-action. एहि ठाम होवर शैली क जोड़ पर ध्यान दियौ जे पिछला उदाहरण मे मौजूद नहि अछि । संगहि .activeराज्यक समर्थन सेहो अछि; एकटा संदर्भ सूची समूह आइटम पर एकटा सक्रिय चयन कें संकेत करय कें लेल एकरा लागू करय.
अर्थ जोड़य कें लेल रंग कें उपयोग करनाय केवल एकटा दृश्य संकेत प्रदान करय छै, जे सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें – जेना स्क्रीन रीडर – कें संप्रेषित नहि कैल जेतय. सुनिश्चित करूं कि रंग सं संकेत कैल गेल जानकारी या त सामग्री सं ही स्पष्ट छै (जैना दृश्यमान पाठ), या वैकल्पिक साधन कें माध्यम सं शामिल कैल गेल छै, जेना कि .sr-onlyवर्ग कें साथ छिपल अतिरिक्त पाठ.
टैब जावास्क्रिप्ट प्लगइन क॑ प्रयोग करऽ-एकरा व्यक्तिगत रूप स॑ या संकलित bootstrap.jsफाइल के माध्यम स॑ शामिल करऽ-स्थानीय सामग्री केरऽ टैबेबल फलक बनाबै लेली हमरऽ सूची समूह क॑ विस्तारित करै लेली ।
Velit aute mollit ipsum विज्ञापन dolor consectetur nulla ऑफिसिया कुलपा adipisicing व्यायाम fugiat अस्थायी | Voluptate deserunt बैठना sunt निसी एलिक्वा fugiat proident ईए उत | मोलिट voluptate reprehenderit occaecat nisi एड गैर न्यूनतम अस्थायी sunt voluptate consectetur व्यायाम आईडी उत nulla. ईए एट fugiat aliquip nostrud sunt incididunt consectetur कुलपा एलिक्विप eiusmod dolor | एनिम एड लोरेम एलिक्वा इन क्यूपिडाट निसी एनिम ईयू नोस्ट्रुड दो एलिक्विप वेनिम मिनिम।
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
Irure enim occaecat labore sit qui aliquip reprehenderit amet velit. Deserunt ullamco ex elit nostrud ut dolore nisi officia magna sit occaecat laboris sunt dolor. Nisi eu minim cillum occaecat aute est cupidatat aliqua labore aute occaecat ea aliquip sunt amet. Aute mollit dolor ut exercitation irure commodo non amet consectetur quis amet culpa. Quis ullamco nisi amet qui aute irure eu. Magna labore dolor quis ex labore id nostrud deserunt dolor eiusmod eu pariatur culpa mollit in irure.
डेटा विशेषताओं का उपयोग करना
data-toggle="list"आप बस निर्दिष्ट करकय या कोनों तत्व पर बिना कोनों जावास्क्रिप्ट लिखने कोनों सूची समूह नेविगेशन कें सक्रिय करय सकय छै . पर एहि डेटा विशेषताक उपयोग करू .list-group-item.
जावास्क्रिप्ट के माध्यम से
जावास्क्रिप्ट कें माध्यम सं टैबेबल सूची आइटम कें सक्षम करूं (प्रत्येक सूची आइटम कें व्यक्तिगत रूप सं सक्रिय करय कें जरूरत छै):
अहां व्यक्तिगत सूची आइटम कें कई तरह सं सक्रिय कयर सकय छी:
ई घटना टैब शो पर फायर करैत अछि, मुदा नव टैब देखाबय सं पहिने. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget
देखाओल गेल अछि.bs.tab
एकटा टैब देखाओल गेलाक बाद ई घटना टैब शो पर फायर करैत अछि. क्रमश: सक्रिय टैब आ पिछला सक्रिय टैब (यदि उपलब्ध छै) कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget
छिपाएँ.बीएस.टैब
ई घटना तखन फायर करैत अछि जखन कोनो नव टैब देखाओल जेबाक अछि (आ एहि तरहें पिछला सक्रिय टैब केँ नुकाएबाक अछि) । वर्तमान सक्रिय टैब आरू जल्द ही सक्रिय होबै वाला नया टैब क॑ लक्षित करै लेली क्रमशः आरू के event.targetप्रयोग करलऽ जाय ।event.relatedTarget
छिपल.बीएस.टैब
ई घटना एकटा नव टैब देखाओल गेलाक बाद फायर करैत अछि (आ एहि तरहें पिछला सक्रिय टैब नुका जाइत अछि) । क्रमशः पिछला सक्रिय टैब आ नव सक्रिय टैब कें लक्षित करय कें लेल event.targetआ कें उपयोग करूं .event.relatedTarget