आइकोनोग्राफी, ड्रॉपडाउन, इनपुट समूह, नेविगेशन, अलर्ट, ते होर मते सारे उपलब्ध करोआने लेई बने दे इक दर्जन शा मते पुन: उपयोग करने योग्य घटक।
ग्लिफिकॉन्स दा
उपलब्ध ग्लिफ
ग्लिफिकॉन हाफलिंग्स सेट थमां फॉन्ट प्रारूप च 250 शा मते ग्लिफ शामल न। ग्लिफिकॉन्स हाफलिंग आमतौर पर मुफ्त उपलब्ध नेईं होंदे न, पर उंदे निर्माता ने उनेंगी बूटस्ट्रैप आस्तै मुफ्त उपलब्ध करोआया ऐ। धन्यवाद दे तौर पर, अस सिर्फ एह् आखने आं जे तुस जदूं बी होई सकै तां तुस ग्लिफिकॉन्स दा वापस लिंक बी शामल करो।
ग्लिफिकॉन ग्लिफिकॉन-तारा चिह्न
ग्लिफिकॉन ग्लिफिकॉन-प्लस
ग्लिफिकॉन ग्लिफिकॉन-यूरो
ग्लिफिकॉन ग्लिफिकॉन-यूआर
ग्लिफिकॉन ग्लिफिकॉन-माइनस
ग्लिफिकॉन ग्लिफिकॉन-बादल
ग्लिफिकॉन ग्लिफिकॉन-लिफाफा
ग्लिफिकॉन ग्लिफिकॉन-पेंसिल
ग्लिफिकॉन ग्लिफिकॉन-ग्लास
ग्लिफिकॉन ग्लिफिकॉन-संगीत
ग्लिफिकॉन ग्लिफिकॉन-खोज
ग्लिफिकॉन ग्लिफिकॉन-हृदय
ग्लिफिकॉन ग्लिफिकॉन-स्टार
ग्लिफिकॉन ग्लिफिकॉन-स्टार-खाली
ग्लिफिकॉन ग्लिफिकॉन-उपयोगकर्ता
ग्लिफिकॉन ग्लिफिकॉन-फिल्म
ग्लिफिकॉन ग्लिफिकॉन-वें-बड़े
ग्लिफिकॉन ग्लिफिकॉन-थ
ग्लिफिकॉन ग्लिफिकॉन-वीं-सूची
ग्लिफिकॉन ग्लिफिकॉन-ठीक ऐ
ग्लिफिकॉन ग्लिफिकॉन-हटाओ
ग्लिफिकॉन ग्लिफिकॉन-ज़ूम-इन करना
ग्लिफिकॉन ग्लिफिकॉन-ज़ूम-आउट
ग्लिफिकॉन ग्लिफिकॉन-बंद करना
ग्लिफिकॉन ग्लिफिकॉन-संकेत
ग्लिफिकॉन ग्लिफिकॉन-कोग
ग्लिफिकॉन ग्लिफिकॉन-कचरा
ग्लिफिकॉन ग्लिफिकॉन-घर
ग्लिफिकॉन ग्लिफिकॉन-फाइल
ग्लिफिकॉन ग्लिफिकॉन-समय
ग्लिफिकॉन ग्लिफिकॉन-रोड
ग्लिफिकॉन ग्लिफिकॉन-डाउनलोड-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-डाउनलोड करो
ग्लिफिकॉन ग्लिफिकॉन-अपलोड करना
ग्लिफिकॉन ग्लिफिकॉन-इनबॉक्स
ग्लिफिकॉन ग्लिफिकॉन-प्ले-सर्कल
ग्लिफिकॉन ग्लिफिकॉन-दोहराना
ग्लिफिकॉन ग्लिफिकॉन-ताज़ा करना
ग्लिफिकॉन ग्लिफिकॉन-सूची-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-ताला
ग्लिफिकॉन ग्लिफिकॉन-झंडा
ग्लिफिकॉन ग्लिफिकॉन-हेडफोन
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-बंद करना
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-डाउन
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-अप
ग्लिफिकॉन ग्लिफिकॉन-क्यूआरकोड
ग्लिफिकॉन ग्लिफिकॉन-बारकोड
ग्लिफिकॉन ग्लिफिकॉन-टैग
ग्लिफिकॉन ग्लिफिकॉन-टैग
ग्लिफिकॉन ग्लिफिकॉन-पुस्तक
ग्लिफिकॉन ग्लिफिकॉन-बुकमार्क
ग्लिफिकॉन ग्लिफिकॉन-प्रिंट
ग्लिफिकॉन ग्लिफिकॉन-कैमरा
ग्लिफिकॉन ग्लिफिकॉन-फॉन्ट
ग्लिफिकॉन ग्लिफिकॉन-बोल्ड
ग्लिफिकॉन ग्लिफिकॉन-इटालिक
ग्लिफिकॉन ग्लिफिकॉन-पाठ-ऊँचाई
ग्लिफिकॉन ग्लिफिकॉन-पाठ-चौड़ाई
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-बाएं
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-केंद्र
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-दाएं
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-जस्टिफाई करना
ग्लिफिकॉन ग्लिफिकॉन-सूची
ग्लिफिकॉन ग्लिफिकॉन-इंडेंट-बाएं
ग्लिफिकॉन ग्लिफिकॉन-इंडेंट-दाएं
ग्लिफिकॉन ग्लिफिकॉन-फेसटाइम-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-चित्र
ग्लिफिकॉन ग्लिफिकॉन-नक्शा-मार्कर
ग्लिफिकॉन ग्लिफिकॉन-समायोजित करना
ग्लिफिकॉन ग्लिफिकॉन-टिंट
ग्लिफिकॉन ग्लिफिकॉन-संपादन करना
ग्लिफिकॉन ग्लिफिकॉन-शेयर करो
ग्लिफिकॉन ग्लिफिकॉन-जाँच करो
ग्लिफिकॉन ग्लिफिकॉन-चलना
ग्लिफिकॉन ग्लिफिकॉन-कदम-पिछड़े
ग्लिफिकॉन ग्लिफिकॉन-तेजी से-पिछड़े
ग्लिफिकॉन ग्लिफिकॉन-पिछड़े
ग्लिफिकॉन ग्लिफिकॉन-खेलना
ग्लिफिकॉन ग्लिफिकॉन-विराम देना
ग्लिफिकॉन ग्लिफिकॉन-स्टॉप करना
ग्लिफिकॉन ग्लिफिकॉन-आगे
ग्लिफिकॉन ग्लिफिकॉन-तेज-अग्गें
ग्लिफिकॉन ग्लिफिकॉन-कदम-अग्गें
ग्लिफिकॉन ग्लिफिकॉन-इजेक्ट करना
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-बाएं
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-दाएं
ग्लिफिकॉन ग्लिफिकॉन-प्लस-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-माइनस-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-हटाओ-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-ठीक ऐ-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-प्रश्न-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-जानकारी-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-स्क्रीनशॉट
ग्लिफिकॉन ग्लिफिकॉन-हटाओ-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-ओके-सर्कल
ग्लिफिकॉन ग्लिफिकॉन-बैन-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-तीर-बाएं
ग्लिफिकॉन ग्लिफिकॉन-तीर-दाएं
ग्लिफिकॉन ग्लिफिकॉन-तीर-ऊपर
ग्लिफिकॉन ग्लिफिकॉन-तीर-नीचे
ग्लिफिकॉन ग्लिफिकॉन-शेयर-ऑल्ट
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलना-पूर्ण
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलना-छोटा
ग्लिफिकॉन ग्लिफिकॉन-विस्मयादिबोधक-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-उपहार
ग्लिफिकॉन ग्लिफिकॉन-पत्ता
ग्लिफिकॉन ग्लिफिकॉन-आग
ग्लिफिकॉन ग्लिफिकॉन-आँख खुली
ग्लिफिकॉन ग्लिफिकॉन-आँख-बंद करना
ग्लिफिकॉन ग्लिफिकॉन-चेतावनी-चिन्ह
ग्लिफिकॉन ग्लिफिकॉन-प्लेन
ग्लिफिकॉन ग्लिफिकॉन-कैलेंडर
ग्लिफिकॉन ग्लिफिकॉन-रैंडम
ग्लिफिकॉन ग्लिफिकॉन-टिप्पणी करो
ग्लिफिकॉन ग्लिफिकॉन-चुंबक
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डाउन
ग्लिफिकॉन ग्लिफिकॉन-रीट्वीट करो
ग्लिफिकॉन ग्लिफिकॉन-खरीदारी-गाड़ी
ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-बंद करो
ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-ओपन
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-एचडीडी
ग्लिफिकॉन ग्लिफिकॉन-बुलहॉर्न
ग्लिफिकॉन ग्लिफिकॉन-घंटी
ग्लिफिकॉन ग्लिफिकॉन-प्रमाण पत्र
ग्लिफिकॉन ग्लिफिकॉन-अंगूठा-अप
ग्लिफिकॉन ग्लिफिकॉन-अंगूठे-नीचे
ग्लिफिकॉन ग्लिफिकॉन-हाथ-दाएं
ग्लिफिकॉन ग्लिफिकॉन-हत्थ-बाएं
ग्लिफिकॉन ग्लिफिकॉन-हैथ-अप
ग्लिफिकॉन ग्लिफिकॉन-हत्थ-नीचे
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-दाएं
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-बाएं
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-ऊपर
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-नीचे
ग्लिफिकॉन ग्लिफिकॉन-ग्लोब
ग्लिफिकॉन ग्लिफिकॉन-रिंच
ग्लिफिकॉन ग्लिफिकॉन-कार्य
ग्लिफिकॉन ग्लिफिकॉन-फिल्टर
ग्लिफिकॉन ग्लिफिकॉन-अटैची
ग्लिफिकॉन ग्लिफिकॉन-फुलस्क्रीन
ग्लिफिकॉन ग्लिफिकॉन-डैशबोर्ड
ग्लिफिकॉन ग्लिफिकॉन-पेपरक्लिप
ग्लिफिकॉन ग्लिफिकॉन-हृदय-खाली
ग्लिफिकॉन ग्लिफिकॉन-लिंक
ग्लिफिकॉन ग्लिफिकॉन-फोन
ग्लिफिकॉन ग्लिफिकॉन-पुशपिन
ग्लिफिकॉन ग्लिफिकॉन-यूएसडी
ग्लिफिकॉन ग्लिफिकॉन-जीबीपी
ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट करना
ग्लिफिकॉन ग्लिफिकॉन-वर्णमाला द्वारा क्रमबद्ध करना
ग्लिफिकॉन ग्लिफिकॉन-वर्णमाला-अल्ट द्वारा-छंटाई
ग्लिफिकॉन ग्लिफिकॉन-क्रमबद्ध तरीके कन्नै
ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट-बाय-ऑर्डर-ऑल्ट
ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट-बाय-एट्रिब्यूट्स
ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट-बाय-एट्रिब्यूट्स-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-अनचेक कीता गेआ
ग्लिफिकॉन ग्लिफिकॉन-विस्तार करना
ग्लिफिकॉन ग्लिफिकॉन-ढहना-नीचे
ग्लिफिकॉन ग्लिफिकॉन-कलैप्स-अप
ग्लिफिकॉन ग्लिफिकॉन-लॉग-इन करना
ग्लिफिकॉन ग्लिफिकॉन-फ्लैश
ग्लिफिकॉन ग्लिफिकॉन-लॉग-आउट
ग्लिफिकॉन ग्लिफिकॉन-नई-विंडो
ग्लिफिकॉन ग्लिफिकॉन-रिकॉर्ड
ग्लिफिकॉन ग्लिफिकॉन-बचाओ
ग्लिफिकॉन ग्लिफिकॉन-ओपन
ग्लिफिकॉन ग्लिफिकॉन-बचाया गया
ग्लिफिकॉन ग्लिफिकॉन-आयात करना
ग्लिफिकॉन ग्लिफिकॉन-निर्यात करना
ग्लिफिकॉन ग्लिफिकॉन-भेजना
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-डिस्क
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-बचाया
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-हटाओ
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-बचाओ
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-ओपन
ग्लिफिकॉन ग्लिफिकॉन-क्रेडिट-कार्ड
ग्लिफिकॉन ग्लिफिकॉन-हस्तांतरण
ग्लिफिकॉन ग्लिफिकॉन-कटलरी
ग्लिफिकॉन ग्लिफिकॉन-हेडर
ग्लिफिकॉन ग्लिफिकॉन-संकुचित
ग्लिफिकॉन ग्लिफिकॉन-ईयरफोन
ग्लिफिकॉन ग्लिफिकॉन-फोन-ऑल्ट
ग्लिफिकॉन ग्लिफिकॉन-टॉवर
ग्लिफिकॉन ग्लिफिकॉन-आँकड़े
ग्लिफिकॉन ग्लिफिकॉन-एसडी-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-एचडी-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-उपशीर्षक
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-स्टीरियो
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-डॉल्बी
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-5-1
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-6-1
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-7-1
ग्लिफिकॉन ग्लिफिकॉन-कॉपीराइट-मार्क
ग्लिफिकॉन ग्लिफिकॉन-पंजीकरण-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-बादल-डाउनलोड करो
ग्लिफिकॉन ग्लिफिकॉन-बादल-अपलोड करना
ग्लिफिकॉन ग्लिफिकॉन-पेड़-शंकुधारी
ग्लिफिकॉन ग्लिफिकॉन-पेड़-पर्णपाती
ग्लिफिकॉन ग्लिफिकॉन-सीडी
ग्लिफिकॉन ग्लिफिकॉन-सेव-फाइल
ग्लिफिकॉन ग्लिफिकॉन-ओपन-फाइल
ग्लिफिकॉन ग्लिफिकॉन-स्तर-अप
ग्लिफिकॉन ग्लिफिकॉन-कॉपी
ग्लिफिकॉन ग्लिफिकॉन-पेस्ट
ग्लिफिकॉन ग्लिफिकॉन-अलर्ट
ग्लिफिकॉन ग्लिफिकॉन-समीकरण करना
ग्लिफिकॉन ग्लिफिकॉन-राजा
ग्लिफिकॉन ग्लिफिकॉन-रानी
ग्लिफिकॉन ग्लिफिकॉन-प्यादा
ग्लिफिकॉन ग्लिफिकॉन-बिशप
ग्लिफिकॉन ग्लिफिकॉन-शूरवीर
ग्लिफिकॉन ग्लिफिकॉन-बेबी-फॉर्मूला
ग्लिफिकॉन ग्लिफिकॉन-टेंट
ग्लिफिकॉन ग्लिफिकॉन-ब्लैकबोर्ड
ग्लिफिकॉन ग्लिफिकॉन-बिस्तर
ग्लिफिकॉन ग्लिफिकॉन-सेब
ग्लिफिकॉन ग्लिफिकॉन-मिटाना
ग्लिफिकॉन ग्लिफिकॉन-रेत दी घड़ी
ग्लिफिकॉन ग्लिफिकॉन-दीपक
ग्लिफिकॉन ग्लिफिकॉन-डुप्लिकेट
ग्लिफिकॉन ग्लिफिकॉन-गुल्लक-बैंक
ग्लिफिकॉन ग्लिफिकॉन-कैंची
ग्लिफिकॉन ग्लिफिकॉन-बिटकॉइन
ग्लिफिकॉन ग्लिफिकॉन-बीटीसी
ग्लिफिकॉन ग्लिफिकॉन-एक्सबीटी
ग्लिफिकॉन ग्लिफिकॉन-येन
ग्लिफिकॉन ग्लिफिकॉन-जेपीआई
ग्लिफिकॉन ग्लिफिकॉन-रूबल
ग्लिफिकॉन ग्लिफिकॉन-रगड़ना
ग्लिफिकॉन ग्लिफिकॉन-स्केल
ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली
ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली-स्वाद
ग्लिफिकॉन ग्लिफिकॉन-शिक्षा
ग्लिफिकॉन ग्लिफिकॉन-विकल्प-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-विकल्प-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-मेनू-हैम्बर्गर
ग्लिफिकॉन ग्लिफिकॉन-मोडल-विंडो
ग्लिफिकॉन ग्लिफिकॉन-तेल
ग्लिफिकॉन ग्लिफिकॉन-अनाज
ग्लिफिकॉन ग्लिफिकॉन-धूप दा चश्मा
ग्लिफिकॉन ग्लिफिकॉन-पाठ-आकार
ग्लिफिकॉन ग्लिफिकॉन-पाठ-रंग
ग्लिफिकॉन ग्लिफिकॉन-पाठ-पृष्ठभूमि
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-शीर्ष
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-नीचे
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-बाएं
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-दाएं
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-दाएं
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-बाएं
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-नीचे
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-शीर्ष
ग्लिफिकॉन ग्लिफिकॉन-कंसोल
ग्लिफिकॉन ग्लिफिकॉन-सुपरस्क्रिप्ट
ग्लिफिकॉन ग्लिफिकॉन-सबस्क्रिप्ट
ग्लिफिकॉन ग्लिफिकॉन-मेनू-बाएं
ग्लिफिकॉन ग्लिफिकॉन-मेनू-दाएं
ग्लिफिकॉन ग्लिफिकॉन-मेनू-नीचे
ग्लिफिकॉन ग्लिफिकॉन-मेनू-अप
इस्तेमाल किवें करना
प्रदर्शन कारणें कन्नै, सारे आइकनें गी इक आधार वर्ग ते व्यक्तिगत आइकन वर्ग दी लोड़ होंदी ऐ। इस्तेमाल करने लेई, निम्नलिखित कोड गी लगभग कुतै बी रक्खो। उचित पैडिंग आस्तै आइकन ते पाठ दे बश्कार इक जगह ज़रूर छोड़ो.
होर घटकें कन्नै नेईं मिलाओ
आइकन वर्गें गी होर घटकें कन्नै सीधे तौर पर जोड़ेआ नेईं जाई सकदा ऐ। इन्हें गी इक गै तत्व पर होर वर्गें कन्नै नेईं बरतेआ जाना चाहिदा। इसदे बजाय, इक नेस्टेड जोड़ो <span>ते आइकन वर्गें गी <span>.
सिर्फ खाली तत्वें पर इस्तेमाल आस्तै
आइकन वर्गें दा इस्तेमाल सिर्फ उनें तत्वें उप्पर गै कीता जाना चाहिदा जिंदे च कोई पाठ सामग्री नेईं होऐ ते कोई बाल तत्व नेईं होऐ.
आइकन फॉन्ट स्थान बदलना
बूटस्ट्रैप एह् मनदा ऐ जे आइकन फॉन्ट फाइलें गी डायरेक्टरी च स्थित होग ../fonts/, संकलित CSS फाइलें दे सापेक्ष. उनें फॉन्ट फाइलें गी लेई जाने जां उंदा नांऽ बदलने दा मतलब ऐ CSS गी त्रै तरीकें च इक तरीके कन्नै अपडेट करना:
स्रोत कम फाइलें च @icon-font-pathते/जां चर बदलो .@icon-font-name
जेह् ड़ा बी विकल्प तुंदे विशिष्ट विकास सेटअप कन्नै बेह् तर अनुकूल होऐ उसदा इस्तेमाल करो।
सुलभ आइकन
सहायक तकनीकें दे आधुनिक संस्करणें च सीएसएस पैदा कीती गेदी सामग्री दी घोशणा कीती जाग, ते कन्नै गै विशिश्ट यूनिकोड वर्णें दी बी घोशणा कीती जाग। स्क्रीन रीडरें च अनचाहे ते भ्रमित आउटपुट थमां बचने आस्तै (खासकर जिसलै आइकनें दा इस्तेमाल विशुद्ध रूप कन्नै सजावट आस्तै कीता जंदा ऐ), अस उनेंगी aria-hidden="true"विशेषता कन्नै छिपांदे आं।
जेकर तुस अर्थ गी संप्रेषित करने आस्तै इक आइकन दा इस्तेमाल करा करदे ओ (केवल सजावटी तत्व दे रूप च नेईं ) तां एह् सुनिश्चत करो जे एह् अर्थ सहायक तकनीकें गी बी संप्रेषित कीता जा - मसाल दे तौर पर, अतिरिक्त सामग्री शामल करो, जेह् ड़ी .sr-onlyकक्षा कन्नै नेत्रहीन रूप कन्नै छिपी दी ऐ।
जेकर तुस कुसै होर पाठ कन्नै नियंत्रण बना करदे ओ (जिऱयां इक <button>जेह् ड़ा सिर्फ इक चिह् न होंदा ऐ ), तां तुसेंगी नियंत्रण दे मकसद दी पन्छान करने आस्तै हमेशा वैकल्पिक सामग्री उपलब्ध करोआनी चाहिदी , तां जे एह् सहायक तकनीकें दे बरतूनकर्ताएं गी समझ च औग। इस मामले च, तुस aria-labelनियंत्रण पर गै इक विशेषता जोड़ी सकदे ओ।
उदाहरण दे
बटनें च, इक टूलबार, नेविगेशन, जां प्रीपेंड फार्म इनपुटें आस्तै बटन समूहें च उंदा इस्तेमाल करो.
इक अलर्ट च बरतेआ जाने आह् ला इक चिह् न जेह् ड़ा इस गल्लै गी संप्रेषित करने लेई बरतेआ जंदा ऐ जे एह् इक त्रुटि संदेश ऐ, जिस .sr-onlyच इस संकेत गी सहायक तकनीकें दे बरतूनकर्ताएं गी पजाने लेई अतिरिक्त पाठ ऐ।
गलती:इक मान्य ईमेल पता दर्ज करो
ड्रॉपडाउन
लिंक दी सूची प्रदर्शत करने आस्तै टॉगल करने योग्य, संदर्भ मेनू। ड्रॉपडाउन जावास्क्रिप्ट प्लगइन कन्नै इंटरएक्टिव बनाया गेआ .
मसाल
ड्रॉपडाउन दे ट्रिगर ते ड्रॉपडाउन मेनू गी अंदर लपेटो .dropdown, जां कुसै होर तत्व गी जेह् ड़ा घोशित करदा ऐ position: relative;. फिर मेनू दा एचटीएमएल जोड़ो।
डिफ़ॉल्ट रूप कन्नै, इक ड्रॉपडाउन मेनू अपने आप गै 100% शीर्शक थमां ते अपने माता-पिता दे बाएं पास्सै कन्नै तैह् त कीता जंदा ऐ। ड्रॉपडाउन मेनू गी दाएं कन्नै संरेखित करने .dropdown-menu-rightच इक च जोड़ो ।.dropdown-menu
अतिरिक्त स्थिति दी लोड़ हो सकदी ऐ
ड्रॉपडाउन दस्तावेज दे सामान्य प्रवाह दे अंदर CSS दे राहें स्वतः स्थापित कीते जंदे न। इसदा मतलब ऐ जे ड्रॉपडाउन किश overflowगुणें कन्नै माता-पिता आसेआ क्रॉप कीता जाई सकदा ऐ जां व्यूपोर्ट दी सीमाएं थमां बाह् र दिक्खेआ जाई सकदा ऐ. इनें मुद्दें गी जि’यां-जि’यां उट्ठदे न उ’यां-उ’यां अपने आपै गी संबोधित करो।
पदावनत .pull-rightसंरेखण
v3.1.0 दे रूप च, अस .pull-rightड्रॉपडाउन मेनू पर डिप्रीकेट कीता ऐ। मेनू दा राइट-लाइन करने लेई, इस्तेमाल करो .dropdown-menu-right. नवबार च दाहिने-संरेखित nav घटक मेनू गी स्वतः संरेखित करने आस्तै इस वर्ग दे मिक्सिन संस्करण दा उपयोग करदे न. इसगी ओवरराइड करने लेई, इस्तेमाल करो .dropdown-menu-left.
हेडर
कुसै बी ड्रॉपडाउन मेनू च कार्रवाईयें दे खंडें गी लेबल करने आस्तै इक हेडर जोड़ो.
बटन समूह कन्नै इक गै लाइन पर बटनें दी इक श्रृंखला गी इकट्ठा करो। साढ़े बटन प्लगइन कन्नै वैकल्पिक जावास्क्रिप्ट रेडियो ते चेकबॉक्स शैली व्यवहार पर जोड़ो .
बटन समूहें च टूलटिप्स & पॉपओवरें गी खास सेटिंग दी लोड़ होंदी ऐ
इक दे अंदर तत्वें पर टूलटिप्स जां पॉपओवर दा इस्तेमाल करदे बेल्लै .btn-groupतुसेंगी container: 'body'अनचाहे दुष्प्रभावें थमां बचने दा विकल्प निर्दिश्ट करना होग (जिऱयां तत्व गी चौड़ा होना ते/जां टूलटिप जां पॉपओवर ट्रिगर होने पर अपने गोल कोने खोह् ल्लना)।
सही सुनिश्चित करो roleते इक लेबल उपलब्ध करोआओ
सहायक तकनीकें गी – जि’यां स्क्रीन रीडर – गी संप्रेषित करने आस्तै जे बटनें दी इक श्रृंखला गी समूहीकृत कीता गेआ ऐ, इक उचित roleविशेषता उपलब्ध करोआने दी लोड़ ऐ। बटन समूहें आस्तै, एह् होग role="group", जदके टूलबार च इक role="toolbar".
इक अपवाद ऐसे समूह न जिंदे च सिर्फ इक नियंत्रण (उदाहरण दे तौर पर तत्वें कन्नै जायज बटन समूह<button> ) जां इक ड्रॉपडाउन होंदा ऐ.
roleइसदे अलावा, समूहें ते टूलबारें गी इक स्पश्ट लेबल दित्ता जाना चाहिदा, की जे मते सारे सहायक तकनीकें गी नेईं ते सही विशेषता दी मौजूदगी दे बावजूद, उ’नेंगी घोशित नेईं कीता जाग । इत्थें दित्ते गेदे उदाहरनें च अस aria-label, पर विकल्पें दा इस्तेमाल करदे आं जि’यां aria-labelledbyबी इस्तेमाल कीता जाई सकदा ऐ।
इक समूह च हर बटन पर बटन साइजिंग क्लासें गी लागू करने दे बजाय, बस .btn-group-*हर इक च जोड़ो .btn-group, जिंदे च मते सारे समूहें गी नेस्ट करने पर बी शामल ऐ.
घोंसला बनाना
जदूं तुस बटनें दी श्रृंखला कन्नै मिक्स ड्रॉपडाउन मेनू चांह् दे ओ तां .btn-groupइक दुए दे अंदर रक्खो ..btn-group
बटनें दे इक समूह गी बराबर आकारें च खिंचने आस्तै बनाओ तां जे ओह्दे माता-पिता दी पूरी चौड़ाई गी फैलाया जाई सकै। बटन समूह दे अंदर बटन ड्रॉपडाउन कन्नै बी कम्म करदा ऐ।
सीमाएं गी संभालना
बटनें गी जायज ठहराने लेई इस्तेमाल कीते जाने आह् ले विशिष्ट HTML ते CSS दे कारण (अर्थात display: table-cell), उंदे बश्कार सीमाएं गी दोगुना कीता जंदा ऐ। नियमित बटन समूहें च, margin-left: -1pxसीमाएं गी हटाने दे बजाय ढेर करने लेई बरतेआ जंदा ऐ। हालांकि, marginकन्नै कम्म नेईं करदा display: table-cell. नतीजे च, बूटस्ट्रैप च अपने अनुकूलन दे आधार उप्पर, तुस सीमाएं गी हटाना जां दुबारा रंगना चांह् दे ओ.
आईई8 ते सीमाएं
इंटरनेट एक्सप्लोरर 8 इक जायज बटन समूह च बटनें पर सीमाएं गी रेंडर नेईं करदा ऐ, चाहे ओह् चालू <a>होऐ जां <button>तत्व। उसदे आसपास जाने लेई, हर बटन गी दुए च लपेटो .btn-group.
जेकर <a>तत्वें दा इस्तेमाल बटन दे रूप च कम्म करने आस्तै कीता जंदा ऐ – वर्तमान पृष्ठ दे अंदर कुसै होर दस्तावेज जां खंड च नेविगेट करने दे बजाय पृष्ठ च कार्यक्षमता गी ट्रिगर करने आस्तै – उ’नेंगी इक उचित role="button".
<button>तत्वों के साथ
<button>तत्वें कन्नै जायज बटन समूहें दा इस्तेमाल करने आस्तै , तुसेंगी हर बटन गी इक बटन समूह च लपेटना होग . ज्यादातर ब्राउज़र तत्वें गी औचित्य आस्तै साढ़े CSS गी ठीक ढंगै कन्नै लागू नेईं करदे <button>न , पर चूंकि अस बटन ड्रॉपडाउन दा समर्थन करने आं , इस करी अस उसदे आसपास कम्म करी सकने आं ।
बटन ड्रॉपडाउन होंदा ऐ
इक ड्रॉपडाउन मेनू गी इक दे अंदर रक्खियै .btn-groupते उचित मेनू मार्कअप उपलब्ध करोआइयै ट्रिगर करने आस्तै कुसै बी बटन दा इस्तेमाल करो.
प्लगइन निर्भरता
बटन ड्रॉपडाउन आस्तै ड्रॉपडाउन प्लगइन गी बूटस्ट्रैप दे तुंदे संस्करण च शामल करने दी लोड़ ऐ.
कुसै बी पाठ-आधारत दे पैह् ले, बाद जां दौनें पास्सै पाठ जां बटन जोड़ियै फार्म नियंत्रणें गी विस्तार करो <input>. .input-groupइक .input-group-addonजां कन्नै प्रयोग करो .input-group-btnइक इकल च तत्वें गी प्रीपेंड करने जां जोड़ने आस्तै .form-control.
पाठ्य <input>s ही
इत्थै तत्वें दा इस्तेमाल करने थमां बचो <select>कीजे एह् वेबकिट ब्राउज़रें च पूरी चाल्ली स्टाइल नेईं कीते जाई सकदे न.
<textarea>इत्थै तत्वें दा इस्तेमाल करने थमां बचो कीजे rowsकिश मामलें च उंदी विशेषता दा आदर नेईं कीता जाग।
इनपुट समूहें च टूलटिप्स & पॉपओवरें गी खास सेटिंग दी लोड़ होंदी ऐ
इक दे अंदर तत्वें पर टूलटिप्स जां पॉपओवर दा इस्तेमाल करदे बेल्लै .input-groupतुसेंगी container: 'body'अनचाहे दुष्प्रभावें थमां बचने दा विकल्प निर्दिश्ट करना होग (जिऱयां तत्व गी चौड़ा होना ते/जां टूलटिप जां पॉपओवर ट्रिगर होने पर अपने गोल कोने खोह् ल्लना)।
होर घटकें कन्नै नेईं मिलाओ
फार्म समूहें जां ग्रिड स्तंभ वर्गें गी सीधे इनपुट समूहें कन्नै नेईं मिलाओ. इसदे बजाय, इनपुट समूह गी फार्म समूह जां ग्रिड कन्नै सरबंधत तत्व दे अंदर नेस्ट करो.
हमेशा लेबल जोड़ना
जेकर तुस हर इनपुट आस्तै इक लेबल नेईं शामल करदे ओ तां स्क्रीन रीडरें गी तुंदे फार्म कन्नै परेशानी होग। इनें इनपुट समूहें लेई, एह् सुनिश्चत करो जे कुसै बी चाल्लीं दे अतिरिक्त लेबल जां कार्यक्षमता गी सहायक प्रौद्योगिकी गी सौंपेआ जा।
इस्तेमाल कीती जाने आह् ली सटीक तकनीक (दिक्खने आह् ले <label>तत्व, वर्ग <label>दा इस्तेमाल करदे होई छिपे दे तत्व , जां , , , जां विशेषता दा इस्तेमाल) ते केह् ड़ी अतिरिक्त जानकारी गी संप्रेषित करने दी लोड़ होग, एह् इंटरफेस विजेट दे सटीक किस्म दे आधार उप्पर बक्ख-बक्ख होग जेह् ड़ा तुस लागू करा करदे ओ. इस भाग च दित्ते गेदे उदाहरनें च किश सुझाए गेदे, केस-विशिष्ट दृष्टिकोण दित्ते गेदे न।.sr-onlyaria-labelaria-labelledbyaria-describedbytitleplaceholder
अस इक गै पास्सै मते सारे ऐड-ऑन ( .input-group-addonजां ) दा समर्थन नेईं करदे।.input-group-btn
अस इक गै इनपुट समूह च मते सारे फार्म-कंट्रोल दा समर्थन नेईं करदे।
साइज करना
सापेक्ष रूप आकार वर्गें गी .input-groupअपने आप च जोड़ो ते अंदर सामग्री स्वतः आकार बदलग-हर तत्व पर फार्म नियंत्रण आकार वर्गें गी दोहराने दी लोड़ नेईं ऐ.
चेकबॉक्स ते रेडियो ऐडॉन
पाठ दी बजाय इक इनपुट समूह दे ऐडॉन दे अंदर कुसै बी चेकबॉक्स जां रेडियो विकल्प गी रक्खो.
बटन ऐडॉन्स
इनपुट समूहें च बटन थोह् ड़ी-मती बक्ख-बक्ख न ते नेस्टिंग दे इक अतिरिक्त स्तर दी लोड़ होंदी ऐ। , दे बजाय .input-group-addon, तुसेंगी .input-group-btnबटनें गी लपेटने लेई इस्तेमाल करने दी लोड़ होग। एह् डिफाल्ट ब्राउज़र शैलियें दे कारण जरूरी ऐ जेह् ड़ी ओवरराइड नेईं कीती जाई सकदी ऐ.
ड्रॉपडाउन कन्नै बटन
खंडित बटन
कई बटन
जदके तुस प्रति साइड सिर्फ इक ऐड-ऑन करी सकदे ओ , तां तुस इक गै दे अंदर मते सारे बटन हो सकदे ओ .input-group-btn.
नवस जी
बूटस्ट्रैप च उपलब्ध नवें च साझा मार्कअप ऐ , जेह् ड़ा आधार .navवर्ग कन्नै शुरू होंदा ऐ , ते कन्नै गै साझा राज्य बी ऐ । हर शैली दे बीच स्विच करने लेई संशोधक वर्गें गी स्वैप करो.
टैब पैनल आस्तै navs दा इस्तेमाल करने आस्तै जावास्क्रिप्ट टैब प्लगइन दी लोड़ ऐ
नेविगेशन दे रूप च इस्तेमाल कीते गेदे नवें गी सुलभ बनाओ
role="navigation"जेकर तुस इक नेविगेशन बार उपलब्ध करोआने आस्तै navs दा इस्तेमाल करा करदे ओ तां , दे सारें शा तार्किक पैतृक कंटेनर च इक गी जरूर जोड़ो , जां पूरे नेविगेशन दे चारों-पार <ul>इक तत्व लपेटो . <nav>भूमिका गी अपने आपै च नेईं जोड़ो <ul>, कीजे इस कन्नै इसगी सहायक तकनीकें आसेआ इक वास्तविक सूची दे रूप च घोशित करने थमां रोकेआ जाग।
टैब्स
ध्यान रक्खो जे .nav-tabsक्लास गी .navबेस क्लास दी लोड़ ऐ।
आसानी कन्नै टैब जां गोलियां अपने माता-पिता दी बराबर चौड़ाई बनाओ 768px थमां चौड़ा स्क्रीन पर .nav-justified. छोटे स्क्रीन पर, नव लिंक ढेर होंदे न।
उचित नवबार नव लिंक इसलै समर्थत नेईं न.
सफारी ते रिस्पांसिव जायज नवस
v9.1.2 थमां, सफारी इक बग प्रदर्शत करदा ऐ जिस च तुंदे ब्राउज़र दा आकार क्षैतिज रूप कन्नै बदलने कन्नै जायज नेव च रेंडरिंग त्रुटियां पैदा होंदियां न जेह् ड़ियां ताज़ा करने पर साफ होई जंदियां न. एह् बग उचित nav उदाहरण च बी दस्सेआ गेदा ऐ .
नवबार प्रतिक्रियाशील मेटा घटक न जेह् ड़े तुंदे एप्लिकेशन जां साइट आस्तै नेविगेशन हेडर दे रूप च कम्म करदे न। एह् मोबाइल दृश्यें च ढहने आह् ले शुरू होंदे न (ते टॉगल करने योग्य होंदे न) ते उपलब्ध दृश्य-पोर्ट दी चौड़ाई बधने कन्नै क्षैतिज होई जंदे न।
उचित नवबार नव लिंक इसलै समर्थत नेईं न.
उफनने वाली सामग्री
चूंकि बूटस्ट्रैप गी नेईं पता ऐ जे तुंदे नवबार च सामग्री गी किन्नी जगह दी लोड़ ऐ , इस करियै तुसेंगी इक दूई पंक्ति च सामग्री लपेटने कन्नै मुद्दें दा सामना करना पौंदा ऐ. इसदा हल करने लेई तुस करी सकदे ओ:
उस बिंदु गी बदलो जिस पर तुंदा नवबार संकुचित ते क्षैतिज मोड दे बीच स्विच होंदा ऐ. चर गी अनुकूलित करो @grid-float-breakpointजां अपनी खुद दी मीडिया क्वेरी जोड़ो।
जावास्क्रिप्ट प्लगइन दी लोड़ ऐ
जेकर जावास्क्रिप्ट अक्षम ऐ ते व्यूपोर्ट इन्ना संकीर्ण ऐ जे नवबार ढहदा ऐ तां नवबार गी विस्तार करना ते .navbar-collapse.
उत्तरदायी नवबार गी संकुचित प्लगइन गी बूटस्ट्रैप दे तुंदे संस्करण च शामल करने दी लोड़ ऐ.
ढहने आला मोबाइल नवबार ब्रेकपॉइंट बदलना
नवबार अपने ऊर्ध्वाधर मोबाइल दृश्य च ढहदा ऐ जिसलै व्यूपोर्ट थमां संकीर्ण होंदा ऐ @grid-float-breakpoint, ते अपने क्षैतिज गैर-मोबाइल दृश्य च विस्तार होंदा ऐ जिसलै दृश्यपोर्ट घट्ट शा घट्ट @grid-float-breakpointचौड़ाई च होंदा ऐ। नवबार कदूं ढहने/विस्तार करने दा नियंत्रण करने आस्तै इस चर गी कम स्रोत च समायोजित करो. डिफाल्ट मान ऐ 768px(सबने शा घट्ट "छोटी" जां "टैबलेट" स्क्रीन)।
नवबार गी सुलभ बनाओ
इक तत्व दा इस्तेमाल करना सुनिश्चत करो <nav>जां, जेकर इक होर सामान्य तत्व दा इस्तेमाल करदे ओ जि’यां a <div>, तां role="navigation"हर नवबार च a जोड़ो तां जे सहायक तकनीकें दे बरतूनकर्ताएं आस्तै इसगी इक लैंडमार्क क्षेत्र दे रूप च स्पश्ट रूप कन्नै पन्छानेआ जाई सकै।
ब्रांड छवि
पाठ गी इक <img>. चूंकि दी .navbar-brandअपनी पैडिंग ते ऊंचाई ऐ, इसलेई तुसेंगी अपनी छवि दे आधार उप्पर किश CSS गी ओवरराइड करने दी लोड़ होग.
रूप दे
.navbar-formसंकीर्ण दृश्य-पोर्टें च उचित ऊर्ध्वाधर संरेखण ते संकुचित व्यवहार आस्तै फार्म सामग्री गी अंदर रक्खो . नवबार सामग्री दे अंदर एह् कुत्थें रौंह् दा ऐ, इसदा फैसला करने आस्तै संरेखण विकल्पें दा इस्तेमाल करो.
इक हेड अप दे रूप च, मिक्सिन दे राहें .navbar-formअपने कोड दा मता हिस्सा साझा करदा ऐ । किश फार्म नियंत्रणें गी, इनपुट समूहें दी तर्ज पर, इक नवबार दे अंदर ठीक ढंगै कन्नै दस्सने आस्तै नियत चौड़ाई दी लोड़ होग..form-inline
जेकर तुस हर इनपुट आस्तै इक लेबल नेईं शामल करदे ओ तां स्क्रीन रीडरें गी तुंदे फार्म कन्नै परेशानी होग। .sr-onlyइनें इनलाइन फार्में लेई, तुस क्लास दा इस्तेमाल करियै लेबल गी छुपाई सकदे ओ । सहायक तकनीकें लेई लेबल उपलब्ध करोआने दे होर वैकल्पिक तरीके न, जि’यां aria-label, aria-labelledbyजां titleएट्रिब्यूट। जेकर इनें चा कोई बी मौजूद नेईं ऐ तां स्क्रीन रीडर placeholder, जेकर मौजूद ऐ तां, एट्रिब्यूट दा इस्तेमाल करने दा सहारा लैई सकदे न, पर ध्यान रक्खो जे placeholderहोर लेबलिंग तरीकें दे बदले दे रूप च इसदा इस्तेमाल करने दी सलाह नेईं दित्ती जंदी ऐ।
बटन दे
नवबार च उन्हें लंबवत केंद्रत करने आस्तै a च नेईं रौंह् दे तत्वें च .navbar-btnवर्ग गी जोड़ो .<button><form>
संदर्भ-विशिष्ट प्रयोग
मानक बटन वर्गें दी तर्ज पर , पर ते तत्वें .navbar-btnदा इस्तेमाल कीता जाई सकदा ऐ । हालांकि, न ते न गै मानक बटन वर्गें दा इस्तेमाल .<a><input>.navbar-btn<a>.navbar-nav
पाठ
पाठ दी स्ट्रिंग्स गी इक तत्व च लपेटो .navbar-text, आमतौर पर <p>उचित लीडिंग ते रंग आस्तै इक टैग पर.
गैर-नव लिंक
मानक लिंक दा इस्तेमाल करने आह् ले लोकें आस्तै जेह् ड़े नियमित नवबार नेविगेशन घटक दे अंदर नेईं न , .navbar-linkडिफाल्ट ते उल्टे नवबार विकल्पें आस्तै उचित रंगें गी जोड़ने आस्तै वर्ग दा इस्तेमाल करो.
घटक संरेखण करना
nav लिंक, फार्म, बटन, जां पाठ गी संरेखित करो, .navbar-leftजां .navbar-rightउपयोगिता वर्गें दा इस्तेमाल करदे होई. दौनें वर्गें गी निर्दिश्ट दिशा च इक CSS फ्लोट जोड़ेआ जाग। मसाल आस्तै, nav लिंक गी संरेखित करने आस्तै, उ’नेंगी <ul>लागू कीते गेदे सरबंधत उपयोगिता वर्ग कन्नै इक बक्ख च रक्खो.
.pull-leftएह् वर्ग ते दे मिक्सिन-एड संस्करण न .pull-right, पर एह् डिवाइस आकारें च नवबार घटकें गी आसान निबड़ने आस्तै मीडिया क्वेरीएं गी स्कोप कीते गेदे न.
कई घटकों को सही संरेखित करना
नवबारें च इसलै मते सारे .navbar-rightवर्गें कन्नै इक सीमा ऐ। सामग्री गी ठीक ढंगै कन्नै स्पेस करने आस्तै, अस आखरी .navbar-rightतत्व पर नकारात्मक मार्जिन दा इस्तेमाल करदे आं। जदूं उस वर्ग दा इस्तेमाल करदे होई मते सारे तत्व होंदे न तां एह् मार्जिन इरादे दे मताबक कम्म नेईं करदे न।
अस इस पर उस बेल्लै दुबारा दिक्खगे जिसलै अस उस घटक गी v4 च दुबारा लिखी सकने आं।
टॉप पर फिक्स हो गया
केंद्र ते पैड नवबार सामग्री गी इक जां गी जोड़ो .navbar-fixed-topते शामल करो।.container.container-fluid
बॉडी पैडिंग दी लोड़ ऐ
स्थिर नवबार तुंदी दूई सामग्री गी ओवरले करग, जदूं तकर paddingतुस <body>. अपने मूल्यें गी आज़माइयै दिक्खो जां हेठ दित्ते गेदे साढ़े स्निपेट दा इस्तेमाल करो। सुझाऽ: डिफ़ॉल्ट रूप कन्नै, नवबार 50px उच्च ऐ।
कोर बूटस्ट्रैप सीएसएस दे बाद इसगी शामल करना सुनिश्चत करो .
नीचे तय कर दी गई
केंद्र ते पैड नवबार सामग्री गी इक जां गी जोड़ो .navbar-fixed-bottomते शामल करो।.container.container-fluid
बॉडी पैडिंग दी लोड़ ऐ
paddingस्थिर नवबार तुंदी दूई सामग्री गी ओवरले करग, जदूं तकर तुस <body>. अपने मूल्यें गी आज़माइयै दिक्खो जां हेठ दित्ते गेदे साढ़े स्निपेट दा इस्तेमाल करो। सुझाऽ: डिफ़ॉल्ट रूप कन्नै, नवबार 50px उच्च ऐ।
कोर बूटस्ट्रैप सीएसएस दे बाद इसगी शामल करना सुनिश्चत करो .
बहु-पृष्ठ पृष्ठकरण घटक कन्नै अपनी साइट जां ऐप आस्तै पृष्ठांकन लिंक उपलब्ध करोआओ , जां सरल पेजर विकल्प .
डिफ़ॉल्ट पृष्ठांकन
Rdio थमां प्रेरित सरल पृष्ठांकन, ऐप ते सर्च रिजल्ट आस्तै शानदार। बड्डा ब्लॉक छूटना मुश्कल ऐ, आसानी कन्नै स्केल कीता जाई सकदा ऐ, ते बड्डे क्लिक क्षेत्र उपलब्ध करोआंदा ऐ।
पृष्ठांकन घटक गी लेबल करना
पृष्ठांकन घटक गी इक <nav>तत्व च लपेटेआ जाना चाहिदा तां जे इसगी स्क्रीन रीडरें ते होर सहायक तकनीकें गी स्क्रीन करने आस्तै नेविगेशन खंड दे रूप च पन्छानेआ जाई सकै। इसदे अलावा, कीजे इक पृष्ठ च पैह् ले थमां गै इक थमां मते इस चाल्ली दे नेविगेशन खंड होने दी संभावना ऐ (जिऱयां हेडर च प्राथमिक नेविगेशन, जां इक साइडबार नेविगेशन), इस आस्तै इक वर्णनात्मक उपलब्ध करोआने दी सलाह दित्ती जंदी ऐ aria-labelजेह् <nav>ड़ा इसदे मकसद गी दर्शांदा ऐ। मसाल आस्तै, जेकर पृष्ठांकन घटक दा इस्तेमाल खोज परिणामें दे इक सेट दे बीच नेविगेट करने आस्तै कीता जंदा ऐ तां इक उचित लेबल होई सकदा ऐ aria-label="Search results pages".
अक्षम ते सक्रिय राज्यें गी
लिंक बक्ख-बक्ख परिस्थितियें लेई अनुकूलन योग्य न। .disabledअनक्लिक कीते जाने आह् ले लिंक आस्तै ते .activeमौजूदा पृष्ठ गी दर्शाने आस्तै इस्तेमाल करो .
अस सलाह दिन्दे आं जे तुस सक्रिय जां अक्षम एंकर गी , आस्तै स्वैप आउट करो <span>, जां पिछले/अगले तीरें दे मामले च एंकर गी छोड़ो , तां जे इरादा शैलियें गी बरकरार रक्खदे होई क्लिक फ़ंक्शनलटी गी हटाया जाई सकै.
हल्के मार्कअप ते शैलियें कन्नै सरल पृष्ठांकन कार्यान्वयनें लेई त्वरित पिछले ते अगले लिंक। ब्लॉग जां पत्रिकाएं जनेह् साधारण साइटें आस्तै एह् बड़ा शैल ऐ।
डिफ़ॉल्ट उदाहरण ऐ
डिफ़ॉल्ट रूप कन्नै, पेजर लिंकें गी केंद्रत करदा ऐ।
संरेखित लिंक
वैकल्पिक रूप कन्नै, तुस हर इक लिंक गी बक्ख-बक्ख संरेखित करी सकदे ओ:
वैकल्पिक अक्षम स्थिति
पेजर लिंक .disabledपृष्ठांकन थमां सामान्य उपयोगिता वर्ग दा बी इस्तेमाल करदे न।
लेबल लगाए
मसाल
उदाहरण शीर्षक नई
उदाहरण शीर्षक नई
उदाहरण शीर्षक नई
उदाहरण शीर्षक नई
उदाहरण शीर्षक नई
उदाहरण शीर्षक नई
उपलब्ध भिन्नताएं
इक लेबल दी शक्ल बदलने आस्तै निचले उल्लेख कीते गेदे संशोधक वर्गें च कुसै बी गी जोड़ो.
डिफ़ॉल्ट प्राथमिक सफलता जानकारी चेतावनी खतरा
टन लेबल ऐ?
रेंडरिंग दी समस्या उसलै पैदा होई सकदी ऐ जिसलै तुंदे कोल इक संकीर्ण कंटेनर दे अंदर दर्जन भर इनलाइन लेबल होंदे न, हर इक च अपना inline-blockतत्व (जिऱयां इक आइकन) होंदा ऐ। इसदे आसपास दा तरीका सेटिंग ऐ display: inline-block;. संदर्भ ते इक उदाहरण आस्तै, दिक्खो #13219 .
बिल्ला
<span class="badge">लिंक, बूटस्ट्रैप navs, ते होर मते गी जोड़ियै नमीं जां अनपढ़ी चीजें गी आसानी कन्नै हाइलाइट करो.
जदूं कोई नमीं जां अनपढ़ी चीजां नेईं होंदियां न तां बैज बस संकुचित होई जांगन (सीएसएस दे :emptyचयनकर्ता दे राहें) बशर्ते जे अंदर कोई सामग्री मौजूद नेईं ऐ।
क्रॉस-ब्राउज़र संगतता
इंटरनेट एक्सप्लोरर 8 च बैज स्व-कलैप्स नेईं होङन कीजे इस च :emptyचयनकर्ता आस्तै समर्थन दी कमी ऐ।
सक्रिय नव राज्यें गी अनुकूलित करदा ऐ
गोली नेविगेशनें च सक्रिय राज्यें च बिल्ला रखने लेई बिल्ट-इन शैलियें गी शामल कीता गेआ ऐ।
जंबोट्रॉन गी पूरी चौड़ाई बनाने लेई, ते बिना गोल कोने दे, इसगी सारे .containerएस दे बाहर रक्खो ते इसदे बजाय .containerअंदर इक जोड़ो।
पेज दा हेडर
h1इक पृष्ठ पर सामग्री दे खंडें गी उचित रूप कन्नै स्पेस आउट ते सेगमेंट करने आस्तै इक आस्तै इक साधारण शेल । एह् h1' s डिफाल्ट smallतत्व दा उपयोग करी सकदा ऐ , ते कन्नै गै होर मते सारे घटकें (अतिरिक्त शैलियें कन्नै ) दा बी उपयोग करी सकदा ऐ ।
उदाहरण पृष्ठ हेडर हेडर आस्तै उपपाठ
थंबनेल दी
छवियां, वीडियो, पाठ, ते होर मते सारे ग्रिड गी आसानी कन्नै प्रदर्शत करने आस्तै थंबनेल घटक कन्नै बूटस्ट्रैप दी ग्रिड सिस्टम गी विस्तार करो।
जेकर तुस बक्ख-बक्ख ऊंचाई ते/जां चौड़ाई आह् ली थंबनेल दी Pinterest-जैसी प्रस्तुति दी तलाश च ओ तां तुसेंगी इक त्रीयें पार्टी दे प्लगइन दा इस्तेमाल करना होग जि’यां चिनाई , समस्थानिक , जां साल्वाटोर .
डिफ़ॉल्ट उदाहरण ऐ
डिफाल्ट रूप कन्नै, बूटस्ट्रैप दे थंबनेल गी घट्ट शा घट्ट जरूरी मार्कअप कन्नै लिंक कीती गेदी छवियें गी प्रदर्शत करने आस्तै डिजाइन कीता गेदा ऐ।
कस्टम सामग्री
थोह् ड़ी-मती अतिरिक्त मार्कअप कन्नै, थंबनेल च कुसै बी चाल्ली दी HTML सामग्री जि’यां हेडिंग, पैराग्राफ, जां बटन जोड़ना संभव ऐ।
उपलब्ध ते लचीले अलर्ट संदेशें दी मुट्ठी भर कन्नै ठेठ बरतूनी कार्रवाईयें लेई संदर्भ प्रतिक्रिया संदेश उपलब्ध करोआओ।
उदाहरण दे
बुनियादी अलर्ट संदेशें लेई कुसै बी पाठ ते इक वैकल्पिक खारिज बटन च .alertते चार संदर्भ वर्गें च इक (जियां, ) लपेटो..alert-success
कोई डिफ़ॉल्ट क्लास नेईं
अलर्टें च डिफाल्ट वर्ग नेईं होंदे न, सिर्फ आधार ते संशोधक वर्ग न. डिफाल्ट ग्रे अलर्ट दा मता मतलब नेईं ऐ, इसलेई तुसेंगी संदर्भ वर्ग दे राहें इक किस्म निर्दिश्ट करने दी लोड़ ऐ. सफलता, जानकारी, चेतावनी, जां खतरे थमां चुनो।
बड़ा शैल! तुसें इस महत्वपूर्ण अलर्ट संदेश गी सफलतापूर्वक पढ़ेआ।
सिर ऊपर ! इस अलर्ट गी तुंदा ध्यान देने दी लोड़ ऐ, पर एह् सुपर महत्वपूर्ण नेईं ऐ।
चेतावनी! बेहतर अपने आप गी चेक करो, तुस मता अच्छा नेईं दिक्खा करदे ओ।
ओह स्नैप ! कुछ गल्लां बदलो ते दुबारा जमा करने दी कोशश करो।
खारिज करने योग्य अलर्ट
.alert-dismissibleवैकल्पिक ते बंद बटन जोड़ियै कुसै बी अलर्ट पर निर्माण करो।
जावास्क्रिप्ट अलर्ट प्लगइन दी लोड़ ऐ
पूरी चाल्ली कन्नै कम्म करने आह् ले, खारिज करने आह् ले अलर्टें आस्तै, तुसेंगी अलर्टें दा जावास्क्रिप्ट प्लगइन दा इस्तेमाल करना होग .
चेतावनी! बेहतर अपने आप गी चेक करो, तुस मता अच्छा नेईं दिक्खा करदे ओ।
सारे डिवाइस च उचित व्यवहार सुनिश्चत करो
डेटा विशेषता <button>कन्नै तत्व दा इस्तेमाल करना सुनिश्चत करो .data-dismiss="alert"
अलर्ट च लिंक
.alert-linkकुसै बी अलर्ट दे अंदर मेल खाने आह् ले रंगीन लिंक गी जल्दी उपलब्ध करोआने लेई उपयोगिता वर्ग दा उपयोग करो .
सरल पर लचीले प्रगति पट्टी कन्नै इक कार्यप्रवाह जां कार्रवाई दी प्रगति पर अद्यतन प्रतिक्रिया प्रदान करो।
क्रॉस-ब्राउज़र संगतता
प्रगति बार अपने किश प्रभावें गी हासल करने लेई CSS3 संक्रमण ते एनीमेशनें दा उपयोग करदे न। एह् सुविधां इंटरनेट एक्सप्लोरर 9 ते निचले जां फायरफॉक्स दे पुराने संस्करणें च समर्थत नेईं न. ओपेरा 12 एनीमेशन गी समर्थन नेईं करदा ऐ।
सामग्री सुरक्षा नीति (सीएसपी) संगतता
जेकर तुंदी वेबसाइट च इक सामग्री सुरक्षा नीति (CSP) ऐ जेह् ड़ी इजाजत नेईं दिंदी ऐ , तां तुस प्रगति पट्टी दी चौड़ाई गी सेट करने style-src 'unsafe-inline'आस्तै इनलाइन विशेषताएं दा इस्तेमाल नेईं करी सकगेओ जिऱयां कि हेठ दित्ते गेदे साढ़े उदाहरनें च दिक्खेआ गेआ ऐ। styleचौड़ाई गी सेट करने आस्तै वैकल्पिक तरीकें च जेह् ड़ी सख्त CSPs कन्नै संगत ऐ , इस च थोह् ड़ी-मती कस्टम जावास्क्रिप्ट (जेह् ड़ी सेट करदी ऐ element.style.width) जां कस्टम CSS वर्गें दा इस्तेमाल करना शामल ऐ ।
बुनियादी मिसाल
डिफ़ॉल्ट प्रगति पट्टी।
60% पूरा
लेबल दे नाल
इक दिक्खने आह् ला प्रतिशत दस्सने आस्तै प्रगति पट्टी दे अंदर थमां <span>विथ क्लास गी हटाओ ..sr-only
60% ऐ।
एह् सुनिश्चत करने आस्तै जे लेबल पाठ घट्ट प्रतिशतें आस्तै बी पठनीय रौह् ग, min-widthप्रगति पट्टी च a जोड़ने पर विचार करो.
०% ऐ।
२% ऐ।
संदर्भ दे विकल्प
प्रगति पट्टी लगातार शैलियें आस्तै इक गै बटन ते अलर्ट वर्गें दे किश दा उपयोग करदी ऐ।
40% पूरा (सफलता) ऐ
20% पूरा
60% पूरा (चेतावनी)
80% पूरा (खतरा) ऐ
धारीदार
धारीदार प्रभाव बनाने लेई इक ढाल दा उपयोग करदा ऐ। IE9 ते उस थमां हेठ उपलब्ध नेईं ऐ।
40% पूरा (सफलता) ऐ
20% पूरा
60% पूरा (चेतावनी)
80% पूरा (खतरा) ऐ
एनिमेटेड
दाएं थमां बाएं धारियें गी एनिमेट .activeकरने आस्तै च जोड़ो । .progress-bar-stripedIE9 ते उस थमां हेठ उपलब्ध नेईं ऐ।
45% पूरा
ढेर हो गया
.progressउसी ढेर करने आस्तै इक गै च मते सारे सलाखें गी रक्खो ।
35% पूरा (सफलता) ऐ
20% पूरा (चेतावनी)
10% पूरा (खतरा) ऐ
मीडिया आपत्ति
बक्ख-बक्ख किस्म दे घटकें (जियां ब्लॉग टिप्पणियां, ट्वीट बगैरा) बनाने आस्तै सार वस्तु शैलियां जेह् ड़ियां पाठ सामग्री दे कन्नै-कन्नै इक बाएं- जां दाएं-संरेखित छवि गी दर्शांदियां न।
डिफ़ॉल्ट मीडिया ऐ
डिफाल्ट मीडिया इक सामग्री ब्लॉक दे बक्खी जां सज्जे पास्से इक मीडिया वस्तु (छवि, वीडियो, ऑडियो) प्रदर्शत करदा ऐ।
वर्गें .pull-leftते .pull-rightबी मौजूद न ते पैह् ले थमां गै मीडिया घटक दे हिस्से दे रूप च बरतेआ जंदा हा, पर v3.3.0 दे रूप च उस इस्तेमाल आस्तै पदावनत कीता गेदा ऐ. .media-leftएह् ते दे लगभग बराबर न .media-right, सिवाय इसदे जे html च दे .media-rightबाद रक्खेआ जाना चाहिदा ऐ ।.media-body
सूची समूह न सिर्फ तत्वें दी सरल सूची गी प्रदर्शत करने आस्तै इक लचीला ते शक्तिशाली घटक ऐ , बल्के कस्टम सामग्री कन्नै जटिल सूची गी प्रदर्शत करने आस्तै ऐ ।
बुनियादी मिसाल
सब्भनें शा बुनियादी सूची समूह बस सूची आइटमें कन्नै इक अनऑर्डर सूची ऐ, ते उचित वर्गें कन्नै। इसदे बाद औने आह् ले विकल्पें कन्नै इस पर निर्माण करो, जां जरूरत मताबक अपना खुद दा सीएसएस।
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा ए सी कन्सेक्टेतुर ए सी
इरोस पर वेस्टिबुलम
बिल्ला
बैज घटक गी कुसै बी सूची समूह आइटम च जोड़ो ते एह् स्वतः दाएं पास्से स्थित होई जाग।
१४ ऐक्रास जस्टो ओडियो
२दापिबस एसी सुविधा में
१मोरबी लियो रिसुस
लिंक कीते गेदे आइटम
सूची आइटमें दे बजाय एंकर टैग दा इस्तेमाल करियै सूची समूह आइटमें गी लिंक करो (जिसदा मतलब ऐ इक <div>दी बजाय इक माता-पिता बी <ul>). हर इक तत्व दे आसपास व्यक्तिगत माता-पिता दी लोड़ नेईं ऐ।
सूची समूह आइटम सूची आइटम दे बजाय बटन हो सकदे न (जिसदा मतलब ऐ इक <div>दी बजाय इक माता-पिता बी <ul>). हर इक तत्व दे आसपास व्यक्तिगत माता-पिता दी लोड़ नेईं ऐ। इत्थै मानक .btnकक्षाएं दा इस्तेमाल नेईं करो।
अक्षम आइटम
अक्षम दिक्खने आस्तै इसगी ग्रे आउट करने .disabledआस्तै इक च जोड़ो ।.list-group-item
च बटन जां द्वितीयक पाठ लपेटो .panel-footer. ध्यान रक्खो जे पैनल पाद-लेख संदर्भ बदलावें दा इस्तेमाल करदे बेल्लै रंगें ते सीमाएं गी विरासत च नेईं लैंदे कीजे उंदा मकसद अग्रभूमि च नेईं ऐ.
पैनल दी सामग्री
संदर्भ दे विकल्प
होर घटकें दी तर्ज पर, संदर्भ स्थिति वर्गें च कुसै बी गी जोड़ियै इक पैनल गी इक खास संदर्भ आस्तै होर सार्थक बनाओ।
पैनल दा टाइटल
पैनल दी सामग्री
पैनल दा टाइटल
पैनल दी सामग्री
पैनल दा टाइटल
पैनल दी सामग्री
पैनल दा टाइटल
पैनल दी सामग्री
पैनल दा टाइटल
पैनल दी सामग्री
टेबल दे नाल
.tableनिर्बाध डिजाइन आस्तै इक पैनल दे अंदर कुसै बी गैर-बॉर्डर गी जोड़ो । जेकर कोई ऐ तां .panel-bodyअस बक्ख-बक्ख करने आस्तै तालिका दे शीर्शक च इक अतिरिक्त सीमा जोड़ने आं।
ब्राउज़रें गी इक आंतरिक अनुपात बनाइयै अपने समाहित ब्लॉक दी चौड़ाई दे आधार उप्पर वीडियो जां स्लाइड शो आयाम निर्धारत करने दी अनुमति देओ जेह् ड़ा कुसै बी डिवाइस पर ठीक ढंगै कन्नै स्केल करग।
नियम सीधे तौर पर <iframe>, <embed>, <video>, ते <object>तत्वें पर लागू कीते जंदे न; वैकल्पिक रूप कन्नै इक स्पष्ट वंशज वर्ग दा इस्तेमाल करो .embed-responsive-itemजिसलै तुस होर गुणें आस्तै स्टाइलिंग कन्नै मेल खंदा ऐ.
प्रो-टिप ऐ ! frameborder="0"तुसेंगी अपने s च शामल करने दी लोड़ नेईं ऐ <iframe>की जे अस तुंदे आस्तै उसगी ओवरराइड करदे आं।
वेल्स ने दी
डिफ़ॉल्ट अच्छी तरह कन्नै
कुएं गी इक तत्व पर इक साधारण प्रभाव दे रूप च इस्तेमाल करो तां जे उसी इक इनसेट प्रभाव दित्ता जाई सकै।
देखो, मैं इक कुएं च हां!
वैकल्पिक कक्षाएं
दो वैकल्पिक संशोधक वर्गें कन्नै पैडिंग ते गोल कोने गी नियंत्रत करो।