ग्लिफिकॉन के नाम से जानल जाला

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

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

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

कइसे इस्तेमाल कइल जाला

परफार्मेंस के कारण सभ आइकन सभ खातिर एगो बेस क्लास आ अलग-अलग आइकन क्लास के जरूरत होला। इस्तेमाल करे खातिर, निम्नलिखित कोड के लगभग कहीं भी रखीं। सही पैडिंग खातिर आइकन आ टेक्स्ट के बीच में जगह जरूर छोड़ीं।

अन्य घटक के साथ ना मिलावे के चाहीं

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

खाली खाली तत्वन पर इस्तेमाल खातिर

आइकन क्लास सभ के इस्तेमाल खाली अइसन तत्व सभ पर होखे के चाहीं जेह में कौनों टेक्स्ट सामग्री ना होखे आ कौनों चाइल्ड तत्व ना होखे।

आइकन फॉन्ट के स्थान बदलल जा रहल बा

बूटस्ट्रैप मान लेला कि आइकन फॉन्ट फाइल सभ डाइरेक्टरी में स्थित होखीं ../fonts/, संकलित CSS फाइल सभ के सापेक्ष। ओह फॉन्ट फाइल सभ के ले जाए भा नाँव बदले के मतलब होला कि तीन तरीका में से कौनों तरीका से CSS के अपडेट कइल जाय:

  • स्रोत कम फाइल सभ में @icon-font-pathआ/या चर सभ के बदलीं ।@icon-font-name
  • कम कंपाइलर द्वारा दिहल गइल रिलेटिव यूआरएल विकल्प के उपयोग करीं ।
  • 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;ला। एकरा बाद मेनू के एचटीएमएल जोड़ल जाला।

<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। नवबार में राइट-अलाइन कइल nav घटक सभ एह क्लास के मिक्सिन संस्करण के इस्तेमाल करे लें जेह से कि मेनू के स्वचालित रूप से संरेखित कइल जा सके। एकरा के ओवरराइड करे खातिर, के इस्तेमाल करीं .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>

लिंक के अक्षम करे खातिर ड्रॉपडाउन में .disableda में जोड़ीं ।<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>

बटन समूह के बा

बटन समूह के साथ एक लाइन पर बटन के एगो श्रृंखला के एक साथ समूहबद्ध करीं। हमनी के बटन प्लगइन के साथ वैकल्पिक जावास्क्रिप्ट रेडियो आ चेकबॉक्स शैली व्यवहार पर जोड़ीं .

बटन समूह में टूलटिप्स & पॉपओवर खातिर विशेष सेटिंग के जरूरत होला

जब 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">एक में के सेट के संयोजन ।<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>

जायज बटन समूह के बा

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

सीमा के संभालल जा रहल बा

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

आईई8 आ सीमा के बा

इंटरनेट एक्सप्लोरर 8 कवनो जायज बटन समूह में बटन सभ पर सीमा ना रेंडर करे ला, चाहे ऊ चालू <a>होखे भा <button>तत्व। एकरा के दूर करे खातिर हर बटन के दोसरा में लपेट लीं .btn-group.

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

<a>तत्वन के साथे बा

.btnबस में एस के एगो श्रृंखला लपेट लीं .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

हमनी के एकही इनपुट समूह में कई गो फॉर्म-कंट्रोल के सपोर्ट ना करेनी जा।

@ के बा।

@उदाहरण.कॉम पर बा

$ के बा .00 के बा

https://उदाहरण.कॉम/उपयोगकर्ता लोग/
<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क्लास से शुरू हो के, आ साथ ही साथ साझा स्टेट भी बा। हर शैली के बीच स्विच करे खातिर संशोधक वर्ग के अदला-बदली करीं।

टैब पैनल खातिर navs के इस्तेमाल करे खातिर जावास्क्रिप्ट टैब प्लगइन के जरूरत होला

टैब करे लायक क्षेत्र वाला टैब खातिर, रउआँ के टैब जावास्क्रिप्ट प्लगइन के इस्तेमाल करे के पड़ी । मार्कअप खातिर अतिरिक्त roleआ एरिया एट्रिब्यूट सभ के भी जरूरत पड़ी – अउरी बिस्तार खातिर प्लगइन के उदाहरण मार्कअप देखल जाय।

नेविगेशन के रूप में इस्तेमाल होखे वाला नव के सुलभ बनाईं

अगर आप नेविगेशन बार उपलब्ध करावे खातिर navs के इस्तेमाल कर रहल बानी, त role="navigation"के सभसे तार्किक पैरेंट कंटेनर में a जरूर जोड़ीं, या पूरा नेविगेशन के चारों ओर कौनों तत्व <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>

उहे एचटीएमएल लीं, बाकिर .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 के रूप में, सफारी एगो बग देखावे ला जेह में आपके ब्राउजर के साइज क्षैतिज रूप से बदलला से जायज नेव में रेंडरिंग त्रुटि हो जाला जे रिफ्रेश कइला पर साफ हो जाला। ई बग भी जायज nav उदाहरण में देखावल गइल बा .

<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>

तनी अतिरिक्त एचटीएमएल आ ड्रॉपडाउन जावास्क्रिप्ट प्लगइन के साथे ड्रॉपडाउन मेनू जोड़ीं .

ड्रॉपडाउन के साथ टैब बा

<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>

नवबर के बा

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

जायज नवबार नव लिंक फिलहाल समर्थित नइखे।

उफनत सामग्री के बा

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

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

जावास्क्रिप्ट प्लगइन के जरूरत बा

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

रिस्पांसिव नवबार में कोलैप्स प्लगइन के रउरा बूटस्ट्रैप के संस्करण में शामिल करे के पड़ी.

ढहल मोबाइल नवबार ब्रेकपॉइंट बदल रहल बा

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

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

कौनों तत्व के इस्तेमाल जरूर करीं <nav>या अगर कौनों अउरी जेनेरिक तत्व जइसे कि a के इस्तेमाल करत होखे तब हर नवबार <div>में a जोड़ीं 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अन्य लेबलिंग तरीका सभ के जगह के रूप में इस्तेमाल करे के सलाह ना दिहल जाला।

नवबार में ऊर्ध्वाधर केंद्र करे खातिर a में ना रहे वाला तत्वन में .navbar-btnक्लास जोड़ीं ।<button><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>

nav लिंक, फॉर्म, बटन, या टेक्स्ट के संरेखित करीं, .navbar-leftया .navbar-rightयूटिलिटी क्लास के इस्तेमाल से। दुनो क्लास निर्दिष्ट दिशा में एगो CSS फ्लोट जोड़ दिही। उदाहरण खातिर, nav लिंक सभ के संरेखित करे खातिर, <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>

रोटी के टुकड़न के

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

विभाजक के माध्यम से CSS में स्वचालित रूप से जोड़ल जाला :beforecontent.

<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>

खुद के ढहत बानी

जब कौनों नया भा ना पढ़ल आइटम ना होखे तब बैज सभ बस संकुचित हो जइहें (CSS के :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>

जंबोट्रॉन के बा

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

नमस्कार बा, दुनिया!

ई एगो साधारण हीरो यूनिट हवे, फीचर सामग्री भा जानकारी पर अतिरिक्त धियान खींचे खातिर एगो साधारण जंबोट्रॉन स्टाइल के घटक हवे।

अउरी जाने खातिर देखीं

<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>

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

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

पन्ना के हेडर बा

h1एगो पन्ना पर सामग्री के खंड सभ के उचित रूप से स्पेस आउट आ सेगमेंट करे खातिर एगो सरल शेल । ई h1's डिफ़ॉल्ट 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>

कस्टम सामग्री के बा

तनी अतिरिक्त मार्कअप के साथ थंबनेल में कवनो तरह के एचटीएमएल सामग्री जइसे कि हेडिंग, पैराग्राफ, भा बटन जोड़ल संभव बा.

100%x200 के बा

थंबनेल लेबल बा

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

बटन बटन

100%x200 के बा

थंबनेल लेबल बा

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

बटन बटन

100%x200 के बा

थंबनेल लेबल बा

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

बटन बटन

<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 संक्रमण आ एनीमेशन सभ के इस्तेमाल होला जेह से कि इनहन के कुछ इफेक्ट सभ के हासिल कइल जा सके। ई फीचर इंटरनेट एक्सप्लोरर 9 आ ओकरा से नीचे भा फायरफॉक्स के पुरान संस्करण सभ में सपोर्ट ना कइल जाला। ओपेरा 12 एनीमेशन के सपोर्ट ना करेला।

सामग्री सुरक्षा नीति (सीएसपी) के संगतता के बारे में बतावल गइल बा

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

बेसिक उदाहरण बा

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

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>with क्लास के हटाईं ।.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प्रगति बार में a जोड़े पर बिचार करीं।

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>

कस्टम सामग्री के बा

भीतर लगभग कौनों भी एचटीएमएल जोड़ीं, इहाँ तक कि नीचे दिहल गइल नियर लिंक कइल लिस्ट समूह सभ खातिर भी।

<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त हमनी के अलग करे खातिर टेबल के ऊपर एगो अतिरिक्त सीमा जोड़ देनी जा।

पैनल के हेडिंग बा

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

# भोजपुरी में पढ़ें: पहिला नांव अंतिम नाम प्रयोगकर्ता के नाम बा
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>

सूची समूहन के साथे बा

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

पैनल के हेडिंग बा

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

  • क्रास जस्टो ओडियो के बा
  • में दापिबस एसी सुविधा के बा
  • मोरबी लियो रिसुस के नाम से जानल जाला
  • पोर्टा एसी कॉन्सेक्टेतुर एसी के बा
  • इरोस पर वेस्टिबुलम के बा
<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>