सूची समूहहरू सामग्रीको श्रृंखला प्रदर्शन गर्न लचिलो र शक्तिशाली घटक हुन्। परिमार्जन गर्नुहोस् र तिनीहरूलाई भित्र कुनै पनि सामग्रीको बारेमा समर्थन गर्न विस्तार गर्नुहोस्।
आधारभूत उदाहरण
सबैभन्दा आधारभूत सूची समूह सूची वस्तुहरू र उचित वर्गहरूको साथ एक अक्रमित सूची हो। यसलाई पछ्याउने विकल्पहरू, वा आवश्यकता अनुसार तपाईंको आफ्नै CSS सँग निर्माण गर्नुहोस्।
Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum
सक्रिय वस्तुहरू
हालको सक्रिय चयन संकेत .activeगर्न a मा थप्नुहोस् ।.list-group-item
Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum
असक्षम वस्तुहरू
यसलाई असक्षम देखाउनको.disabled लागि a मा थप्नुहोस् । ध्यान दिनुहोस् कि केही तत्वहरूसँग तिनीहरूको क्लिक घटनाहरू (जस्तै, लिङ्कहरू) पूर्ण रूपमा असक्षम गर्न अनुकूलन JavaScript आवश्यक पर्दछ।.list-group-item.disabled
Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum
लिङ्क र बटनहरू
होभर, असक्षम र सक्रिय अवस्थाहरू थपेर कार्ययोग्य सूची समूह वस्तुहरू सिर्जना गर्न <a>s वा s प्रयोग गर्नुहोस् । गैर-अन्तर्क्रियात्मक तत्वहरू (जस्तै s वा s) बाट बनेका सूची समूहहरूले क्लिक वा ट्याप गर्ने क्षमता प्रदान गर्दैनन् भन्ने कुरा सुनिश्चित गर्न हामी यी स्यूडो-वर्गहरूलाई अलग गर्छौं।<button>.list-group-item-action<li><div>
यहाँ मानक कक्षाहरू प्रयोग नगर्न.btn निश्चित हुनुहोस् ।
s को साथ , तपाइँ क्लास को सट्टा विशेषता <button>को प्रयोग गर्न सक्नुहुन्छ । दुर्भाग्यवश, s अक्षम विशेषता समर्थन गर्दैन।disabled.disabled<a>
फ्लस
.list-group-flushएउटा अभिभावक कन्टेनर (जस्तै, कार्डहरू) मा सूची समूह वस्तुहरू एज-टु-एज रेन्डर गर्न केही किनारहरू र गोलाकार कुनाहरू हटाउन थप्नुहोस् ।
Cras justo odio
Dapibus ac facilisis in
मोरबी लियो रिसस
Porta ac consectetur ac
eros मा Vestibulum
तेर्सो
.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 odio१४
Dapibus ac facilisis in२
मोरबी लियो रिसस१
अनुकूलन सामग्री
फ्लेक्सबक्स उपयोगिताहरूको मद्दतले तलको जस्तै लिङ्क गरिएको सूची समूहहरूको लागि पनि, भित्र लगभग कुनै पनि HTML थप्नुहोस् ।
ट्याब JavaScript प्लगइन प्रयोग गर्नुहोस्—यसलाई व्यक्तिगत रूपमा वा कम्पाइल bootstrap.jsगरिएको फाइल मार्फत समावेश गर्नुहोस्—स्थानीय सामग्रीको ट्याबयोग्य प्यानहरू सिर्जना गर्न हाम्रो सूची समूह विस्तार गर्न।
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor। Voluptate desertunt sit sunt nisi aliqua Fugiat proident ea ut। Mollit voluptate reprehenderit occaecat nisi ad no minim tempor sunt voluptate consectetur exercitation id ut nulla। Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor। Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim।
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।
जाभास्क्रिप्ट मार्फत
जाभास्क्रिप्ट मार्फत ट्याबयोग्य सूची वस्तु सक्षम गर्नुहोस् (प्रत्येक सूची वस्तुलाई व्यक्तिगत रूपमा सक्रिय गर्न आवश्यक छ):
तपाईले व्यक्तिगत सूची वस्तुलाई धेरै तरिकामा सक्रिय गर्न सक्नुहुन्छ:
फेड प्रभाव
ट्याब प्यानल फेड इन बनाउनको लागि, .fadeप्रत्येकमा थप्नुहोस् .tab-pane। .showपहिलो ट्याब फलकले प्रारम्भिक सामग्री देखिने बनाउनु पर्छ ।
विधिहरू
$() ट्याब
सूची वस्तु तत्व र सामग्री कन्टेनर सक्रिय गर्दछ। ट्याबमा या त एक data-targetवा hrefDOM मा कन्टेनर नोड लक्षित हुनुपर्छ।
ट्याब('देखाउनुहोस्')
दिइएको सूची वस्तु चयन गर्छ र यसको सम्बन्धित फलक देखाउँछ। पहिले चयन गरिएको कुनै पनि अन्य सूची वस्तु अचयनित हुन्छ र यसको सम्बन्धित फलक लुकेको हुन्छ। ट्याब फलक वास्तवमा देखाइनु अघि कलरमा फर्कन्छ (उदाहरणका लागि, shown.bs.tabघटना हुनु अघि)।
घटनाहरू
नयाँ ट्याब देखाउँदा, घटनाहरू निम्न क्रममा सक्रिय हुन्छन्:
hide.bs.tab(हालको सक्रिय ट्याबमा)
show.bs.tab(देखाउन ट्याबमा)
hidden.bs.tab(अघिल्लो सक्रिय ट्याबमा, hide.bs.tabघटनाको लागि जस्तै)
shown.bs.tab(नयाँ-सक्रिय भर्खरै देखाइएको ट्याबमा, show.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