सूची गट सामग्रीची मालिका प्रदर्शित करण्यासाठी एक लवचिक आणि शक्तिशाली घटक आहेत. त्यातील कोणत्याही सामग्रीला समर्थन देण्यासाठी त्यांना सुधारा आणि विस्तारित करा.
मूळ उदाहरण
सर्वात मूलभूत सूची गट ही सूची आयटम आणि योग्य वर्गांसह एक अक्रमित सूची आहे. त्यावर अनुसरण करणार्या पर्यायांसह किंवा आवश्यकतेनुसार आपल्या स्वतःच्या CSS सह तयार करा.
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
सक्रिय आयटम
वर्तमान सक्रिय निवड सूचित .activeकरण्यासाठी a मध्ये जोडा ..list-group-item
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
अक्षम वस्तू
ते अक्षम दिसण्यासाठी.disabled a मध्ये जोडा . लक्षात ठेवा की काही घटकांसह त्यांचे क्लिक इव्हेंट पूर्णपणे अक्षम करण्यासाठी सानुकूल JavaScript देखील आवश्यक असेल (उदा., दुवे)..list-group-item.disabled
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
दुवे आणि बटणे
जोडून होव्हर, अक्षम आणि सक्रिय स्थितीसह क्रिया करण्यायोग्य सूची गट आयटम तयार करण्यासाठी <a>s किंवा s वापरा . नॉन-इंटरॅक्टिव्ह घटक (जसे की s किंवा s) बनलेले सूची गट क्लिक किंवा टॅप परवडत नाहीत याची खात्री करण्यासाठी आम्ही हे छद्म-वर्ग वेगळे करतो.<button>.list-group-item-action<li><div>
s सह , तुम्ही वर्गाऐवजी विशेषता <button>देखील वापरू शकता . दुर्दैवाने, s अक्षम केलेल्या विशेषताला समर्थन देत नाही.disabled.disabled<a>
फ्लश
.list-group-flushमूळ कंटेनरमध्ये (उदा., कार्ड) सूची गट आयटम एज-टू-एज रेंडर करण्यासाठी काही सीमा आणि गोलाकार कोपरे काढण्यासाठी जोडा .
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Porta ac consectetur ac
इरोस येथे वेस्टिबुलम
क्षैतिज
.list-group-horizontalसर्व ब्रेकपॉइंट्सवर अनुलंब ते क्षैतिज सूची गट आयटमचे लेआउट बदलण्यासाठी जोडा . .list-group-horizontal-{sm|md|lg|xl}वैकल्पिकरित्या, त्या ब्रेकपॉईंटपासून सुरू होणारी सूची गट क्षैतिज करण्यासाठी एक प्रतिसादात्मक प्रकार निवडा min-width. सध्या क्षैतिज सूची गट फ्लश सूची गटांसह एकत्र केले जाऊ शकत नाहीत.
प्रोटिप: क्षैतिज असताना समान-रुंदीची सूची गट आयटम पाहिजेत? .flex-fillप्रत्येक सूची गट आयटममध्ये जोडा .
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
Cras justo odio
Dapibus ac facilisis in
मोरबी लिओ रिसस
संदर्भित वर्ग
स्टेटफुल पार्श्वभूमी आणि रंगासह आयटम सूची शैलीसाठी संदर्भित वर्ग वापरा.
Dapibus ac facilisis in
एक साधी प्राथमिक यादी गट आयटम
एक साधी दुय्यम सूची गट आयटम
एक साधी यश यादी गट आयटम
एक साधी धोक्याची यादी गट आयटम
एक साधी चेतावणी यादी गट आयटम
एक साधी माहिती यादी गट आयटम
एक साधी प्रकाश यादी गट आयटम
एक साधी गडद सूची गट आयटम
संदर्भित वर्ग देखील सोबत कार्य करतात .list-group-item-action. मागील उदाहरणामध्ये येथे उपस्थित नसलेल्या हॉवर शैलींची जोड लक्षात घ्या. राज्याचाही पाठिंबा आहे .active; संदर्भ सूची गट आयटमवर सक्रिय निवड सूचित करण्यासाठी ते लागू करा.
अर्थ जोडण्यासाठी रंग वापरणे केवळ एक दृश्य संकेत प्रदान करते, जे सहाय्यक तंत्रज्ञानाच्या वापरकर्त्यांना - जसे की स्क्रीन वाचकांपर्यंत पोहोचवले जाणार नाही. याची खात्री करा की रंगाने दर्शविलेली माहिती एकतर सामग्रीमधूनच स्पष्ट आहे (उदा. दृश्यमान मजकूर), किंवा पर्यायी माध्यमांद्वारे समाविष्ट केली आहे, जसे की .sr-onlyवर्गात लपवलेला अतिरिक्त मजकूर.
बॅजसह
काही उपयोगितांच्या मदतीने न वाचलेल्या संख्या, क्रियाकलाप आणि बरेच काही दर्शविण्यासाठी कोणत्याही सूची गट आयटममध्ये बॅज जोडा .
Cras justo odio14
Dapibus ac facilisis in2
मोरबी लिओ रिसस१
सानुकूल सामग्री
फ्लेक्सबॉक्स युटिलिटीजच्या मदतीने, खाली दिलेल्या सारख्या लिंक केलेल्या सूची गटांसाठीही जवळपास कोणतेही HTML आत जोडा .
टॅब JavaScript प्लगइन वापरा—त्याचा वैयक्तिकरित्या किंवा संकलित bootstrap.jsफाइलद्वारे समावेश करा—स्थानिक सामग्रीचे टॅब करण्यायोग्य फलक तयार करण्यासाठी आमच्या सूची गटाचा विस्तार करा.
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. मॉलिट व्होल्पटेट रिप्रेहेंडरिट वॉल्युप्टेट न्युला म्हणून कमीत कमी तात्पुरते व्यवस्था करण्यात आले आहे. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip 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.
डेटा विशेषता वापरणे
तुम्ही कोणतेही JavaScript न लिहिता सूची गट नेव्हिगेशन सक्रिय करू शकता फक्त निर्दिष्ट करून data-toggle="list"किंवा घटकावर. वर या डेटा विशेषता वापरा .list-group-item.
JavaScript द्वारे
JavaScript द्वारे टॅब करण्यायोग्य सूची आयटम सक्षम करा (प्रत्येक सूची आयटम स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):
आपण वैयक्तिक सूची आयटम अनेक मार्गांनी सक्रिय करू शकता:
फिकट प्रभाव
टॅब पॅनल फेड इन करण्यासाठी, .fadeप्रत्येकामध्ये जोडा .tab-pane. .showपहिल्या टॅब उपखंडात प्रारंभिक सामग्री दृश्यमान करणे देखील आवश्यक आहे .
पद्धती
$().टॅब
सूची आयटम घटक आणि सामग्री कंटेनर सक्रिय करते. टॅबमध्ये DOM मध्ये कंटेनर नोडला लक्ष्य करणारा एक data-targetकिंवा एक असावा.href
.tab('शो')
दिलेला सूची आयटम निवडतो आणि त्याचा संबंधित उपखंड दाखवतो. याआधी निवडलेला इतर कोणताही सूची आयटम न निवडलेला होतो आणि त्याचा संबंधित उपखंड लपविला जातो. टॅब उपखंड प्रत्यक्षात दर्शविले जाण्यापूर्वी कॉलरकडे परत येते (उदाहरणार्थ, shown.bs.tabइव्हेंट होण्यापूर्वी).
कार्यक्रम
नवीन टॅब दाखवताना, इव्हेंट खालील क्रमाने सुरू होतात:
hide.bs.tab(वर्तमान सक्रिय टॅबवर)
show.bs.tab(दाखवल्या जाणार्या टॅबवर)
hidden.bs.tab(मागील सक्रिय टॅबवर, hide.bs.tabकार्यक्रमाप्रमाणेच)
कोणताही टॅब आधीपासून सक्रिय नसल्यास, hide.bs.tabआणि hidden.bs.tabइव्हेंट्स काढले जाणार नाहीत.
कार्यक्रमाचा प्रकार
वर्णन
show.bs.tab
हा कार्यक्रम टॅब शोवर सुरू होतो, परंतु नवीन टॅब दाखवण्यापूर्वी. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
दाखवले.bs.tab
टॅब दर्शविल्यानंतर हा कार्यक्रम टॅब शोवर सुरू होतो. सक्रिय टॅब आणि मागील सक्रिय टॅब (उपलब्ध असल्यास) अनुक्रमे वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
hide.bs.tab
जेव्हा नवीन टॅब दाखवायचा असतो (आणि अशा प्रकारे मागील सक्रिय टॅब लपवायचा असतो) तेव्हा हा कार्यक्रम सुरू होतो. अनुक्रमे वर्तमान सक्रिय टॅब आणि लवकरच सक्रिय होणारा नवीन टॅब वापरा event.targetआणि लक्ष्यित करा.event.relatedTarget
hidden.bs.tab
हा कार्यक्रम नवीन टॅब दर्शविल्यानंतर सुरू होतो (आणि अशा प्रकारे मागील सक्रिय टॅब लपविला जातो). मागील सक्रिय टॅब आणि नवीन सक्रिय टॅब अनुक्रमे वापरा event.targetआणि लक्ष्यित करण्यासाठी.event.relatedTarget