आइकनोग्राफी, ड्रॉपडाउन, इनपुट समूह, नेविगेशन, अलर्ट और बहुत कुछ प्रदान करने के लिए बनाए गए एक दर्जन से अधिक पुन: प्रयोज्य घटक।
ग्लिफ़िकन्स
उपलब्ध ग्लिफ़
ग्लिफ़िकॉन हाफलिंग्स सेट से फ़ॉन्ट प्रारूप में 250 से अधिक ग्लिफ़ शामिल हैं। Glyphicons Halflings आमतौर पर मुफ्त में उपलब्ध नहीं होते हैं, लेकिन उनके निर्माता ने उन्हें बूटस्ट्रैप के लिए मुफ्त में उपलब्ध कराया है। धन्यवाद के रूप में, हम केवल यह कहते हैं कि आप जब भी संभव हो Glyphicons के लिए एक लिंक शामिल करें।
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लस
ग्लिफ़िकॉन ग्लिफ़िकॉन-यूरो
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड
ग्लिफ़िकॉन ग्लिफ़िकॉन-लिफ़ाफ़ा
ग्लिफ़िकॉन ग्लिफ़िकॉन-पेंसिल
ग्लिफ़िकॉन ग्लिफ़िकॉन-ग्लास
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-हार्ट
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टार-रिक्त
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़िल्म
ग्लिफ़िकॉन ग्लिफ़िकॉन-वें-बड़े
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-वें-सूची
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-निकालें
ग्लिफ़िकॉन ग्लिफ़िकॉन-ज़ूम-इन
ग्लिफ़िकॉन ग्लिफ़िकॉन-ज़ूम-आउट
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-रोड
ग्लिफ़िकॉन ग्लिफ़िकॉन-डाउनलोड-alt
ग्लिफ़िकॉन ग्लिफ़िकॉन-डाउनलोड
ग्लिफ़िकॉन ग्लिफ़िकॉन-अपलोड
ग्लिफ़िकॉन ग्लिफ़िकॉन-इनबॉक्स
ग्लिफ़िकॉन ग्लिफ़िकॉन-प्ले-सर्कल
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-रिफ्रेश
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-हेडफ़ोन
ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-ऑफ़
ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-डाउन
ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-अप
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-बारकोड
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-बुकमार्क
ग्लिफ़िकॉन ग्लिफ़िकॉन-प्रिंट
ग्लिफ़िकॉन ग्लिफ़िकॉन-कैमरा
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-ऊंचाई
ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-चौड़ाई
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़िकॉन-इंडेंट-राइट
ग्लिफ़िकॉन ग्लिफ़िकॉन-फेसटाइम-वीडियो
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-मैप-मार्कर
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टेप-बैकवर्ड
ग्लिफ़िकॉन ग्लिफ़िकॉन-तेज़-पिछड़े
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़ास्ट-फ़ॉरवर्ड
ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टेप-फ़ॉरवर्ड
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-लेफ्ट
ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-राइट
ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लस-साइन
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़िकॉन-निकालें-चिह्न
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़िकॉन-प्रश्न-चिह्न
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-स्क्रीनशॉट
ग्लिफ़कॉन ग्लिफ़िकॉन-निकालें-सर्कल
ग्लिफ़िकॉन ग्लिफ़िकॉन-ओके-सर्कल
ग्लिफ़कॉन ग्लिफ़कॉन-प्रतिबंध-सर्कल
ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-लेफ्ट
ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-राइट
ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-अप
ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-डाउन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-आकार-छोटा
ग्लिफ़िकॉन ग्लिफ़िकॉन विस्मयादिबोधक चिह्न
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़िकॉन-आई-ओपन
ग्लिफ़कॉन ग्लिफ़िकॉन-आई-क्लोज़
ग्लिफ़कॉन ग्लिफ़िकॉन-चेतावनी-चिह्न
ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लेन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-यादृच्छिक
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-चुंबक
ग्लिफ़िकॉन ग्लिफ़िकॉन-शेवरॉन-अप
ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-डाउन
ग्लिफ़िकॉन
ग्लिफ़कॉन ग्लिफ़कॉन-शॉपिंग-कार्ट
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़कॉन-फ़ोल्डर-ओपन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-आकार-क्षैतिज
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़कॉन-हाथ-दाएँ
ग्लिफ़िकॉन ग्लिफ़िकॉन-हाथ-बाएँ
ग्लिफ़िकॉन ग्लिफ़िकॉन-हैंड-अप
ग्लिफ़िकॉन ग्लिफ़िकॉन-हैंड-डाउन
ग्लिफ़िकॉन ग्लिफ़कॉन-सर्कल-एरो-राइट
ग्लिफ़िकॉन ग्लिफ़कॉन-सर्कल-एरो-लेफ्ट
ग्लिफ़िकॉन ग्लिफ़िकॉन-सर्कल-एरो-अप
ग्लिफ़िकॉन ग्लिफ़िकॉन-सर्कल-एरो-डाउन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-रिंच
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़िल्टर
ग्लिफ़िकॉन ग्लिफ़िकॉन-ब्रीफ़केस
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़ुलस्क्रीन
ग्लिफ़िकॉन ग्लिफ़िकॉन-डैशबोर्ड
ग्लिफ़िकॉन ग्लिफ़िकॉन-पेपरक्लिप
ग्लिफ़िकॉन ग्लिफ़कॉन-दिल-रिक्त
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-सॉर्ट-बाय-अल्फ़ाबेट
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-क्रम
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-क्रम-alt
ग्लिफ़िकॉन ग्लिफ़िकॉन-सॉर्ट-बाय-एट्रिब्यूट्स
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-विशेषताएँ-alt
ग्लिफ़िकॉन ग्लिफ़िकॉन-अनचेक
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लैश
ग्लिफ़िकॉन ग्लिफ़िकॉन-लॉग-आउट
ग्लिफ़िकॉन ग्लिफ़िकॉन-नई-विंडो
ग्लिफ़िकॉन ग्लिफ़िकॉन-रिकॉर्ड
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-ओपन
ग्लिफ़िकॉन ग्लिफ़िकॉन-सेव्ड
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-निर्यात
ग्लिफ़िकॉन ग्लिफ़िकॉन-भेजें
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-डिस्क
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-सेव्ड
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-निकालें
ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-सेव
ग्लिफ़कॉन ग्लिफ़िकॉन-फ़्लॉपी-ओपन
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रेडिट-कार्ड
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-कटलरी
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-संपीड़ित
ग्लिफ़िकॉन ग्लिफ़िकॉन-इयरफ़ोन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-टॉवर
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-एसडी-वीडियो
ग्लिफ़िकॉन ग्लिफ़िकॉन-एचडी-वीडियो
ग्लिफ़िकॉन ग्लिफ़िकॉन-उपशीर्षक
ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-स्टीरियो
ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-डॉल्बी
ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-5-1
ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-6-1
ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-7-1
ग्लिफ़िकॉन ग्लिफ़िकॉन-कॉपीराइट-चिह्न
ग्लिफ़िकॉन ग्लिफ़िकॉन-पंजीकरण-चिह्न
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड-डाउनलोड
ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड-अपलोड
ग्लिफ़िकॉन ग्लिफ़कॉन-ट्री-शंकुधारी
ग्लिफ़िकॉन ग्लिफ़कॉन-पेड़-पर्णपाती
ग्लिफ़िकॉन ग्लिफ़िकॉन-सीडी
ग्लिफ़िकॉन ग्लिफ़िकॉन-सेव-फ़ाइल
ग्लिफ़िकॉन ग्लिफ़िकॉन-ओपन-फ़ाइल
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-पेस्ट
ग्लिफ़िकॉन ग्लिफ़िकॉन-अलर्ट
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-बिशप
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-ब्लैकबोर्ड
ग्लिफ़िकॉन ग्लिफ़िकॉन-बिस्तर
ग्लिफ़िकॉन ग्लिफ़िकॉन-सेब
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-ऑवरग्लास
ग्लिफ़िकॉन ग्लिफ़िकॉन-लैंप
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-पिगी-बैंक
ग्लिफ़िकॉन ग्लिफ़िकॉन-कैंची
ग्लिफ़िकॉन ग्लिफ़िकॉन-बिटकॉइन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-येन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-आइस-लॉली
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-विकल्प-क्षैतिज
ग्लिफ़िकॉन ग्लिफ़िकॉन-विकल्प-ऊर्ध्वाधर
ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-हैमबर्गर
ग्लिफ़िकॉन ग्लिफ़िकॉन-मोडल-विंडो
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-धूप का चश्मा
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-रंग
ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-पृष्ठभूमि
ग्लिफ़कॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-टॉप
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़कॉन-ऑब्जेक्ट-संरेखण-क्षैतिज
ग्लिफ़िकॉन ग्लिफ़कॉन-ऑब्जेक्ट-एलाइन-लेफ्ट
ग्लिफ़कॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-वर्टिकल
ग्लिफ़िकॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-राइट
ग्लिफ़िकॉन ग्लिफ़कॉन-त्रिकोण-दाएं
ग्लिफ़िकॉन ग्लिफ़कॉन-त्रिकोण-बाएं
ग्लिफ़कॉन ग्लिफ़िकॉन-त्रिकोण-नीचे
ग्लिफ़िकॉन
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-सुपरस्क्रिप्ट
ग्लिफ़िकॉन ग्लिफ़िकॉन-सबस्क्रिप्ट
ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-बाएं
ग्लिफ़िकॉन
ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-डाउन
ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-अप
कैसे इस्तेमाल करे
प्रदर्शन कारणों से, सभी आइकनों को एक बेस क्लास और अलग-अलग आइकन क्लास की आवश्यकता होती है। उपयोग करने के लिए, निम्न कोड को लगभग कहीं भी रखें। उचित पैडिंग के लिए आइकन और टेक्स्ट के बीच एक स्थान छोड़ना सुनिश्चित करें।
अन्य घटकों के साथ मिश्रण न करें
चिह्न वर्गों को सीधे अन्य घटकों के साथ नहीं जोड़ा जा सकता है। उन्हें एक ही तत्व पर अन्य वर्गों के साथ प्रयोग नहीं किया जाना चाहिए। इसके बजाय, एक नेस्टेड जोड़ें <span>और आइकन क्लासेस को <span>.
केवल खाली तत्वों पर उपयोग के लिए
चिह्न वर्गों का उपयोग केवल उन तत्वों पर किया जाना चाहिए जिनमें कोई पाठ्य सामग्री नहीं है और कोई बाल तत्व नहीं है।
आइकन फ़ॉन्ट स्थान बदलना
../fonts/बूटस्ट्रैप मानता है कि संकलित सीएसएस फ़ाइलों के सापेक्ष आइकन फ़ॉन्ट फ़ाइलें निर्देशिका में स्थित होंगी । उन फ़ॉन्ट फ़ाइलों को स्थानांतरित करने या उनका नाम बदलने का अर्थ है सीएसएस को तीन तरीकों में से एक में अपडेट करना:
स्रोत कम फ़ाइलों में @icon-font-pathऔर/या चर बदलें ।@icon-font-name
अपने विशिष्ट विकास सेटअप के लिए सबसे उपयुक्त विकल्प का उपयोग करें।
सुलभ चिह्न
सहायक तकनीकों के आधुनिक संस्करण सीएसएस द्वारा उत्पन्न सामग्री, साथ ही विशिष्ट यूनिकोड वर्णों की घोषणा करेंगे। स्क्रीन रीडर में अनपेक्षित और भ्रमित करने वाले आउटपुट से बचने के लिए (विशेषकर जब आइकन पूरी तरह से सजावट के लिए उपयोग किए जाते हैं), हम उन्हें aria-hidden="true"विशेषता के साथ छिपाते हैं।
यदि आप अर्थ को व्यक्त करने के लिए आइकन का उपयोग कर रहे हैं (केवल एक सजावटी तत्व के रूप में नहीं), तो सुनिश्चित करें कि यह अर्थ सहायक तकनीकों को भी बताया गया है - उदाहरण के लिए, .sr-onlyकक्षा के साथ दृष्टिगत रूप से छिपी हुई अतिरिक्त सामग्री शामिल करें।
यदि आप बिना किसी अन्य पाठ के नियंत्रण बना रहे हैं (जैसे <button>कि जिसमें केवल एक आइकन होता है), तो आपको नियंत्रण के उद्देश्य की पहचान करने के लिए हमेशा वैकल्पिक सामग्री प्रदान करनी चाहिए, ताकि यह सहायक तकनीकों के उपयोगकर्ताओं के लिए समझ में आए। इस मामले में, आप aria-labelनियंत्रण पर ही एक विशेषता जोड़ सकते हैं।
उदाहरण
टूलबार, नेविगेशन, या प्रीपेड फॉर्म इनपुट के लिए बटन, बटन समूहों में उनका उपयोग करें।
अलर्ट में उपयोग किया जाने वाला आइकन यह बताने के लिए है कि यह एक त्रुटि संदेश है, अतिरिक्त .sr-onlyटेक्स्ट के साथ यह संकेत सहायक तकनीकों के उपयोगकर्ताओं तक पहुंचाने के लिए।
गलती:एक मान्य ईमेल पता दर्ज करें
नीचे की ओर फैलने वाला बिंदु
लिंक की सूची प्रदर्शित करने के लिए टॉगल करने योग्य, प्रासंगिक मेनू। ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनाया गया ।
उदाहरण
ड्रॉपडाउन के ट्रिगर और ड्रॉपडाउन मेनू को .dropdown, या घोषित करने वाले किसी अन्य तत्व के भीतर लपेटें position: relative;। फिर मेनू का HTML जोड़ें।
डिफ़ॉल्ट रूप से, एक ड्रॉपडाउन मेनू स्वचालित रूप से ऊपर से 100% और उसके पैरेंट के बाईं ओर स्थित होता है। ड्रॉपडाउन मेनू को दाईं ओर संरेखित करने के .dropdown-menu-rightलिए जोड़ें ।.dropdown-menu
अतिरिक्त स्थिति की आवश्यकता हो सकती है
ड्रॉपडाउन स्वचालित रूप से दस्तावेज़ के सामान्य प्रवाह के भीतर सीएसएस के माध्यम से स्थित होते हैं। इसका मतलब है कि ड्रॉपडाउन को माता-पिता द्वारा कुछ गुणों के साथ क्रॉप किया जा सकता है overflowया व्यूपोर्ट की सीमा से बाहर दिखाई दे सकता है। इन मुद्दों को अपने आप हल करें क्योंकि वे उत्पन्न होते हैं।
पदावनत .pull-rightसंरेखण
v3.1.0 से, हमने .pull-rightड्रॉपडाउन मेनू पर रोक लगा दी है। मेनू को राइट-एलाइन करने के लिए, उपयोग करें .dropdown-menu-right। नेवबार में दाएं-संरेखित एनएवी घटक मेनू को स्वचालित रूप से संरेखित करने के लिए इस वर्ग के मिश्रित संस्करण का उपयोग करते हैं। इसे ओवरराइड करने के लिए, उपयोग करें .dropdown-menu-left।
हेडर
किसी भी ड्रॉपडाउन मेनू में क्रियाओं के अनुभागों को लेबल करने के लिए एक शीर्षलेख जोड़ें।
बटन समूह के साथ एक पंक्ति में बटनों की एक श्रृंखला को एक साथ समूहित करें। हमारे बटन प्लगइन के साथ वैकल्पिक JavaScript रेडियो और चेकबॉक्स शैली व्यवहार जोड़ें ।
बटन समूहों में टूलटिप्स और पॉपओवर के लिए विशेष सेटिंग की आवश्यकता होती है
a में तत्वों पर टूलटिप्स या पॉपओवर का उपयोग करते समय .btn-group, आपको container: 'body'अवांछित दुष्प्रभावों से बचने के लिए विकल्प निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/या टूलटिप या पॉपओवर ट्रिगर होने पर इसके गोल कोनों को खो देता है)।
सही सुनिश्चित करें roleऔर एक लेबल प्रदान करें
सहायक तकनीकों के लिए - जैसे स्क्रीन रीडर - यह बताने के लिए कि बटनों की एक श्रृंखला समूहीकृत है, एक उपयुक्त roleविशेषता प्रदान करने की आवश्यकता है। बटन समूहों के लिए, यह होगा role="group", जबकि टूलबार में एक होना चाहिए role="toolbar"।
एक अपवाद वे समूह हैं जिनमें केवल एक ही नियंत्रण होता है (उदाहरण के लिए तत्वों के साथ उचित बटन समूह<button> ) या एक ड्रॉपडाउन।
इसके अलावा, समूहों और टूलबार को एक स्पष्ट लेबल दिया जाना चाहिए, क्योंकि अधिकांश सहायक प्रौद्योगिकियां सही roleविशेषता की उपस्थिति के बावजूद, अन्यथा उनकी घोषणा नहीं करेंगी। यहां दिए गए उदाहरणों में, हम उपयोग करते हैं aria-label, लेकिन विकल्प जैसे कि aria-labelledbyभी इस्तेमाल किया जा सकता है।
मूल उदाहरण
.btnके साथ बटनों की एक श्रृंखला लपेटें .btn-group.
बटन टूलबार
अधिक जटिल घटकों के लिए के सेट <div class="btn-group">को a में मिलाएं ।<div class="btn-toolbar">
आकार
समूह में प्रत्येक बटन पर बटन आकार देने वाली कक्षाएं लागू करने के बजाय, बस .btn-group-*प्रत्येक में जोड़ें .btn-group, जिसमें एकाधिक समूहों को नेस्ट करते समय भी शामिल है।
घोंसला करने की क्रिया
जब आप ड्रॉपडाउन मेनू को बटनों की एक श्रृंखला के साथ मिश्रित करना चाहते हैं, तो .btn-groupदूसरे के भीतर रखें ।.btn-group
अपने पैरेंट की पूरी चौड़ाई को फैलाने के लिए समान आकार में बटनों का एक समूह बनाएं। बटन समूह के भीतर बटन ड्रॉपडाउन के साथ भी काम करता है।
सीमाओं को संभालना
बटन (अर्थात्) को सही ठहराने के लिए उपयोग किए जाने वाले विशिष्ट HTML और CSS के कारण display: table-cell, उनके बीच की सीमाएँ दोगुनी हो जाती हैं। नियमित बटन समूहों में, margin-left: -1pxसीमाओं को हटाने के बजाय उन्हें ढेर करने के लिए उपयोग किया जाता है। हालांकि, marginके साथ काम नहीं करता है display: table-cell। परिणामस्वरूप, बूटस्ट्रैप के लिए आपके अनुकूलन के आधार पर, आप सीमाओं को हटाना या फिर से रंगना चाह सकते हैं।
IE8 और बॉर्डर
Internet Explorer 8 किसी उचित बटन समूह में बटनों पर बॉर्डर रेंडर नहीं करता, चाहे वह ऑन हो <a>या <button>एलिमेंट। उसके आसपास जाने के लिए, प्रत्येक बटन को दूसरे में लपेटें .btn-group।
यदि <a>तत्वों का उपयोग बटन के रूप में कार्य करने के लिए किया जाता है - वर्तमान पृष्ठ के भीतर किसी अन्य दस्तावेज़ या अनुभाग पर नेविगेट करने के बजाय, इन-पेज कार्यक्षमता को ट्रिगर करता है - तो उन्हें एक उपयुक्त role="button".
<button>तत्वों के साथ
<button>तत्वों के साथ उचित बटन समूहों का उपयोग करने के लिए , आपको प्रत्येक बटन को एक बटन समूह में लपेटना होगा । अधिकांश ब्राउज़र तत्वों के औचित्य के लिए हमारे सीएसएस को ठीक से लागू नहीं करते <button>हैं, लेकिन चूंकि हम बटन ड्रॉपडाउन का समर्थन करते हैं, हम उसके आसपास काम कर सकते हैं।
बटन ड्रॉपडाउन
ड्रॉपडाउन मेनू को एक के भीतर रखकर .btn-groupऔर उचित मेनू मार्कअप प्रदान करके ट्रिगर करने के लिए किसी भी बटन का उपयोग करें।
प्लगइन निर्भरता
बटन ड्रॉपडाउन के लिए ड्रॉपडाउन प्लगइन को आपके बूटस्ट्रैप के संस्करण में शामिल करने की आवश्यकता होती है।
सिंगल बटन ड्रॉपडाउन
कुछ बुनियादी मार्कअप परिवर्तनों के साथ एक बटन को ड्रॉपडाउन टॉगल में बदलें।
किसी भी टेक्स्ट-आधारित के पहले, बाद में, या दोनों तरफ टेक्स्ट या बटन जोड़कर फॉर्म नियंत्रण बढ़ाएं <input>। तत्वों को एक में जोड़ने या जोड़ने के लिए या के .input-groupसाथ प्रयोग करें ।.input-group-addon.input-group-btn.form-control
केवल पाठ्य <input>s
यहां तत्वों का उपयोग करने से बचें <select>क्योंकि वे वेबकिट ब्राउज़र में पूरी तरह से स्टाइल नहीं किए जा सकते हैं।
<textarea>यहां तत्वों का उपयोग करने से बचें क्योंकि rowsकुछ मामलों में उनकी विशेषता का सम्मान नहीं किया जाएगा।
इनपुट समूहों में टूलटिप्स और पॉपओवर के लिए विशेष सेटिंग की आवश्यकता होती है
किसी के भीतर तत्वों पर टूलटिप्स या पॉपओवर का उपयोग करते समय .input-group, आपको container: 'body'अवांछित दुष्प्रभावों से बचने के लिए विकल्प निर्दिष्ट करना होगा (जैसे कि तत्व व्यापक रूप से बढ़ रहा है और/या टूलटिप या पॉपओवर ट्रिगर होने पर इसके गोल कोनों को खोना)।
अन्य घटकों के साथ मिश्रण न करें
प्रपत्र समूहों या ग्रिड कॉलम कक्षाओं को सीधे इनपुट समूहों के साथ न मिलाएं। इसके बजाय, इनपुट समूह को प्रपत्र समूह या ग्रिड से संबंधित तत्व के अंदर नेस्ट करें।
हमेशा लेबल जोड़ें
यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। इन इनपुट समूहों के लिए, सुनिश्चित करें कि कोई भी अतिरिक्त लेबल या कार्यात्मकता सहायक तकनीकों को दी गई है।
उपयोग की जाने वाली सटीक तकनीक (दृश्यमान <label>तत्व, वर्ग <label>का उपयोग करके छिपे हुए तत्व , या , , , या विशेषता का उपयोग) और कौन सी अतिरिक्त जानकारी देने की आवश्यकता होगी, यह आपके द्वारा कार्यान्वित किए जा रहे इंटरफ़ेस विजेट के सटीक प्रकार के आधार पर अलग-अलग होगा। इस खंड के उदाहरण कुछ सुझाए गए, केस-विशिष्ट दृष्टिकोण प्रदान करते हैं।.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
मूल उदाहरण
इनपुट के दोनों ओर एक ऐड-ऑन या बटन रखें। आप इनपुट के दोनों किनारों पर एक को भी रख सकते हैं।
हम एक तरफ कई ऐड-ऑन ( .input-group-addonया ) का समर्थन नहीं करते हैं ।.input-group-btn
हम एक इनपुट समूह में एकाधिक प्रपत्र-नियंत्रणों का समर्थन नहीं करते हैं।
आकार
सापेक्ष रूप आकार देने वाली कक्षाओं को .input-groupस्वयं में जोड़ें और भीतर की सामग्री स्वचालित रूप से आकार बदल जाएगी - प्रत्येक तत्व पर प्रपत्र नियंत्रण आकार वर्गों को दोहराने की कोई आवश्यकता नहीं है।
चेकबॉक्स और रेडियो एडॉन्स
किसी भी चेकबॉक्स या रेडियो विकल्प को टेक्स्ट के बजाय इनपुट ग्रुप के ऐडऑन में रखें।
बटन ऐडऑन
इनपुट समूहों में बटन थोड़े अलग होते हैं और इसके लिए एक अतिरिक्त स्तर के नेस्टिंग की आवश्यकता होती है। इसके बजाय .input-group-addon, आपको .input-group-btnबटनों को लपेटने के लिए उपयोग करने की आवश्यकता होगी। डिफ़ॉल्ट ब्राउज़र शैलियों के कारण यह आवश्यक है जिसे ओवरराइड नहीं किया जा सकता है।
ड्रॉपडाउन वाले बटन
खंडित बटन
एकाधिक बटन
जबकि आपके पास प्रति पक्ष केवल एक ऐड-ऑन हो सकता है, आपके पास एक के अंदर कई बटन हो सकते हैं .input-group-btn।
एनएवी
बूटस्ट्रैप में उपलब्ध एनएवी ने मार्कअप साझा किया है, जो बेस .navक्लास के साथ-साथ साझा राज्यों से शुरू होता है। प्रत्येक शैली के बीच स्विच करने के लिए संशोधक वर्ग स्वैप करें।
टैब पैनल के लिए एनएवी का उपयोग करने के लिए जावास्क्रिप्ट टैब प्लगइन की आवश्यकता होती है
टैब करने योग्य क्षेत्रों वाले टैब के लिए, आपको टैब जावास्क्रिप्ट प्लगइन का उपयोग करना चाहिए । मार्कअप के लिए अतिरिक्त roleऔर ARIA विशेषताओं की भी आवश्यकता होगी - अधिक विवरण के लिए प्लगइन का उदाहरण मार्कअप देखें।
नेविगेशन के रूप में उपयोग किए जाने वाले एनएवी को सुलभ बनाएं
role="navigation"यदि आप नेविगेशन बार प्रदान करने के लिए एनएवी का उपयोग कर रहे हैं, तो सबसे तार्किक पैरेंट कंटेनर में जोड़ना सुनिश्चित करें , या संपूर्ण नेविगेशन के चारों ओर एक तत्व <ul>लपेटें । <nav>भूमिका को स्वयं में न जोड़ें <ul>, क्योंकि इससे सहायक तकनीकों द्वारा इसे वास्तविक सूची के रूप में घोषित किए जाने से रोका जा सकेगा।
टैब
ध्यान दें कि .nav-tabsकक्षा को .navबेस क्लास की आवश्यकता होती है।
768px से अधिक चौड़ी स्क्रीन पर .nav-justified. छोटी स्क्रीन पर, एनएवी लिंक स्टैक्ड होते हैं।
उचित नेवबार एनएवी लिंक वर्तमान में समर्थित नहीं हैं।
सफारी और उत्तरदायी न्यायोचित एनएवीएस
v9.1.2 के अनुसार, सफारी एक बग प्रदर्शित करता है जिसमें आपके ब्राउज़र को क्षैतिज रूप से आकार देने से उचित एनएवी में रेंडरिंग त्रुटियां होती हैं जो ताज़ा होने पर साफ़ हो जाती हैं। यह बग उचित एनएवी उदाहरण में भी दिखाया गया है ।
Navbars प्रतिक्रियाशील मेटा घटक हैं जो आपके एप्लिकेशन या साइट के लिए नेविगेशन हेडर के रूप में कार्य करते हैं। वे मोबाइल दृश्यों में ढहने लगते हैं (और टॉगल करने योग्य होते हैं) और उपलब्ध व्यूपोर्ट की चौड़ाई बढ़ने पर क्षैतिज हो जाते हैं।
उचित नेवबार एनएवी लिंक वर्तमान में समर्थित नहीं हैं।
अतिप्रवाह सामग्री
चूंकि बूटस्ट्रैप को यह नहीं पता है कि आपके नेवबार में सामग्री को कितनी जगह चाहिए, इसलिए आपको दूसरी पंक्ति में सामग्री लपेटने में समस्या आ सकती है। इसे हल करने के लिए, आप यह कर सकते हैं:
उस बिंदु को बदलें जिस पर आपका नेवबार संक्षिप्त और क्षैतिज मोड के बीच स्विच करता है। वेरिएबल को अनुकूलित करें @grid-float-breakpointया अपनी खुद की मीडिया क्वेरी जोड़ें।
जावास्क्रिप्ट प्लगइन की आवश्यकता है
यदि जावास्क्रिप्ट अक्षम है और व्यूपोर्ट इतना संकीर्ण है कि नेवबार ढह जाता है, तो नेवबार का विस्तार करना और सामग्री को के भीतर देखना असंभव होगा .navbar-collapse।
जब व्यूपोर्ट की तुलना में संकरा होता है, तो नेवबार अपने लंबवत मोबाइल दृश्य में ढह जाता है @grid-float-breakpoint, और जब व्यूपोर्ट कम से कम @grid-float-breakpointचौड़ाई में होता है, तो यह अपने क्षैतिज गैर-मोबाइल दृश्य में फैल जाता है। नावबार के ढहने/विस्तार होने पर नियंत्रित करने के लिए इस चर को कम स्रोत में समायोजित करें। डिफ़ॉल्ट मान है 768px(सबसे छोटा "छोटा" या "टैबलेट" स्क्रीन)।
नेवबार को सुलभ बनाएं
किसी तत्व का उपयोग करना सुनिश्चित करें <nav>या, यदि a जैसे अधिक सामान्य तत्व का उपयोग कर रहे हैं, तो सहायक तकनीकों के उपयोगकर्ताओं के लिए इसे एक ऐतिहासिक क्षेत्र के रूप में स्पष्ट रूप से पहचानने के लिए प्रत्येक नेवबार में <div>जोड़ें ।role="navigation"
ब्रांड छवि
नेवबार ब्रांड को एक के लिए टेक्स्ट को स्वैप करके अपनी छवि से बदलें <img>। चूंकि .navbar-brandइसकी अपनी पैडिंग और ऊंचाई है, इसलिए आपको अपनी छवि के आधार पर कुछ सीएसएस को ओवरराइड करने की आवश्यकता हो सकती है।
फार्म
.navbar-formउचित ऊर्ध्वाधर संरेखण और संकीर्ण व्यूपोर्ट में संक्षिप्त व्यवहार के लिए प्रपत्र सामग्री को अंदर रखें । यह तय करने के लिए संरेखण विकल्पों का उपयोग करें कि यह नेवबार सामग्री के भीतर कहाँ रहता है।
एक प्रमुख के रूप में, .navbar-formअपने अधिकांश कोड .form-inlineको मिक्सिन के माध्यम से साझा करता है। कुछ प्रपत्र नियंत्रण, जैसे इनपुट समूह, को नेवबार में ठीक से दिखाने के लिए निश्चित चौड़ाई की आवश्यकता हो सकती है।
यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। .sr-onlyइन इनलाइन प्रपत्रों के लिए, आप कक्षा का उपयोग करके लेबल छिपा सकते हैं । सहायक तकनीकों के लिए लेबल प्रदान करने के और भी वैकल्पिक तरीके हैं, जैसे aria-label, aria-labelledbyया titleविशेषता। यदि इनमें से कोई भी मौजूद नहीं है, तो स्क्रीन रीडर मौजूद होने पर placeholderविशेषता का उपयोग करने का सहारा ले सकते हैं, लेकिन ध्यान दें कि placeholderअन्य लेबलिंग विधियों के प्रतिस्थापन के रूप में उपयोग की सलाह नहीं दी जाती है।
बटन
.navbar-btnकक्षा को उन <button>तत्वों में जोड़ें जो a में नहीं रहते <form>हैं उन्हें नेवबार में लंबवत रूप से केन्द्रित करें।
प्रसंग-विशिष्ट उपयोग
मानक बटन वर्गों की तरह , पर और तत्वों .navbar-btnका उपयोग किया जा सकता है । हालांकि, न तो और न ही मानक बटन वर्गों का उपयोग .<a><input>.navbar-btn<a>.navbar-nav
मूलपाठ
किसी तत्व में टेक्स्ट के तार लपेटें .navbar-text, आमतौर पर <p>उचित अग्रणी और रंग के लिए टैग पर।
गैर-एनएवी लिंक
मानक लिंक का उपयोग करने वाले लोगों के लिए जो नियमित नेवबार नेविगेशन घटक के भीतर नहीं हैं, .navbar-linkडिफ़ॉल्ट और उलटा नेवबार विकल्पों के लिए उचित रंग जोड़ने के लिए कक्षा का उपयोग करें।
घटक संरेखण
.navbar-leftया .navbar-rightयूटिलिटी क्लासेस का उपयोग करके एनएवी लिंक, फॉर्म, बटन या टेक्स्ट को संरेखित करें । दोनों वर्ग निर्दिष्ट दिशा में एक सीएसएस फ्लोट जोड़ देंगे। उदाहरण के लिए, एनएवी लिंक को संरेखित करने के लिए, उन्हें <ul>लागू किए गए संबंधित उपयोगिता वर्ग के साथ एक अलग में रखें।
ये वर्ग और के मिश्रित-संस्करण संस्करण हैं .pull-left, .pull-rightलेकिन डिवाइस आकार में नेवबार घटकों के आसान प्रबंधन के लिए मीडिया प्रश्नों के दायरे में हैं।
एकाधिक घटकों को सही संरेखित करना
नेवबार की वर्तमान में कई .navbar-rightकक्षाओं के साथ एक सीमा है। .navbar-rightसामग्री को ठीक से स्थान देने के लिए, हम अंतिम तत्व पर नकारात्मक मार्जिन का उपयोग करते हैं । जब उस वर्ग का उपयोग करने वाले कई तत्व होते हैं, तो ये हाशिये इरादे के अनुसार काम नहीं करते हैं।
हम इस पर फिर से विचार करेंगे जब हम उस घटक को v4 में फिर से लिख सकते हैं।
शीर्ष पर स्थिर
एक या केंद्र और पैड नेवबार सामग्री जोड़ें .navbar-fixed-topऔर शामिल करें।.container.container-fluid
बॉडी पैडिंग आवश्यक
फिक्स्ड नेवबार आपकी अन्य सामग्री को तब तक ओवरले करेगा, जब तक कि आप paddingके शीर्ष पर नहीं जोड़ते <body>। अपने स्वयं के मूल्यों को आज़माएं या नीचे दिए गए हमारे स्निपेट का उपयोग करें। युक्ति: डिफ़ॉल्ट रूप से, नेवबार 50px ऊँचा होता है।
कोर बूटस्ट्रैप सीएसएस के बाद इसे शामिल करना सुनिश्चित करें ।
नीचे से निश्चित
एक या केंद्र और पैड नेवबार सामग्री जोड़ें .navbar-fixed-bottomऔर शामिल करें।.container.container-fluid
बॉडी पैडिंग आवश्यक
paddingस्थिर नावबार आपकी अन्य सामग्री को तब तक ओवरले करेगा, जब तक कि आप <body>. अपने स्वयं के मूल्यों को आज़माएं या नीचे दिए गए हमारे स्निपेट का उपयोग करें। युक्ति: डिफ़ॉल्ट रूप से, नेवबार 50px ऊँचा होता है।
कोर बूटस्ट्रैप सीएसएस के बाद इसे शामिल करना सुनिश्चित करें ।
स्थिर शीर्ष
एक पूर्ण-चौड़ाई वाला नेवबार बनाएं जो एक या केंद्र और पैड नेवबार सामग्री को जोड़कर .navbar-static-topऔर शामिल करके पृष्ठ के साथ स्क्रॉल करता है।.container.container-fluid
कक्षाओं के विपरीत .navbar-fixed-*, आपको किसी भी पैडिंग को बदलने की आवश्यकता नहीं है body।
उलटा नवबार
नेवबार के रूप को जोड़कर संशोधित करें .navbar-inverse।
ब्रेडक्रम्ब्स
एक नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ का स्थान इंगित करें।
:beforeसीएसएस में और के माध्यम से विभाजक स्वचालित रूप से जोड़े जाते हैं content।
Rdio से प्रेरित सरल पृष्ठ पर अंक लगाना, ऐप्स और खोज परिणामों के लिए बढ़िया। बड़े ब्लॉक को याद करना मुश्किल है, आसानी से स्केलेबल है, और बड़े क्लिक क्षेत्र प्रदान करता है।
पेजिनेशन घटक को लेबल करना
पेजिनेशन घटक को एक तत्व में लपेटा जाना चाहिए ताकि <nav>इसे पाठकों और अन्य सहायक तकनीकों को स्क्रीन करने के लिए नेविगेशन अनुभाग के रूप में पहचाना जा सके। इसके अलावा, चूंकि एक पृष्ठ में पहले से ही एक से अधिक ऐसे नेविगेशन अनुभाग होने की संभावना है (जैसे कि हेडर में प्राथमिक नेविगेशन, या साइडबार नेविगेशन), इसके लिए एक वर्णनात्मक प्रदान करना उचित है aria-labelजो <nav>इसके उद्देश्य को दर्शाता है। उदाहरण के लिए, यदि खोज परिणामों के एक समूह के बीच नेविगेट करने के लिए पृष्ठ पर अंक लगाना घटक का उपयोग किया जाता है, तो एक उपयुक्त लेबल हो सकता है aria-label="Search results pages"।
अक्षम और सक्रिय राज्य
लिंक विभिन्न परिस्थितियों के लिए अनुकूलन योग्य हैं। .disabledक्लिक न करने योग्य लिंक के लिए और .activeवर्तमान पृष्ठ को इंगित करने के लिए उपयोग करें ।
हम अनुशंसा करते हैं कि आप सक्रिय या अक्षम एंकरों की अदला-बदली <span>करें, या पिछले/अगले तीरों के मामले में एंकर को छोड़ दें, ताकि इच्छित शैलियों को बनाए रखते हुए क्लिक कार्यक्षमता को हटाया जा सके।
आकार
फैंसी बड़ा या छोटा पेजिनेशन? जोड़ें .pagination-lgया .pagination-smअतिरिक्त आकार के लिए।
पेजर
लाइट मार्कअप और स्टाइल के साथ सरल पेजिनेशन कार्यान्वयन के लिए त्वरित पिछले और अगले लिंक। यह ब्लॉग या पत्रिकाओं जैसी साधारण साइटों के लिए बहुत अच्छा है।
डिफ़ॉल्ट उदाहरण
डिफ़ॉल्ट रूप से, पेजर केंद्र लिंक करता है।
संरेखित लिंक
वैकल्पिक रूप से, आप प्रत्येक लिंक को पक्षों से संरेखित कर सकते हैं:
वैकल्पिक अक्षम अवस्था
पेजर लिंक पेजिनेशन से सामान्य .disabledउपयोगिता वर्ग का भी उपयोग करते हैं।
लेबल
उदाहरण
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उपलब्ध विविधताएं
किसी लेबल का स्वरूप बदलने के लिए नीचे दिए गए किसी भी संशोधक वर्ग को जोड़ें।
डिफ़ॉल्ट प्राथमिक सफलता जानकारी चेतावनी खतरा
बहुत सारे लेबल हैं?
जब आपके पास एक संकीर्ण कंटेनर में दर्जनों इनलाइन लेबल होते हैं, तो प्रत्येक का अपना inline-blockतत्व (एक आइकन की तरह) होता है, तो रेंडरिंग समस्याएं उत्पन्न हो सकती हैं। इसके चारों ओर रास्ता तय हो रहा है display: inline-block;। संदर्भ और उदाहरण के लिए #13219 देखें ।
बैज
<span class="badge">लिंक, बूटस्ट्रैप एनएवी, और बहुत कुछ जोड़कर नए या अपठित आइटम को आसानी से हाइलाइट करें।
जंबोट्रॉन को पूरी चौड़ाई और बिना गोल कोनों के बनाने के लिए, इसे सभी के बाहर रखें .containerऔर इसके बजाय एक .containerअंदर जोड़ें।
पेज हैडर
h1किसी पृष्ठ पर सामग्री के अनुभागों को उचित रूप से स्थान देने और खंडित करने के लिए एक सरल शेल । यह के h1डिफ़ॉल्ट smallतत्व के साथ-साथ अधिकांश अन्य घटकों (अतिरिक्त शैलियों के साथ) का उपयोग कर सकता है।
उदाहरण पेज हेडर हेडर के लिए सबटेक्स्ट
थंबनेल
छवियों, वीडियो, टेक्स्ट आदि के ग्रिड को आसानी से प्रदर्शित करने के लिए थंबनेल घटक के साथ बूटस्ट्रैप के ग्रिड सिस्टम का विस्तार करें।
डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल न्यूनतम आवश्यक मार्कअप के साथ लिंक की गई छवियों को प्रदर्शित करने के लिए डिज़ाइन किए गए हैं।
प्रचलित सामग्री
थोड़े अतिरिक्त मार्कअप के साथ, थंबनेल में किसी भी प्रकार की HTML सामग्री जैसे शीर्षक, पैराग्राफ या बटन जोड़ना संभव है।
थंबनेल लेबल
क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
मुट्ठी भर उपलब्ध और लचीले अलर्ट संदेशों के साथ विशिष्ट उपयोगकर्ता कार्रवाइयों के लिए प्रासंगिक प्रतिक्रिया संदेश प्रदान करें।
उदाहरण
बुनियादी अलर्ट संदेशों .alertके लिए चार प्रासंगिक वर्गों (जैसे, ) में से कोई भी टेक्स्ट और एक वैकल्पिक खारिज करें बटन लपेटें ।.alert-success
कोई डिफ़ॉल्ट वर्ग नहीं
अलर्ट में डिफ़ॉल्ट कक्षाएं नहीं होती हैं, केवल आधार और संशोधक वर्ग होते हैं। एक डिफ़ॉल्ट ग्रे अलर्ट बहुत अधिक समझ में नहीं आता है, इसलिए आपको प्रासंगिक वर्ग के माध्यम से एक प्रकार निर्दिष्ट करना होगा। सफलता, जानकारी, चेतावनी या खतरे में से चुनें।
बहुत बढ़िया! आपने इस महत्वपूर्ण चेतावनी संदेश को सफलतापूर्वक पढ़ लिया है।
सचेत! इस अलर्ट पर आपके ध्यान की आवश्यकता है, लेकिन यह अति महत्वपूर्ण नहीं है।
चेतावनी! बेहतर होगा कि आप खुद को चेक करें, आप बहुत अच्छे नहीं लग रहे हैं।
ओह तस्वीर! कुछ चीज़ें बदलें और फिर से सबमिट करने का प्रयास करें।
खारिज करने योग्य अलर्ट
.alert-dismissibleवैकल्पिक और बंद करें बटन जोड़कर किसी भी अलर्ट पर निर्माण करें।
जावास्क्रिप्ट अलर्ट प्लगइन की आवश्यकता है
पूरी तरह से कार्य करने के लिए, खारिज करने योग्य अलर्ट के लिए, आपको अलर्ट जावास्क्रिप्ट प्लगइन का उपयोग करना चाहिए ।
चेतावनी! बेहतर होगा कि आप खुद को चेक करें, आप बहुत अच्छे नहीं लग रहे हैं।
सभी उपकरणों पर उचित व्यवहार सुनिश्चित करें
डेटा विशेषता वाले <button>तत्व का उपयोग करना सुनिश्चित करें ।data-dismiss="alert"
अलर्ट में लिंक
.alert-linkकिसी भी अलर्ट में मिलते-जुलते रंगीन लिंक शीघ्रता से उपलब्ध कराने के लिए उपयोगिता वर्ग का उपयोग करें ।
ओह तस्वीर! कुछ चीज़ें बदलें और फिर से सबमिट करने का प्रयास करें।
प्रगति पट्टी
सरल लेकिन लचीली प्रगति पट्टियों के साथ वर्कफ़्लो या क्रिया की प्रगति पर अप-टू-डेट फ़ीडबैक प्रदान करें।
क्रॉस-ब्राउज़र संगतता
प्रोग्रेस बार अपने कुछ प्रभावों को प्राप्त करने के लिए CSS3 के संक्रमण और एनिमेशन का उपयोग करते हैं। ये सुविधाएँ Internet Explorer 9 और Firefox के पुराने या पुराने संस्करणों में समर्थित नहीं हैं। ओपेरा 12 एनिमेशन का समर्थन नहीं करता है।
सामग्री सुरक्षा नीति (सीएसपी) संगतता
यदि आपकी वेबसाइट की सामग्री सुरक्षा नीति (सीएसपी) है जो अनुमति नहीं देती है style-src 'unsafe-inline', तो आप प्रगति बार की चौड़ाई निर्धारित करने के लिए इनलाइन विशेषताओं का उपयोग करने में सक्षम नहीं होंगे styleजैसा कि नीचे हमारे उदाहरणों में दिखाया गया है। सख्त सीएसपी के साथ संगत चौड़ाई निर्धारित करने के वैकल्पिक तरीकों में थोड़ा कस्टम जावास्क्रिप्ट (जो सेट करता है element.style.width) या कस्टम सीएसएस कक्षाओं का उपयोग करना शामिल है।
मूल उदाहरण
डिफ़ॉल्ट प्रगति पट्टी।
60% पूर्ण
लेबल के साथ
दृश्यमान प्रतिशत दिखाने के लिए प्रगति पट्टी के भीतर से वर्ग को <span>हटा दें ।.sr-only
60%
यह सुनिश्चित करने के लिए कि लेबल टेक्स्ट कम प्रतिशत के लिए भी सुपाठ्य रहता min-widthहै, प्रगति बार में एक जोड़ने पर विचार करें।
0%
2%
प्रासंगिक विकल्प
प्रोग्रेस बार एक ही बटन का उपयोग करते हैं और सुसंगत शैलियों के लिए अलर्ट क्लासेस का उपयोग करते हैं।
40% पूर्ण (सफलता)
20% पूर्ण
60% पूर्ण (चेतावनी)
80% पूर्ण (खतरा)
धारीदार
धारीदार प्रभाव बनाने के लिए ढाल का उपयोग करता है। IE9 और नीचे में उपलब्ध नहीं है।
40% पूर्ण (सफलता)
20% पूर्ण
60% पूर्ण (चेतावनी)
80% पूर्ण (खतरा)
एनिमेटेड
धारियों को दाएं से बाएं चेतन .activeकरने के लिए जोड़ें । .progress-bar-stripedIE9 और नीचे में उपलब्ध नहीं है।
45% पूर्ण
स्टैक्ड
.progressउन्हें ढेर करने के लिए एक ही में कई बार रखें ।
35% पूर्ण (सफलता)
20% पूर्ण (चेतावनी)
10% पूर्ण (खतरा)
मीडिया वस्तु
विभिन्न प्रकार के घटकों (जैसे ब्लॉग टिप्पणियाँ, ट्वीट्स, आदि) के निर्माण के लिए सार वस्तु शैलियाँ जो पाठ्य सामग्री के साथ एक बाएँ या दाएँ-संरेखित छवि पेश करती हैं।
डिफ़ॉल्ट मीडिया
डिफ़ॉल्ट मीडिया सामग्री ब्लॉक के बाईं या दाईं ओर एक मीडिया ऑब्जेक्ट (छवियां, वीडियो, ऑडियो) प्रदर्शित करता है।
कक्षाएं .pull-leftऔर .pull-rightभी मौजूद हैं और पहले मीडिया घटक के हिस्से के रूप में उपयोग की जाती थीं, लेकिन उस उपयोग के लिए v3.3.0 के रूप में बहिष्कृत हैं। वे लगभग .media-leftऔर के बराबर हैं .media-right, सिवाय इसके कि html के .media-rightबाद रखा जाना चाहिए ।.media-body
मीडिया संरेखण
छवियों या अन्य मीडिया को ऊपर, मध्य या नीचे संरेखित किया जा सकता है। डिफ़ॉल्ट शीर्ष संरेखित है।
सूची समूह न केवल सरल तत्वों की सूची प्रदर्शित करने के लिए एक लचीला और शक्तिशाली घटक हैं, बल्कि कस्टम सामग्री वाले जटिल भी हैं।
मूल उदाहरण
सबसे बुनियादी सूची समूह सूची वस्तुओं और उचित वर्गों के साथ एक अनियंत्रित सूची है। इसके बाद आने वाले विकल्पों या आवश्यकतानुसार अपने स्वयं के सीएसएस के साथ इसका निर्माण करें।
क्रैस जस्टो ओडियो
दापीबस एसी सुविधा
मोरबी लियो रिसुस
पोर्टा एसी कॉन्सेक्टेटूर एसी
वेस्टिबुलम और एरोसी
बैज
किसी भी सूची समूह आइटम में बैज घटक जोड़ें और यह स्वचालित रूप से दाईं ओर स्थित हो जाएगा।
14क्रैस जस्टो ओडियो
2दापीबस एसी सुविधा
1मोरबी लियो रिसुस
लिंक्ड आइटम
सूची आइटम के बजाय एंकर टैग का उपयोग करके सूची समूह आइटम को लिंक करें (जिसका अर्थ है माता-पिता <div>के बजाय एक <ul>)। प्रत्येक तत्व के आसपास अलग-अलग माता-पिता की आवश्यकता नहीं है।
सूची समूह आइटम सूची आइटम के बजाय बटन हो सकते हैं (जिसका अर्थ है माता-पिता <div>के बजाय एक <ul>)। प्रत्येक तत्व के आसपास अलग-अलग माता-पिता की आवश्यकता नहीं है। यहां मानक कक्षाओं का उपयोग न करें।.btn
अक्षम आइटम
अक्षम दिखने के लिए इसे धूसर करने के .disabledलिए a में जोड़ें ..list-group-item
जबकि हमेशा जरूरी नहीं, कभी-कभी आपको अपना डोम एक बॉक्स में रखना होगा। उन स्थितियों के लिए, पैनल घटक का प्रयास करें।
मूल उदाहरण
डिफ़ॉल्ट रूप से, सभी .panelकुछ सामग्री को शामिल करने के लिए कुछ बुनियादी सीमा और पैडिंग लागू करते हैं।
मूल पैनल उदाहरण
शीर्षक वाला पैनल
के साथ अपने पैनल में आसानी से एक शीर्षक कंटेनर जोड़ें .panel-heading। प्री-स्टाइल हेडिंग जोड़ने के लिए आप कोई भी <h1>- क्लास के <h6>साथ शामिल कर सकते हैं। .panel-titleहालाँकि, <h1>- के फ़ॉन्ट आकार को <h6>द्वारा ओवरराइड किया जाता है .panel-heading।
उचित लिंक कलरिंग के लिए, शीर्षकों में लिंक्स को के भीतर रखना सुनिश्चित करें .panel-title।
शीर्षक के बिना पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पादलेख वाला पैनल
रैप बटन या सेकेंडरी टेक्स्ट में .panel-footer. ध्यान दें कि प्रासंगिक विविधताओं का उपयोग करते समय पैनल फ़ुटर रंगों और सीमाओं को विरासत में नहीं लेते हैं क्योंकि वे अग्रभूमि में होने के लिए नहीं होते हैं।
पैनल सामग्री
प्रासंगिक विकल्प
अन्य घटकों की तरह, किसी भी प्रासंगिक राज्य वर्ग को जोड़कर आसानी से एक विशेष संदर्भ के लिए एक पैनल को अधिक सार्थक बनाते हैं।
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
टेबल के साथ
.tableएक निर्बाध डिज़ाइन के लिए पैनल के भीतर कोई भी गैर-बॉर्डर जोड़ें । यदि कोई है .panel-body, तो हम पृथक्करण के लिए तालिका के शीर्ष पर एक अतिरिक्त बॉर्डर जोड़ते हैं।
पैनल शीर्षक
कुछ डिफ़ॉल्ट पैनल सामग्री यहाँ। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। ऐनीन लैकिनिया बिबेंडम नाला सेड कॉन्सेक्टेटूर। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम। Nullam id dolor id nibh ultricies vehicula ut id elit.
#
पहला नाम
उपनाम
उपयोगकर्ता नाम
1
निशान
ओटो
@mdo
2
याकूब
थार्नटन
@मोटा
3
लैरी
पक्षी
@ट्विटर
यदि कोई पैनल बॉडी नहीं है, तो घटक बिना किसी रुकावट के पैनल हेडर से टेबल पर चला जाता है।
कुछ डिफ़ॉल्ट पैनल सामग्री यहाँ। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। ऐनीन लैकिनिया बिबेंडम नाला सेड कॉन्सेक्टेटूर। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम। Nullam id dolor id nibh ultricies vehicula ut id elit.
क्रैस जस्टो ओडियो
दापीबस एसी सुविधा
मोरबी लियो रिसुस
पोर्टा एसी कॉन्सेक्टेटूर एसी
वेस्टिबुलम और एरोसी
उत्तरदायी एम्बेड
ब्राउज़रों को एक आंतरिक अनुपात बनाकर वीडियो या स्लाइड शो आयामों को उनके युक्त ब्लॉक की चौड़ाई के आधार पर निर्धारित करने की अनुमति दें जो किसी भी डिवाइस पर ठीक से स्केल करेगा।
नियम सीधे <iframe>, <embed>, <video>, और <object>तत्वों पर लागू होते हैं; वैकल्पिक रूप से एक स्पष्ट वंश वर्ग का उपयोग करें .embed-responsive-itemजब आप अन्य विशेषताओं के लिए स्टाइल से मेल खाना चाहते हैं।
प्रो टिप! frameborder="0"आपको अपने s में शामिल करने की आवश्यकता नहीं है <iframe>क्योंकि हम इसे आपके लिए ओवरराइड करते हैं।
वेल्स
डिफ़ॉल्ट अच्छी तरह से
किसी तत्व को इनसेट प्रभाव देने के लिए कुएं के साथ-साथ एक साधारण प्रभाव का उपयोग करें।
देखो, मैं कुएँ में हूँ!
वैकल्पिक कक्षाएं
दो वैकल्पिक संशोधक वर्गों के साथ पैडिंग और गोल कोनों को नियंत्रित करें।