सामुग्रीची माळ दाखोवपाखातीर वळेरी गट हो एक लवचीक आनी बळिश्ट घटक आसा. भितरल्या फकत खंयच्याय सामुग्रीक आदार दिवपाक त्यो सुदारात आनी विस्तार करात.
मुळावें उदाहरण
सगळ्यांत मुळावो वळेरी गट म्हळ्यार वळेरी वस्तू आनी योग्य वर्ग आशिल्ली क्रमबध्द वळेरी. उपरांत येवपी पर्यायां सयत ताचेर उबारात, वा गरज पडल्यार तुमच्या स्वताच्या CSS कडेन.
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
पोर्टा एसी कॉन्सेक्टेतुर एसी
इरोस हांगा वेस्टिबुलम
सक्रिय वस्तू
सद्याची सक्रिय निवड दाखोवपाक .activea कडेन जोडात ..list-group-item
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
पोर्टा एसी कॉन्सेक्टेतुर एसी
इरोस हांगा वेस्टिबुलम
अक्षम केल्लीं वस्तू
अक्षम दिसपाक.disabled a .list-group-itemकडेन जोडात . लक्षांत दवरात की कांय घटकांक तांची क्लिक घडणुको पुरायपणान अक्षम करपाक (देखीक, दुवे) सानुकूल जावास्क्रिप्टाचीय गरज आसतली..disabled
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
पोर्टा एसी कॉन्सेक्टेतुर एसी
इरोस हांगा वेस्टिबुलम
दुवे आनी बटण
जोडून होवर, अक्षम, आनी सक्रिय स्थिती आशिल्लीं कृती करपाक योग्य यादी गट आयटम तयार करपाक <a>s वा s वापरात . आमी हे छद्म-वर्ग वेगळे करतात, जेणे करून बिगर-परस्परक्रियाशील घटकां पासून तयार केल्ले यादी गट ( s वा s सारके) क्लिक वा टॅप परवडनात नात हाची खात्री करपाक.<button>.list-group-item-action<li><div>
s च्या आदारान , तुमी वर्गा बदला गुणधर्माचोय <button>वापर करूंक शकतात . दुख्खाची गजाल म्हळ्यार, s अक्षम केल्ल्या गुणधर्माक तेंको दिना.disabled.disabled<a>
फ्लश करप
.list-group-flushपालक कंटेनरांत (देखीक, कार्डां) यादी गट आयटम धार-ते-धार रेंडर करपाक कांय शिमो आनी वाटकुळे कोनशे काडून उडोवपाक जोडात .
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
पोर्टा एसी कॉन्सेक्टेतुर एसी
इरोस हांगा वेस्टिबुलम
आडवें
.list-group-horizontalसगळ्या ब्रेकपॉइंटांचेर यादी गट आयटमांची मांडावळ उब्या वयल्यान आडव्या कडेन बदलपाक जोडात . .list-group-horizontal-{sm|md|lg|xl}पर्यायीपणान, त्या ब्रेकपॉइंट च्या पासून सुरू जावपी यादी गट आडवो करपाक प्रतिसाद दिवपी वेरिएंट निवडात min-width. सद्या आडवे यादी गट फ्लश यादी गटां वांगडा जोडूंक मेळनात.
ProTip: आडवे आसतना समान रुंदायेच्यो यादी गट आयटम जाय? .flex-fillदरेक यादी गट आयटमांत जोडात .
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
क्रास जस्टो ओडियो
दापिबस एसी सुविधा इन
मोरबी लियो रिसुस हें नांव
संदर्भात्मक वर्ग
स्टेटफुल पार्श्वभूंय आनी रंग आशिल्ल्या वस्तूंची वळेरी शैली करपाक संदर्भ वर्ग वापरात.
दापिबस एसी सुविधा इन
एक सादी प्राथमीक यादी गट आयटम
एक सादी दुय्यम वळेरी गट आयटम
एक सादी यशस्वी यादी गट आयटम
एक सादी धोक्याची वळेरी गट आयटम
एक सादी शिटकावणी वळेरी गट आयटम
एक सादी म्हायती यादी गट आयटम
एक सादी उजवाडाची वळेरी गट आयटम
एक सादी काळी वळेरी गट आयटम
संदर्भ वर्गूय .list-group-item-action. फाटल्या उदाहरणांत हाजीर नाशिल्ल्या हांगाच्या होवर शैलींची जोडणी लक्षांत दवरात. तशेंच .activeराज्याक आदार मेळटा; संदर्भ यादी गट आयटमाचेर सक्रिय निवड दाखोवपाक लागू करात.
अर्थ जोडपाक रंग वापरप फकत एक दृश्य संकेत दिता, जो सहाय्यक तंत्रगिन्यानाच्या वापरप्यांक पावोवचो ना – जशें स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (देखीक दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .sr-onlyवर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.
बॅज घेवन
कांय उपयुक्ततायांच्या आदारान वाचूंक नाशिल्लीं गणना, क्रियाशीलता, आनी हेर दाखोवपाक खंयच्याय यादी गट आयटमांत बॅज जोडात .
क्रास जस्टो ओडियो१४ हें नांव
दापिबस एसी सुविधा इन२
मोरबी लियो रिसुस हें नांव१
सानुकूल सामुग्री
भितर लागीं लागीं खंयचोय HTML जोडचो, सकयल दिल्ल्या सारकिल्या दुवो केल्ल्या यादी गटां खातीर लेगीत, flexbox उपयुक्ततायांच्या आदारान .
bootstrap.jsथळाव्या सामुग्रीचे टॅब करपाक येवपी फलक तयार करपाक आमच्या यादी गटाचो विस्तार करपाक टॅब JavaScript प्लगइन वापरात-ताका वैयक्तीकपणान वा संकलित फायल वरवीं समाविष्ट करात .
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.
जावास्क्रिप्ट वरवीं
जावास्क्रिप्ट वरवीं टॅब करपाक येवपी वळेरी आयटम सक्षम करात (दरेक यादी आयटम वैयक्तीकपणान सक्रिय करपाची गरज आसा):
तुमी जायत्या तरांनी वैयक्तीक वळेरी आयटम सक्रिय करूंक शकतात: