ग्लिफ़िकन्स

उपलब्ध ग्लिफ़

ग्लिफ़िकॉन हाफलिंग्स सेट से फ़ॉन्ट प्रारूप में 250 से अधिक ग्लिफ़ शामिल हैं। Glyphicons Halflings आमतौर पर मुफ्त में उपलब्ध नहीं होते हैं, लेकिन उनके निर्माता ने उन्हें बूटस्ट्रैप के लिए मुफ्त में उपलब्ध कराया है। धन्यवाद के रूप में, हम केवल यह कहते हैं कि आप जब भी संभव हो Glyphicons के लिए एक लिंक शामिल करें।

  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लस
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-यूरो
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-लिफ़ाफ़ा
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पेंसिल
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ग्लास
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-हार्ट
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टार-रिक्त
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़िल्म
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-वें-बड़े
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-वें-सूची
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-निकालें
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ज़ूम-इन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ज़ूम-आउट
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-रोड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-डाउनलोड-alt
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-डाउनलोड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-अपलोड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-इनबॉक्स
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-प्ले-सर्कल
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-रिफ्रेश
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-हेडफ़ोन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-ऑफ़
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-डाउन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-वॉल्यूम-अप
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-बारकोड
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-बुकमार्क
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-प्रिंट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-कैमरा
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-ऊंचाई
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-चौड़ाई
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-इंडेंट-राइट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फेसटाइम-वीडियो
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मैप-मार्कर
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टेप-बैकवर्ड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-तेज़-पिछड़े
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़ास्ट-फ़ॉरवर्ड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-स्टेप-फ़ॉरवर्ड
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-लेफ्ट
  • ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-राइट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लस-साइन
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-निकालें-चिह्न
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-प्रश्न-चिह्न
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-स्क्रीनशॉट
  • ग्लिफ़कॉन ग्लिफ़िकॉन-निकालें-सर्कल
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ओके-सर्कल
  • ग्लिफ़कॉन ग्लिफ़कॉन-प्रतिबंध-सर्कल
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-लेफ्ट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-राइट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-अप
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एरो-डाउन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-आकार-छोटा
  • ग्लिफ़िकॉन ग्लिफ़िकॉन विस्मयादिबोधक चिह्न
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-आई-ओपन
  • ग्लिफ़कॉन ग्लिफ़िकॉन-आई-क्लोज़
  • ग्लिफ़कॉन ग्लिफ़िकॉन-चेतावनी-चिह्न
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-प्लेन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-यादृच्छिक
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-चुंबक
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-शेवरॉन-अप
  • ग्लिफ़कॉन ग्लिफ़िकॉन-शेवरॉन-डाउन
  • ग्लिफ़िकॉन
  • ग्लिफ़कॉन ग्लिफ़कॉन-शॉपिंग-कार्ट
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़कॉन-फ़ोल्डर-ओपन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-आकार-क्षैतिज
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़कॉन-हाथ-दाएँ
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-हाथ-बाएँ
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-हैंड-अप
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-हैंड-डाउन
  • ग्लिफ़िकॉन ग्लिफ़कॉन-सर्कल-एरो-राइट
  • ग्लिफ़िकॉन ग्लिफ़कॉन-सर्कल-एरो-लेफ्ट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सर्कल-एरो-अप
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सर्कल-एरो-डाउन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-रिंच
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़िल्टर
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ब्रीफ़केस
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़ुलस्क्रीन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-डैशबोर्ड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पेपरक्लिप
  • ग्लिफ़िकॉन ग्लिफ़कॉन-दिल-रिक्त
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सॉर्ट-बाय-अल्फ़ाबेट
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-क्रम
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-क्रम-alt
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सॉर्ट-बाय-एट्रिब्यूट्स
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रम-दर-विशेषताएँ-alt
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-अनचेक
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लैश
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-लॉग-आउट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-नई-विंडो
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-रिकॉर्ड
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ओपन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सेव्ड
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-निर्यात
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-भेजें
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-डिस्क
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-सेव्ड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-निकालें
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-फ़्लॉपी-सेव
  • ग्लिफ़कॉन ग्लिफ़िकॉन-फ़्लॉपी-ओपन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्रेडिट-कार्ड
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-कटलरी
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-संपीड़ित
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-इयरफ़ोन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-टॉवर
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एसडी-वीडियो
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-एचडी-वीडियो
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-उपशीर्षक
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-स्टीरियो
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-डॉल्बी
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-5-1
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-6-1
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ध्वनि-7-1
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-कॉपीराइट-चिह्न
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पंजीकरण-चिह्न
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड-डाउनलोड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-क्लाउड-अपलोड
  • ग्लिफ़िकॉन ग्लिफ़कॉन-ट्री-शंकुधारी
  • ग्लिफ़िकॉन ग्लिफ़कॉन-पेड़-पर्णपाती
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सीडी
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सेव-फ़ाइल
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ओपन-फ़ाइल
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पेस्ट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-अलर्ट
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-बिशप
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ब्लैकबोर्ड
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-बिस्तर
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सेब
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ऑवरग्लास
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-लैंप
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पिगी-बैंक
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-कैंची
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-बिटकॉइन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-येन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-आइस-लॉली
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-विकल्प-क्षैतिज
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-विकल्प-ऊर्ध्वाधर
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-हैमबर्गर
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मोडल-विंडो
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-धूप का चश्मा
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-रंग
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-पाठ-पृष्ठभूमि
  • ग्लिफ़कॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-टॉप
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़कॉन-ऑब्जेक्ट-संरेखण-क्षैतिज
  • ग्लिफ़िकॉन ग्लिफ़कॉन-ऑब्जेक्ट-एलाइन-लेफ्ट
  • ग्लिफ़कॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-वर्टिकल
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-ऑब्जेक्ट-एलाइन-राइट
  • ग्लिफ़िकॉन ग्लिफ़कॉन-त्रिकोण-दाएं
  • ग्लिफ़िकॉन ग्लिफ़कॉन-त्रिकोण-बाएं
  • ग्लिफ़कॉन ग्लिफ़िकॉन-त्रिकोण-नीचे
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सुपरस्क्रिप्ट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-सबस्क्रिप्ट
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-बाएं
  • ग्लिफ़िकॉन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-डाउन
  • ग्लिफ़िकॉन ग्लिफ़िकॉन-मेनू-अप

कैसे इस्तेमाल करे

प्रदर्शन कारणों से, सभी आइकनों को एक बेस क्लास और अलग-अलग आइकन क्लास की आवश्यकता होती है। उपयोग करने के लिए, निम्न कोड को लगभग कहीं भी रखें। उचित पैडिंग के लिए आइकन और टेक्स्ट के बीच एक स्थान छोड़ना सुनिश्चित करें।

अन्य घटकों के साथ मिश्रण न करें

चिह्न वर्गों को सीधे अन्य घटकों के साथ नहीं जोड़ा जा सकता है। उन्हें एक ही तत्व पर अन्य वर्गों के साथ प्रयोग नहीं किया जाना चाहिए। इसके बजाय, एक नेस्टेड जोड़ें <span>और आइकन क्लासेस को <span>.

केवल खाली तत्वों पर उपयोग के लिए

चिह्न वर्गों का उपयोग केवल उन तत्वों पर किया जाना चाहिए जिनमें कोई पाठ्य सामग्री नहीं है और कोई बाल तत्व नहीं है।

आइकन फ़ॉन्ट स्थान बदलना

../fonts/बूटस्ट्रैप मानता है कि संकलित सीएसएस फ़ाइलों के सापेक्ष आइकन फ़ॉन्ट फ़ाइलें निर्देशिका में स्थित होंगी । उन फ़ॉन्ट फ़ाइलों को स्थानांतरित करने या उनका नाम बदलने का अर्थ है सीएसएस को तीन तरीकों में से एक में अपडेट करना:

  • स्रोत कम फ़ाइलों में @icon-font-pathऔर/या चर बदलें ।@icon-font-name
  • कम कंपाइलर द्वारा प्रदान किए गए सापेक्ष URL विकल्प का उपयोग करें ।
  • url()संकलित सीएसएस में पथ बदलें ।

अपने विशिष्ट विकास सेटअप के लिए सबसे उपयुक्त विकल्प का उपयोग करें।

सुलभ चिह्न

सहायक तकनीकों के आधुनिक संस्करण सीएसएस द्वारा उत्पन्न सामग्री, साथ ही विशिष्ट यूनिकोड वर्णों की घोषणा करेंगे। स्क्रीन रीडर में अनपेक्षित और भ्रमित करने वाले आउटपुट से बचने के लिए (विशेषकर जब आइकन पूरी तरह से सजावट के लिए उपयोग किए जाते हैं), हम उन्हें aria-hidden="true"विशेषता के साथ छिपाते हैं।

यदि आप अर्थ को व्यक्त करने के लिए आइकन का उपयोग कर रहे हैं (केवल एक सजावटी तत्व के रूप में नहीं), तो सुनिश्चित करें कि यह अर्थ सहायक तकनीकों को भी बताया गया है - उदाहरण के लिए, .sr-onlyकक्षा के साथ दृष्टिगत रूप से छिपी हुई अतिरिक्त सामग्री शामिल करें।

यदि आप बिना किसी अन्य पाठ के नियंत्रण बना रहे हैं (जैसे <button>कि जिसमें केवल एक आइकन होता है), तो आपको नियंत्रण के उद्देश्य की पहचान करने के लिए हमेशा वैकल्पिक सामग्री प्रदान करनी चाहिए, ताकि यह सहायक तकनीकों के उपयोगकर्ताओं के लिए समझ में आए। इस मामले में, आप aria-labelनियंत्रण पर ही एक विशेषता जोड़ सकते हैं।

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

उदाहरण

टूलबार, नेविगेशन, या प्रीपेड फॉर्म इनपुट के लिए बटन, बटन समूहों में उनका उपयोग करें।

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

अलर्ट में उपयोग किया जाने वाला आइकन यह बताने के लिए है कि यह एक त्रुटि संदेश है, अतिरिक्त .sr-onlyटेक्स्ट के साथ यह संकेत सहायक तकनीकों के उपयोगकर्ताओं तक पहुंचाने के लिए।

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>

नीचे की ओर फैलने वाला बिंदु

लिंक की सूची प्रदर्शित करने के लिए टॉगल करने योग्य, प्रासंगिक मेनू। ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथ इंटरैक्टिव बनाया गया ।

ड्रॉपडाउन के ट्रिगर और ड्रॉपडाउन मेनू को .dropdown, या घोषित करने वाले किसी अन्य तत्व के भीतर लपेटें position: relative;। फिर मेनू का HTML जोड़ें।

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

माता-पिता को जोड़कर ड्रॉपडाउन मेनू को ऊपर की ओर (नीचे की बजाय) विस्तारित करने के लिए बदला जा सकता है .dropup

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

डिफ़ॉल्ट रूप से, एक ड्रॉपडाउन मेनू स्वचालित रूप से ऊपर से 100% और उसके पैरेंट के बाईं ओर स्थित होता है। ड्रॉपडाउन मेनू को दाईं ओर संरेखित करने के .dropdown-menu-rightलिए जोड़ें ।.dropdown-menu

अतिरिक्त स्थिति की आवश्यकता हो सकती है

ड्रॉपडाउन स्वचालित रूप से दस्तावेज़ के सामान्य प्रवाह के भीतर सीएसएस के माध्यम से स्थित होते हैं। इसका मतलब है कि ड्रॉपडाउन को माता-पिता द्वारा कुछ गुणों के साथ क्रॉप किया जा सकता है overflowया व्यूपोर्ट की सीमा से बाहर दिखाई दे सकता है। इन मुद्दों को अपने आप हल करें क्योंकि वे उत्पन्न होते हैं।

पदावनत .pull-rightसंरेखण

v3.1.0 से, हमने .pull-rightड्रॉपडाउन मेनू पर रोक लगा दी है। मेनू को राइट-एलाइन करने के लिए, उपयोग करें .dropdown-menu-right। नेवबार में दाएं-संरेखित एनएवी घटक मेनू को स्वचालित रूप से संरेखित करने के लिए इस वर्ग के मिश्रित संस्करण का उपयोग करते हैं। इसे ओवरराइड करने के लिए, उपयोग करें .dropdown-menu-left

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

किसी भी ड्रॉपडाउन मेनू में क्रियाओं के अनुभागों को लेबल करने के लिए एक शीर्षलेख जोड़ें।

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

ड्रॉपडाउन मेनू में लिंक की श्रृंखला को अलग करने के लिए एक डिवाइडर जोड़ें।

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

लिंक को अक्षम करने के लिए ड्रॉपडाउन में .disabledजोड़ें ।<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

बटन समूह

बटन समूह के साथ एक पंक्ति में बटनों की एक श्रृंखला को एक साथ समूहित करें। हमारे बटन प्लगइन के साथ वैकल्पिक 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" role="group" aria-label="...">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

बटन टूलबार

अधिक जटिल घटकों के लिए के सेट <div class="btn-group">को a में मिलाएं ।<div class="btn-toolbar">

<div class="btn-toolbar" role="toolbar" aria-label="...">
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
  <div class="btn-group" role="group" aria-label="...">...</div>
</div>

आकार

समूह में प्रत्येक बटन पर बटन आकार देने वाली कक्षाएं लागू करने के बजाय, बस .btn-group-*प्रत्येक में जोड़ें .btn-group, जिसमें एकाधिक समूहों को नेस्ट करते समय भी शामिल है।




<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

घोंसला करने की क्रिया

जब आप ड्रॉपडाउन मेनू को बटनों की एक श्रृंखला के साथ मिश्रित करना चाहते हैं, तो .btn-groupदूसरे के भीतर रखें ।.btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

लंबवत भिन्नता

बटनों का एक सेट क्षैतिज के बजाय लंबवत रूप से स्टैक्ड दिखाई दें। स्प्लिट बटन ड्रॉपडाउन यहां समर्थित नहीं हैं।

<div class="btn-group-vertical" role="group" aria-label="...">
  ...
</div>

उचित बटन समूह

अपने पैरेंट की पूरी चौड़ाई को फैलाने के लिए समान आकार में बटनों का एक समूह बनाएं। बटन समूह के भीतर बटन ड्रॉपडाउन के साथ भी काम करता है।

सीमाओं को संभालना

बटन (अर्थात्) को सही ठहराने के लिए उपयोग किए जाने वाले विशिष्ट HTML और CSS के कारण display: table-cell, उनके बीच की सीमाएँ दोगुनी हो जाती हैं। नियमित बटन समूहों में, margin-left: -1pxसीमाओं को हटाने के बजाय उन्हें ढेर करने के लिए उपयोग किया जाता है। हालांकि, marginके साथ काम नहीं करता है display: table-cell। परिणामस्वरूप, बूटस्ट्रैप के लिए आपके अनुकूलन के आधार पर, आप सीमाओं को हटाना या फिर से रंगना चाह सकते हैं।

IE8 और बॉर्डर

Internet Explorer 8 किसी उचित बटन समूह में बटनों पर बॉर्डर रेंडर नहीं करता, चाहे वह ऑन हो <a>या <button>एलिमेंट। उसके आसपास जाने के लिए, प्रत्येक बटन को दूसरे में लपेटें .btn-group

अधिक जानकारी के लिए #12476 देखें ।

<a>तत्वों के साथ

.btnबस s की एक श्रृंखला को .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

बटन के रूप में कार्य करने वाले लिंक

यदि <a>तत्वों का उपयोग बटन के रूप में कार्य करने के लिए किया जाता है - वर्तमान पृष्ठ के भीतर किसी अन्य दस्तावेज़ या अनुभाग पर नेविगेट करने के बजाय, इन-पेज कार्यक्षमता को ट्रिगर करता है - तो उन्हें एक उपयुक्त role="button".

<button>तत्वों के साथ

<button>तत्वों के साथ उचित बटन समूहों का उपयोग करने के लिए , आपको प्रत्येक बटन को एक बटन समूह में लपेटना होगा । अधिकांश ब्राउज़र तत्वों के औचित्य के लिए हमारे सीएसएस को ठीक से लागू नहीं करते <button>हैं, लेकिन चूंकि हम बटन ड्रॉपडाउन का समर्थन करते हैं, हम उसके आसपास काम कर सकते हैं।

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

बटन ड्रॉपडाउन

ड्रॉपडाउन मेनू को एक के भीतर रखकर .btn-groupऔर उचित मेनू मार्कअप प्रदान करके ट्रिगर करने के लिए किसी भी बटन का उपयोग करें।

प्लगइन निर्भरता

बटन ड्रॉपडाउन के लिए ड्रॉपडाउन प्लगइन को आपके बूटस्ट्रैप के संस्करण में शामिल करने की आवश्यकता होती है।

सिंगल बटन ड्रॉपडाउन

कुछ बुनियादी मार्कअप परिवर्तनों के साथ एक बटन को ड्रॉपडाउन टॉगल में बदलें।

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

स्प्लिट बटन ड्रॉपडाउन

इसी तरह, एक ही मार्कअप परिवर्तन के साथ स्प्लिट बटन ड्रॉपडाउन बनाएं, केवल एक अलग बटन के साथ।

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

आकार

बटन ड्रॉपडाउन सभी आकार के बटन के साथ काम करते हैं।

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

ड्रॉपअप भिन्नता

.dropupपैरेंट में जोड़कर तत्वों के ऊपर ड्रॉपडाउन मेनू ट्रिगर करें।

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

इनपुट समूह

किसी भी टेक्स्ट-आधारित के पहले, बाद में, या दोनों तरफ टेक्स्ट या बटन जोड़कर फॉर्म नियंत्रण बढ़ाएं <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

हम एक इनपुट समूह में एकाधिक प्रपत्र-नियंत्रणों का समर्थन नहीं करते हैं।

@

@example.com

$ .00

https://example.com/users/
<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

आकार

सापेक्ष रूप आकार देने वाली कक्षाओं को .input-groupस्वयं में जोड़ें और भीतर की सामग्री स्वचालित रूप से आकार बदल जाएगी - प्रत्येक तत्व पर प्रपत्र नियंत्रण आकार वर्गों को दोहराने की कोई आवश्यकता नहीं है।

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

चेकबॉक्स और रेडियो एडॉन्स

किसी भी चेकबॉक्स या रेडियो विकल्प को टेक्स्ट के बजाय इनपुट ग्रुप के ऐडऑन में रखें।

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

बटन ऐडऑन

इनपुट समूहों में बटन थोड़े अलग होते हैं और इसके लिए एक अतिरिक्त स्तर के नेस्टिंग की आवश्यकता होती है। इसके बजाय .input-group-addon, आपको .input-group-btnबटनों को लपेटने के लिए उपयोग करने की आवश्यकता होगी। डिफ़ॉल्ट ब्राउज़र शैलियों के कारण यह आवश्यक है जिसे ओवरराइड नहीं किया जा सकता है।

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

ड्रॉपडाउन वाले बटन

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" aria-label="...">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li role="separator" class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

खंडित बटन

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

एकाधिक बटन

जबकि आपके पास प्रति पक्ष केवल एक ऐड-ऑन हो सकता है, आपके पास एक के अंदर कई बटन हो सकते हैं .input-group-btn

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

एनएवी

बूटस्ट्रैप में उपलब्ध एनएवी ने मार्कअप साझा किया है, जो बेस .navक्लास के साथ-साथ साझा राज्यों से शुरू होता है। प्रत्येक शैली के बीच स्विच करने के लिए संशोधक वर्ग स्वैप करें।

टैब पैनल के लिए एनएवी का उपयोग करने के लिए जावास्क्रिप्ट टैब प्लगइन की आवश्यकता होती है

टैब करने योग्य क्षेत्रों वाले टैब के लिए, आपको टैब जावास्क्रिप्ट प्लगइन का उपयोग करना चाहिए । मार्कअप के लिए अतिरिक्त roleऔर ARIA विशेषताओं की भी आवश्यकता होगी - अधिक विवरण के लिए प्लगइन का उदाहरण मार्कअप देखें।

नेविगेशन के रूप में उपयोग किए जाने वाले एनएवी को सुलभ बनाएं

role="navigation"यदि आप नेविगेशन बार प्रदान करने के लिए एनएवी का उपयोग कर रहे हैं, तो सबसे तार्किक पैरेंट कंटेनर में जोड़ना सुनिश्चित करें , या संपूर्ण नेविगेशन के चारों ओर एक तत्व <ul>लपेटें । <nav>भूमिका को स्वयं में न जोड़ें <ul>, क्योंकि इससे सहायक तकनीकों द्वारा इसे वास्तविक सूची के रूप में घोषित किए जाने से रोका जा सकेगा।

ध्यान दें कि .nav-tabsकक्षा को .navबेस क्लास की आवश्यकता होती है।

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

वही HTML लें, लेकिन .nav-pillsइसके बजाय उपयोग करें:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

गोलियां भी खड़ी खड़ी हैं। बस जोड़ें .nav-stacked

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

768px से अधिक चौड़ी स्क्रीन पर .nav-justified. छोटी स्क्रीन पर, एनएवी लिंक स्टैक्ड होते हैं।

उचित नेवबार एनएवी लिंक वर्तमान में समर्थित नहीं हैं।

सफारी और उत्तरदायी न्यायोचित एनएवीएस

v9.1.2 के अनुसार, सफारी एक बग प्रदर्शित करता है जिसमें आपके ब्राउज़र को क्षैतिज रूप से आकार देने से उचित एनएवी में रेंडरिंग त्रुटियां होती हैं जो ताज़ा होने पर साफ़ हो जाती हैं। यह बग उचित एनएवी उदाहरण में भी दिखाया गया है ।

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

किसी भी नेविगेशन घटक (टैब या गोलियां) के .disabledलिए , ग्रे लिंक और कोई होवर प्रभाव नहीं जोड़ें ।

लिंक कार्यक्षमता प्रभावित नहीं हुई

यह वर्ग केवल दिखावट बदलेगा <a>, इसकी कार्यक्षमता नहीं। यहां लिंक अक्षम करने के लिए कस्टम जावास्क्रिप्ट का प्रयोग करें।

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

कुछ अतिरिक्त HTML और ड्रॉपडाउन JavaScript प्लगइन के साथ ड्रॉपडाउन मेनू जोड़ें ।

ड्रॉपडाउन वाले टैब

<ul class="nav nav-tabs">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

ड्रॉपडाउन के साथ गोलियां

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

नेवबार

Navbars प्रतिक्रियाशील मेटा घटक हैं जो आपके एप्लिकेशन या साइट के लिए नेविगेशन हेडर के रूप में कार्य करते हैं। वे मोबाइल दृश्यों में ढहने लगते हैं (और टॉगल करने योग्य होते हैं) और उपलब्ध व्यूपोर्ट की चौड़ाई बढ़ने पर क्षैतिज हो जाते हैं।

उचित नेवबार एनएवी लिंक वर्तमान में समर्थित नहीं हैं।

अतिप्रवाह सामग्री

चूंकि बूटस्ट्रैप को यह नहीं पता है कि आपके नेवबार में सामग्री को कितनी जगह चाहिए, इसलिए आपको दूसरी पंक्ति में सामग्री लपेटने में समस्या आ सकती है। इसे हल करने के लिए, आप यह कर सकते हैं:

  1. नेवबार आइटम की मात्रा या चौड़ाई कम करें।
  2. प्रतिक्रियाशील उपयोगिता वर्गों का उपयोग करके कुछ निश्चित स्क्रीन आकारों में कुछ नावबार आइटम छुपाएं ।
  3. उस बिंदु को बदलें जिस पर आपका नेवबार संक्षिप्त और क्षैतिज मोड के बीच स्विच करता है। वेरिएबल को अनुकूलित करें @grid-float-breakpointया अपनी खुद की मीडिया क्वेरी जोड़ें।

जावास्क्रिप्ट प्लगइन की आवश्यकता है

यदि जावास्क्रिप्ट अक्षम है और व्यूपोर्ट इतना संकीर्ण है कि नेवबार ढह जाता है, तो नेवबार का विस्तार करना और सामग्री को के भीतर देखना असंभव होगा .navbar-collapse

उत्तरदायी नेवबार को आपके बूटस्ट्रैप के संस्करण में शामिल करने के लिए पतन प्लगइन की आवश्यकता होती है।

ध्वस्त मोबाइल नेवबार ब्रेकप्वाइंट को बदलना

जब व्यूपोर्ट की तुलना में संकरा होता है, तो नेवबार अपने लंबवत मोबाइल दृश्य में ढह जाता है @grid-float-breakpoint, और जब व्यूपोर्ट कम से कम @grid-float-breakpointचौड़ाई में होता है, तो यह अपने क्षैतिज गैर-मोबाइल दृश्य में फैल जाता है। नावबार के ढहने/विस्तार होने पर नियंत्रित करने के लिए इस चर को कम स्रोत में समायोजित करें। डिफ़ॉल्ट मान है 768px(सबसे छोटा "छोटा" या "टैबलेट" स्क्रीन)।

नेवबार को सुलभ बनाएं

किसी तत्व का उपयोग करना सुनिश्चित करें <nav>या, यदि a जैसे अधिक सामान्य तत्व का उपयोग कर रहे हैं, तो सहायक तकनीकों के उपयोगकर्ताओं के लिए इसे एक ऐतिहासिक क्षेत्र के रूप में स्पष्ट रूप से पहचानने के लिए प्रत्येक नेवबार में <div>जोड़ें ।role="navigation"

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

नेवबार ब्रांड को एक के लिए टेक्स्ट को स्वैप करके अपनी छवि से बदलें <img>। चूंकि .navbar-brandइसकी अपनी पैडिंग और ऊंचाई है, इसलिए आपको अपनी छवि के आधार पर कुछ सीएसएस को ओवरराइड करने की आवश्यकता हो सकती है।

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

.navbar-formउचित ऊर्ध्वाधर संरेखण और संकीर्ण व्यूपोर्ट में संक्षिप्त व्यवहार के लिए प्रपत्र सामग्री को अंदर रखें । यह तय करने के लिए संरेखण विकल्पों का उपयोग करें कि यह नेवबार सामग्री के भीतर कहाँ रहता है।

एक प्रमुख के रूप में, .navbar-formअपने अधिकांश कोड .form-inlineको मिक्सिन के माध्यम से साझा करता है। कुछ प्रपत्र नियंत्रण, जैसे इनपुट समूह, को नेवबार में ठीक से दिखाने के लिए निश्चित चौड़ाई की आवश्यकता हो सकती है।

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

मोबाइल डिवाइस चेतावनी

मोबाइल उपकरणों पर निश्चित तत्वों के भीतर प्रपत्र नियंत्रणों का उपयोग करने के संबंध में कुछ चेतावनी हैं। विवरण के लिए हमारे ब्राउज़र समर्थन दस्तावेज़ देखें।

हमेशा लेबल जोड़ें

यदि आप प्रत्येक इनपुट के लिए एक लेबल शामिल नहीं करते हैं, तो स्क्रीन रीडर्स को आपके फ़ॉर्म में समस्या होगी। .sr-onlyइन इनलाइन प्रपत्रों के लिए, आप कक्षा का उपयोग करके लेबल छिपा सकते हैं । सहायक तकनीकों के लिए लेबल प्रदान करने के और भी वैकल्पिक तरीके हैं, जैसे aria-label, aria-labelledbyया titleविशेषता। यदि इनमें से कोई भी मौजूद नहीं है, तो स्क्रीन रीडर मौजूद होने पर placeholderविशेषता का उपयोग करने का सहारा ले सकते हैं, लेकिन ध्यान दें कि placeholderअन्य लेबलिंग विधियों के प्रतिस्थापन के रूप में उपयोग की सलाह नहीं दी जाती है।

.navbar-btnकक्षा को उन <button>तत्वों में जोड़ें जो a में नहीं रहते <form>हैं उन्हें नेवबार में लंबवत रूप से केन्द्रित करें।

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

प्रसंग-विशिष्ट उपयोग

मानक बटन वर्गों की तरह , पर और तत्वों .navbar-btnका उपयोग किया जा सकता है । हालांकि, न तो और न ही मानक बटन वर्गों का उपयोग .<a><input>.navbar-btn<a>.navbar-nav

किसी तत्व में टेक्स्ट के तार लपेटें .navbar-text, आमतौर पर <p>उचित अग्रणी और रंग के लिए टैग पर।

<p class="navbar-text">Signed in as Mark Otto</p>

मानक लिंक का उपयोग करने वाले लोगों के लिए जो नियमित नेवबार नेविगेशन घटक के भीतर नहीं हैं, .navbar-linkडिफ़ॉल्ट और उलटा नेवबार विकल्पों के लिए उचित रंग जोड़ने के लिए कक्षा का उपयोग करें।

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

.navbar-leftया .navbar-rightयूटिलिटी क्लासेस का उपयोग करके एनएवी लिंक, फॉर्म, बटन या टेक्स्ट को संरेखित करें । दोनों वर्ग निर्दिष्ट दिशा में एक सीएसएस फ्लोट जोड़ देंगे। उदाहरण के लिए, एनएवी लिंक को संरेखित करने के लिए, उन्हें <ul>लागू किए गए संबंधित उपयोगिता वर्ग के साथ एक अलग में रखें।

ये वर्ग और के मिश्रित-संस्करण संस्करण हैं .pull-left, .pull-rightलेकिन डिवाइस आकार में नेवबार घटकों के आसान प्रबंधन के लिए मीडिया प्रश्नों के दायरे में हैं।

एकाधिक घटकों को सही संरेखित करना

नेवबार की वर्तमान में कई .navbar-rightकक्षाओं के साथ एक सीमा है। .navbar-rightसामग्री को ठीक से स्थान देने के लिए, हम अंतिम तत्व पर नकारात्मक मार्जिन का उपयोग करते हैं । जब उस वर्ग का उपयोग करने वाले कई तत्व होते हैं, तो ये हाशिये इरादे के अनुसार काम नहीं करते हैं।

हम इस पर फिर से विचार करेंगे जब हम उस घटक को v4 में फिर से लिख सकते हैं।

एक या केंद्र और पैड नेवबार सामग्री जोड़ें .navbar-fixed-topऔर शामिल करें।.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

बॉडी पैडिंग आवश्यक

फिक्स्ड नेवबार आपकी अन्य सामग्री को तब तक ओवरले करेगा, जब तक कि आप paddingके शीर्ष पर नहीं जोड़ते <body>। अपने स्वयं के मूल्यों को आज़माएं या नीचे दिए गए हमारे स्निपेट का उपयोग करें। युक्ति: डिफ़ॉल्ट रूप से, नेवबार 50px ऊँचा होता है।

body { padding-top: 70px; }

कोर बूटस्ट्रैप सीएसएस के बाद इसे शामिल करना सुनिश्चित करें ।

एक या केंद्र और पैड नेवबार सामग्री जोड़ें .navbar-fixed-bottomऔर शामिल करें।.container.container-fluid

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

बॉडी पैडिंग आवश्यक

paddingस्थिर नावबार आपकी अन्य सामग्री को तब तक ओवरले करेगा, जब तक कि आप <body>. अपने स्वयं के मूल्यों को आज़माएं या नीचे दिए गए हमारे स्निपेट का उपयोग करें। युक्ति: डिफ़ॉल्ट रूप से, नेवबार 50px ऊँचा होता है।

body { padding-bottom: 70px; }

कोर बूटस्ट्रैप सीएसएस के बाद इसे शामिल करना सुनिश्चित करें ।

एक पूर्ण-चौड़ाई वाला नेवबार बनाएं जो एक या केंद्र और पैड नेवबार सामग्री को जोड़कर .navbar-static-topऔर शामिल करके पृष्ठ के साथ स्क्रॉल करता है।.container.container-fluid

कक्षाओं के विपरीत .navbar-fixed-*, आपको किसी भी पैडिंग को बदलने की आवश्यकता नहीं है body

<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    ...
  </div>
</nav>

नेवबार के रूप को जोड़कर संशोधित करें .navbar-inverse

<nav class="navbar navbar-inverse">
  ...
</nav>

ब्रेडक्रम्ब्स

एक नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ का स्थान इंगित करें।

:beforeसीएसएस में और के माध्यम से विभाजक स्वचालित रूप से जोड़े जाते हैं content

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

पृष्ठ पर अंक लगाना

अपनी साइट या ऐप के लिए बहु-पृष्ठ पृष्ठांकन घटक, या सरल पेजर विकल्प के साथ पृष्ठ पर अंक लगाना लिंक प्रदान करें ।

डिफ़ॉल्ट पेजिनेशन

Rdio से प्रेरित सरल पृष्ठ पर अंक लगाना, ऐप्स और खोज परिणामों के लिए बढ़िया। बड़े ब्लॉक को याद करना मुश्किल है, आसानी से स्केलेबल है, और बड़े क्लिक क्षेत्र प्रदान करता है।

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

पेजिनेशन घटक को लेबल करना

पेजिनेशन घटक को एक तत्व में लपेटा जाना चाहिए ताकि <nav>इसे पाठकों और अन्य सहायक तकनीकों को स्क्रीन करने के लिए नेविगेशन अनुभाग के रूप में पहचाना जा सके। इसके अलावा, चूंकि एक पृष्ठ में पहले से ही एक से अधिक ऐसे नेविगेशन अनुभाग होने की संभावना है (जैसे कि हेडर में प्राथमिक नेविगेशन, या साइडबार नेविगेशन), इसके लिए एक वर्णनात्मक प्रदान करना उचित है aria-labelजो <nav>इसके उद्देश्य को दर्शाता है। उदाहरण के लिए, यदि खोज परिणामों के एक समूह के बीच नेविगेट करने के लिए पृष्ठ पर अंक लगाना घटक का उपयोग किया जाता है, तो एक उपयुक्त लेबल हो सकता है aria-label="Search results pages"

अक्षम और सक्रिय राज्य

लिंक विभिन्न परिस्थितियों के लिए अनुकूलन योग्य हैं। .disabledक्लिक न करने योग्य लिंक के लिए और .activeवर्तमान पृष्ठ को इंगित करने के लिए उपयोग करें ।

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

हम अनुशंसा करते हैं कि आप सक्रिय या अक्षम एंकरों की अदला-बदली <span>करें, या पिछले/अगले तीरों के मामले में एंकर को छोड़ दें, ताकि इच्छित शैलियों को बनाए रखते हुए क्लिक कार्यक्षमता को हटाया जा सके।

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

आकार

फैंसी बड़ा या छोटा पेजिनेशन? जोड़ें .pagination-lgया .pagination-smअतिरिक्त आकार के लिए।

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

पेजर

लाइट मार्कअप और स्टाइल के साथ सरल पेजिनेशन कार्यान्वयन के लिए त्वरित पिछले और अगले लिंक। यह ब्लॉग या पत्रिकाओं जैसी साधारण साइटों के लिए बहुत अच्छा है।

डिफ़ॉल्ट उदाहरण

डिफ़ॉल्ट रूप से, पेजर केंद्र लिंक करता है।

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

वैकल्पिक रूप से, आप प्रत्येक लिंक को पक्षों से संरेखित कर सकते हैं:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

वैकल्पिक अक्षम अवस्था

पेजर लिंक पेजिनेशन से सामान्य .disabledउपयोगिता वर्ग का भी उपयोग करते हैं।

<nav aria-label="...">
  <ul class="pager">
    <li class="previous disabled"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

लेबल

उदाहरण

उदाहरण शीर्षक नया

उदाहरण शीर्षक नया

उदाहरण शीर्षक नया

उदाहरण शीर्षक नया

उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
<h3>Example heading <span class="label label-default">New</span></h3>

उपलब्ध विविधताएं

किसी लेबल का स्वरूप बदलने के लिए नीचे दिए गए किसी भी संशोधक वर्ग को जोड़ें।

डिफ़ॉल्ट प्राथमिक सफलता जानकारी चेतावनी खतरा
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

बहुत सारे लेबल हैं?

जब आपके पास एक संकीर्ण कंटेनर में दर्जनों इनलाइन लेबल होते हैं, तो प्रत्येक का अपना inline-blockतत्व (एक आइकन की तरह) होता है, तो रेंडरिंग समस्याएं उत्पन्न हो सकती हैं। इसके चारों ओर रास्ता तय हो रहा है display: inline-block;। संदर्भ और उदाहरण के लिए #13219 देखें

बैज

<span class="badge">लिंक, बूटस्ट्रैप एनएवी, और बहुत कुछ जोड़कर नए या अपठित आइटम को आसानी से हाइलाइट करें।

इनबॉक्स42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

स्वयं ढहना

जब कोई नया या अपठित आइटम नहीं होता है, तो बैज आसानी से ढह जाएंगे (सीएसएस के :emptyचयनकर्ता के माध्यम से) बशर्ते कोई सामग्री मौजूद न हो।

क्रॉस-ब्राउज़र संगतता

इंटरनेट एक्सप्लोरर 8 में बैज अपने आप नहीं टूटेंगे क्योंकि इसमें :emptyचयनकर्ता के लिए समर्थन की कमी है।

सक्रिय एनएवी राज्यों के अनुकूल है

पिल नेविगेशन में सक्रिय अवस्थाओं में बैज लगाने के लिए अंतर्निहित शैलियों को शामिल किया गया है।

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

jumbotron

एक हल्का, लचीला घटक जो वैकल्पिक रूप से आपकी साइट पर मुख्य सामग्री दिखाने के लिए संपूर्ण व्यूपोर्ट का विस्तार कर सकता है।

नमस्ते दुनिया!

यह एक साधारण नायक इकाई है, विशेष रुप से प्रदर्शित सामग्री या जानकारी पर अतिरिक्त ध्यान देने के लिए एक साधारण जंबोट्रॉन-शैली घटक।

और अधिक जानें

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

जंबोट्रॉन को पूरी चौड़ाई और बिना गोल कोनों के बनाने के लिए, इसे सभी के बाहर रखें .containerऔर इसके बजाय एक .containerअंदर जोड़ें।

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

पेज हैडर

h1किसी पृष्ठ पर सामग्री के अनुभागों को उचित रूप से स्थान देने और खंडित करने के लिए एक सरल शेल । यह के h1डिफ़ॉल्ट smallतत्व के साथ-साथ अधिकांश अन्य घटकों (अतिरिक्त शैलियों के साथ) का उपयोग कर सकता है।

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

थंबनेल

छवियों, वीडियो, टेक्स्ट आदि के ग्रिड को आसानी से प्रदर्शित करने के लिए थंबनेल घटक के साथ बूटस्ट्रैप के ग्रिड सिस्टम का विस्तार करें।

यदि आप अलग-अलग ऊंचाई और/या चौड़ाई के थंबनेल की Pinterest जैसी प्रस्तुति की तलाश कर रहे हैं, तो आपको चिनाई , आइसोटोप , या सल्वाटोर जैसे तृतीय-पक्ष प्लगइन का उपयोग करने की आवश्यकता होगी ।

डिफ़ॉल्ट उदाहरण

डिफ़ॉल्ट रूप से, बूटस्ट्रैप के थंबनेल न्यूनतम आवश्यक मार्कअप के साथ लिंक की गई छवियों को प्रदर्शित करने के लिए डिज़ाइन किए गए हैं।

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

प्रचलित सामग्री

थोड़े अतिरिक्त मार्कअप के साथ, थंबनेल में किसी भी प्रकार की HTML सामग्री जैसे शीर्षक, पैराग्राफ या बटन जोड़ना संभव है।

100%x200

थंबनेल लेबल

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

बटन बटन

100%x200

थंबनेल लेबल

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

बटन बटन

100%x200

थंबनेल लेबल

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

बटन बटन

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

अलर्ट

मुट्ठी भर उपलब्ध और लचीले अलर्ट संदेशों के साथ विशिष्ट उपयोगकर्ता कार्रवाइयों के लिए प्रासंगिक प्रतिक्रिया संदेश प्रदान करें।

उदाहरण

बुनियादी अलर्ट संदेशों .alertके लिए चार प्रासंगिक वर्गों (जैसे, ) में से कोई भी टेक्स्ट और एक वैकल्पिक खारिज करें बटन लपेटें ।.alert-success

कोई डिफ़ॉल्ट वर्ग नहीं

अलर्ट में डिफ़ॉल्ट कक्षाएं नहीं होती हैं, केवल आधार और संशोधक वर्ग होते हैं। एक डिफ़ॉल्ट ग्रे अलर्ट बहुत अधिक समझ में नहीं आता है, इसलिए आपको प्रासंगिक वर्ग के माध्यम से एक प्रकार निर्दिष्ट करना होगा। सफलता, जानकारी, चेतावनी या खतरे में से चुनें।

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

खारिज करने योग्य अलर्ट

.alert-dismissibleवैकल्पिक और बंद करें बटन जोड़कर किसी भी अलर्ट पर निर्माण करें।

जावास्क्रिप्ट अलर्ट प्लगइन की आवश्यकता है

पूरी तरह से कार्य करने के लिए, खारिज करने योग्य अलर्ट के लिए, आपको अलर्ट जावास्क्रिप्ट प्लगइन का उपयोग करना चाहिए ।

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

सभी उपकरणों पर उचित व्यवहार सुनिश्चित करें

डेटा विशेषता वाले <button>तत्व का उपयोग करना सुनिश्चित करें ।data-dismiss="alert"

.alert-linkकिसी भी अलर्ट में मिलते-जुलते रंगीन लिंक शीघ्रता से उपलब्ध कराने के लिए उपयोगिता वर्ग का उपयोग करें ।

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

प्रगति पट्टी

सरल लेकिन लचीली प्रगति पट्टियों के साथ वर्कफ़्लो या क्रिया की प्रगति पर अप-टू-डेट फ़ीडबैक प्रदान करें।

क्रॉस-ब्राउज़र संगतता

प्रोग्रेस बार अपने कुछ प्रभावों को प्राप्त करने के लिए CSS3 के संक्रमण और एनिमेशन का उपयोग करते हैं। ये सुविधाएँ Internet Explorer 9 और Firefox के पुराने या पुराने संस्करणों में समर्थित नहीं हैं। ओपेरा 12 एनिमेशन का समर्थन नहीं करता है।

सामग्री सुरक्षा नीति (सीएसपी) संगतता

यदि आपकी वेबसाइट की सामग्री सुरक्षा नीति (सीएसपी) है जो अनुमति नहीं देती है style-src 'unsafe-inline', तो आप प्रगति बार की चौड़ाई निर्धारित करने के लिए इनलाइन विशेषताओं का उपयोग करने में सक्षम नहीं होंगे styleजैसा कि नीचे हमारे उदाहरणों में दिखाया गया है। सख्त सीएसपी के साथ संगत चौड़ाई निर्धारित करने के वैकल्पिक तरीकों में थोड़ा कस्टम जावास्क्रिप्ट (जो सेट करता है element.style.width) या कस्टम सीएसएस कक्षाओं का उपयोग करना शामिल है।

मूल उदाहरण

डिफ़ॉल्ट प्रगति पट्टी।

60% पूर्ण
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

लेबल के साथ

दृश्यमान प्रतिशत दिखाने के लिए प्रगति पट्टी के भीतर से वर्ग को <span>हटा दें ।.sr-only

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

यह सुनिश्चित करने के लिए कि लेबल टेक्स्ट कम प्रतिशत के लिए भी सुपाठ्य रहता min-widthहै, प्रगति बार में एक जोड़ने पर विचार करें।

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

प्रासंगिक विकल्प

प्रोग्रेस बार एक ही बटन का उपयोग करते हैं और सुसंगत शैलियों के लिए अलर्ट क्लासेस का उपयोग करते हैं।

40% पूर्ण (सफलता)
20% पूर्ण
60% पूर्ण (चेतावनी)
80% पूर्ण (खतरा)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

धारीदार

धारीदार प्रभाव बनाने के लिए ढाल का उपयोग करता है। IE9 और नीचे में उपलब्ध नहीं है।

40% पूर्ण (सफलता)
20% पूर्ण
60% पूर्ण (चेतावनी)
80% पूर्ण (खतरा)
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

एनिमेटेड

धारियों को दाएं से बाएं चेतन .activeकरने के लिए जोड़ें । .progress-bar-stripedIE9 और नीचे में उपलब्ध नहीं है।

45% पूर्ण
<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

स्टैक्ड

.progressउन्हें ढेर करने के लिए एक ही में कई बार रखें ।

35% पूर्ण (सफलता)
20% पूर्ण (चेतावनी)
10% पूर्ण (खतरा)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

मीडिया वस्तु

विभिन्न प्रकार के घटकों (जैसे ब्लॉग टिप्पणियाँ, ट्वीट्स, आदि) के निर्माण के लिए सार वस्तु शैलियाँ जो पाठ्य सामग्री के साथ एक बाएँ या दाएँ-संरेखित छवि पेश करती हैं।

डिफ़ॉल्ट मीडिया

डिफ़ॉल्ट मीडिया सामग्री ब्लॉक के बाईं या दाईं ओर एक मीडिया ऑब्जेक्ट (छवियां, वीडियो, ऑडियो) प्रदर्शित करता है।

मीडिया शीर्षक

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

मीडिया शीर्षक

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

नेस्टेड मीडिया शीर्षक

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

मीडिया शीर्षक

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

मीडिया शीर्षक

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

कक्षाएं .pull-leftऔर .pull-rightभी मौजूद हैं और पहले मीडिया घटक के हिस्से के रूप में उपयोग की जाती थीं, लेकिन उस उपयोग के लिए v3.3.0 के रूप में बहिष्कृत हैं। वे लगभग .media-leftऔर के बराबर हैं .media-right, सिवाय इसके कि html के .media-rightबाद रखा जाना चाहिए ।.media-body

मीडिया संरेखण

छवियों या अन्य मीडिया को ऊपर, मध्य या नीचे संरेखित किया जा सकता है। डिफ़ॉल्ट शीर्ष संरेखित है।

शीर्ष संरेखित मीडिया

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

डोनेक सेड ओडियो डुई। नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस।

मध्य संरेखित मीडिया

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

डोनेक सेड ओडियो डुई। नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस।

नीचे संरेखित मीडिया

ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस। फ्यूस कॉन्डिमेंटम ननक एसी निसी वल्पुटेट फ्रिंजिला। फॉसीबस में डोनेक लैकिनिया कॉन्गू फेलिस।

डोनेक सेड ओडियो डुई। नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नैटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस।

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

मीडिया सूची

कुछ अतिरिक्त मार्कअप के साथ, आप सूची के अंदर मीडिया का उपयोग कर सकते हैं (टिप्पणी धागे या लेख सूचियों के लिए उपयोगी)।

  • मीडिया शीर्षक

    ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

    नेस्टेड मीडिया शीर्षक

    ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

    नेस्टेड मीडिया शीर्षक

    ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।

    नेस्टेड मीडिया शीर्षक

    ग्रेविडा नाला में क्रैस सिट अमेट निभ लिबरो। नुल्ला वेल मेटस स्केलेरिस्क एंटे सॉलिसिटुडिन कमोडो। क्रैस पुरुस ओडियो, वेस्टिबुलम इन वल्पुटेट एट, टेम्पस विवेरा टर्पिस।
<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

सूची समूह

सूची समूह न केवल सरल तत्वों की सूची प्रदर्शित करने के लिए एक लचीला और शक्तिशाली घटक हैं, बल्कि कस्टम सामग्री वाले जटिल भी हैं।

मूल उदाहरण

सबसे बुनियादी सूची समूह सूची वस्तुओं और उचित वर्गों के साथ एक अनियंत्रित सूची है। इसके बाद आने वाले विकल्पों या आवश्यकतानुसार अपने स्वयं के सीएसएस के साथ इसका निर्माण करें।

  • क्रैस जस्टो ओडियो
  • दापीबस एसी सुविधा
  • मोरबी लियो रिसुस
  • पोर्टा एसी कॉन्सेक्टेटूर एसी
  • वेस्टिबुलम और एरोसी
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

बैज

किसी भी सूची समूह आइटम में बैज घटक जोड़ें और यह स्वचालित रूप से दाईं ओर स्थित हो जाएगा।

  • 14क्रैस जस्टो ओडियो
  • 2दापीबस एसी सुविधा
  • 1मोरबी लियो रिसुस
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

लिंक्ड आइटम

सूची आइटम के बजाय एंकर टैग का उपयोग करके सूची समूह आइटम को लिंक करें (जिसका अर्थ है माता-पिता <div>के बजाय एक <ul>)। प्रत्येक तत्व के आसपास अलग-अलग माता-पिता की आवश्यकता नहीं है।

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

बटन आइटम

सूची समूह आइटम सूची आइटम के बजाय बटन हो सकते हैं (जिसका अर्थ है माता-पिता <div>के बजाय एक <ul>)। प्रत्येक तत्व के आसपास अलग-अलग माता-पिता की आवश्यकता नहीं है। यहां मानक कक्षाओं का उपयोग न करें।.btn

<div class="list-group">
  <button type="button" class="list-group-item">Cras justo odio</button>
  <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item">Morbi leo risus</button>
  <button type="button" class="list-group-item">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item">Vestibulum at eros</button>
</div>

अक्षम आइटम

अक्षम दिखने के लिए इसे धूसर करने के .disabledलिए a में जोड़ें ..list-group-item

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

प्रासंगिक कक्षाएं

शैली सूची आइटम, डिफ़ॉल्ट या लिंक करने के लिए प्रासंगिक कक्षाओं का उपयोग करें। राज्य भी शामिल .activeहै।

  • दापीबस एसी सुविधा
  • क्रास सिट आमेट निभ लिबेरो
  • पोर्टा एसी कॉन्सेक्टेटूर एसी
  • वेस्टिबुलम और एरोसी
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

प्रचलित सामग्री

नीचे दिए गए लिंक किए गए सूची समूहों जैसे लिंक किए गए सूची समूहों के लिए भी लगभग कोई भी HTML जोड़ें।

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

पैनलों

जबकि हमेशा जरूरी नहीं, कभी-कभी आपको अपना डोम एक बॉक्स में रखना होगा। उन स्थितियों के लिए, पैनल घटक का प्रयास करें।

मूल उदाहरण

डिफ़ॉल्ट रूप से, सभी .panelकुछ सामग्री को शामिल करने के लिए कुछ बुनियादी सीमा और पैडिंग लागू करते हैं।

मूल पैनल उदाहरण
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

शीर्षक वाला पैनल

के साथ अपने पैनल में आसानी से एक शीर्षक कंटेनर जोड़ें .panel-heading। प्री-स्टाइल हेडिंग जोड़ने के लिए आप कोई भी <h1>- क्लास के <h6>साथ शामिल कर सकते हैं। .panel-titleहालाँकि, <h1>- के फ़ॉन्ट आकार को <h6>द्वारा ओवरराइड किया जाता है .panel-heading

उचित लिंक कलरिंग के लिए, शीर्षकों में लिंक्स को के भीतर रखना सुनिश्चित करें .panel-title

शीर्षक के बिना पैनल शीर्षक
पैनल सामग्री

पैनल शीर्षक

पैनल सामग्री
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

रैप बटन या सेकेंडरी टेक्स्ट में .panel-footer. ध्यान दें कि प्रासंगिक विविधताओं का उपयोग करते समय पैनल फ़ुटर रंगों और सीमाओं को विरासत में नहीं लेते हैं क्योंकि वे अग्रभूमि में होने के लिए नहीं होते हैं।

पैनल सामग्री
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

प्रासंगिक विकल्प

अन्य घटकों की तरह, किसी भी प्रासंगिक राज्य वर्ग को जोड़कर आसानी से एक विशेष संदर्भ के लिए एक पैनल को अधिक सार्थक बनाते हैं।

पैनल शीर्षक

पैनल सामग्री

पैनल शीर्षक

पैनल सामग्री

पैनल शीर्षक

पैनल सामग्री

पैनल शीर्षक

पैनल सामग्री

पैनल शीर्षक

पैनल सामग्री
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

टेबल के साथ

.tableएक निर्बाध डिज़ाइन के लिए पैनल के भीतर कोई भी गैर-बॉर्डर जोड़ें । यदि कोई है .panel-body, तो हम पृथक्करण के लिए तालिका के शीर्ष पर एक अतिरिक्त बॉर्डर जोड़ते हैं।

पैनल शीर्षक

कुछ डिफ़ॉल्ट पैनल सामग्री यहाँ। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। ऐनीन लैकिनिया बिबेंडम नाला सेड कॉन्सेक्टेटूर। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम। Nullam id dolor id nibh ultricies vehicula ut id elit.

# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

यदि कोई पैनल बॉडी नहीं है, तो घटक बिना किसी रुकावट के पैनल हेडर से टेबल पर चला जाता है।

पैनल शीर्षक
# पहला नाम उपनाम उपयोगकर्ता नाम
1 निशान ओटो @mdo
2 याकूब थार्नटन @मोटा
3 लैरी पक्षी @ट्विटर
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

सूची समूहों के साथ

किसी भी पैनल में आसानी से पूर्ण-चौड़ाई वाले सूची समूह शामिल करें।

पैनल शीर्षक

कुछ डिफ़ॉल्ट पैनल सामग्री यहाँ। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। ऐनीन लैकिनिया बिबेंडम नाला सेड कॉन्सेक्टेटूर। ऐनियन यू लियो क्वाम। पेलेंटेस्क ऑर्नारे सेम लैकिनिया क्वाम वेनेनेटिस वेस्टिबुलम। Nullam id dolor id nibh ultricies vehicula ut id elit.

  • क्रैस जस्टो ओडियो
  • दापीबस एसी सुविधा
  • मोरबी लियो रिसुस
  • पोर्टा एसी कॉन्सेक्टेटूर एसी
  • वेस्टिबुलम और एरोसी
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

उत्तरदायी एम्बेड

ब्राउज़रों को एक आंतरिक अनुपात बनाकर वीडियो या स्लाइड शो आयामों को उनके युक्त ब्लॉक की चौड़ाई के आधार पर निर्धारित करने की अनुमति दें जो किसी भी डिवाइस पर ठीक से स्केल करेगा।

नियम सीधे <iframe>, <embed>, <video>, और <object>तत्वों पर लागू होते हैं; वैकल्पिक रूप से एक स्पष्ट वंश वर्ग का उपयोग करें .embed-responsive-itemजब आप अन्य विशेषताओं के लिए स्टाइल से मेल खाना चाहते हैं।

प्रो टिप! frameborder="0"आपको अपने s में शामिल करने की आवश्यकता नहीं है <iframe>क्योंकि हम इसे आपके लिए ओवरराइड करते हैं।

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

वेल्स

डिफ़ॉल्ट अच्छी तरह से

किसी तत्व को इनसेट प्रभाव देने के लिए कुएं के साथ-साथ एक साधारण प्रभाव का उपयोग करें।

देखो, मैं कुएँ में हूँ!
<div class="well">...</div>

वैकल्पिक कक्षाएं

दो वैकल्पिक संशोधक वर्गों के साथ पैडिंग और गोल कोनों को नियंत्रित करें।

देखो, मैं एक बड़े कुएँ में हूँ!
<div class="well well-lg">...</div>
देखो, मैं एक छोटे से कुएँ में हूँ!
<div class="well well-sm">...</div>