एक दर्जन सं बेसि पुन: उपयोग करय योग्य घटक आइकोनोग्राफी, ड्रॉपडाउन, इनपुट समूह, नेविगेशन, अलर्ट, आ बहुत किछु प्रदान करय कें लेल निर्मित छै.
ग्लिफिकॉन्स
उपलब्ध ग्लिफ
ग्लिफिकॉन हाफलिंग्स सेट स॑ फॉन्ट फॉर्मेट म॑ 250 स॑ भी अधिक ग्लिफ शामिल छै । ग्लिफिकॉन्स हाफलिंग सामान्य रूप स॑ मुफ्त म॑ उपलब्ध नै होय छै, लेकिन एकरऽ निर्माता न॑ एकरा बूटस्ट्रैप लेली मुफ्त म॑ उपलब्ध कराय देल॑ छै । धन्यवाद के रूप में हम केवल आग्रह करैत छी जे जखन संभव हो तखन अहाँ ग्लिफिकॉन्स के वापस लिंक शामिल करू।
ग्लिफिकॉन ग्लिफिकॉन-तारा चिह्न
ग्लिफिकॉन ग्लिफिकॉन-प्लस
ग्लिफिकॉन ग्लिफिकॉन-यूरो
ग्लिफिकॉन ग्लिफिकॉन-eur
ग्लिफिकॉन ग्लिफिकॉन-माइनस
ग्लिफिकॉन ग्लिफिकॉन-बादल
ग्लिफिकॉन ग्लिफिकॉन-लिफाफा
ग्लिफिकॉन ग्लिफिकॉन-पेंसिल
ग्लिफिकॉन ग्लिफिकॉन-ग्लास
ग्लिफिकॉन ग्लिफिकॉन-संगीत
ग्लिफिकॉन ग्लिफिकॉन-खोज
ग्लिफिकॉन ग्लिफिकॉन-हृदय
ग्लिफिकॉन ग्लिफिकॉन-स्टार
ग्लिफिकॉन ग्लिफिकॉन-तारा-खाली
ग्लिफिकॉन ग्लिफिकॉन-उपयोगकर्ता
ग्लिफिकॉन ग्लिफिकॉन-फिल्म
ग्लिफिकॉन ग्लिफिकॉन-थ-बड़े
ग्लिफिकॉन ग्लिफिकॉन-थ
ग्लिफिकॉन ग्लिफिकॉन-वीं-सूची
ग्लिफिकॉन ग्लिफिकॉन-ठीक अछि
ग्लिफिकॉन ग्लिफिकॉन-हटाओ
ग्लिफिकॉन ग्लिफिकॉन-ज़ूम-इन
ग्लिफिकॉन ग्लिफिकॉन-ज़ूम-आउट
ग्लिफिकॉन ग्लिफिकॉन-बंद
ग्लिफिकॉन ग्लिफिकॉन-संकेत
ग्लिफिकॉन ग्लिफिकॉन-कॉग
ग्लिफिकॉन ग्लिफिकॉन-कचरा
ग्लिफिकॉन ग्लिफिकॉन-घर
ग्लिफिकॉन ग्लिफिकॉन-फाइल
ग्लिफिकॉन ग्लिफिकॉन-समय
ग्लिफिकॉन ग्लिफिकॉन-रोड
ग्लिफिकॉन ग्लिफिकॉन-डाउनलोड-अल्ट
glyphicon glyphicon-डाउनलोड करू
ग्लिफिकॉन ग्लिफिकॉन-अपलोड
ग्लिफिकॉन ग्लिफिकॉन-इनबॉक्स
ग्लिफिकॉन ग्लिफिकॉन-खेल-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-दोहराएँ
ग्लिफिकॉन ग्लिफिकॉन-ताजा
ग्लिफिकॉन ग्लिफिकॉन-सूची-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-लॉक
ग्लिफिकॉन ग्लिफिकॉन-ध्वज
ग्लिफिकॉन ग्लिफिकॉन-हेडफोन
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-बंद
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-डाउन
ग्लिफिकॉन ग्लिफिकॉन-वॉल्यूम-अप
ग्लिफिकॉन ग्लिफिकॉन-qrcode
ग्लिफिकॉन ग्लिफिकॉन-बारकोड
ग्लिफिकॉन ग्लिफिकॉन-टैग
ग्लिफिकॉन ग्लिफिकॉन-टैग
ग्लिफिकॉन ग्लिफिकॉन-पुस्तक
ग्लिफिकॉन ग्लिफिकॉन-बुकमार्क
ग्लिफिकॉन ग्लिफिकॉन-प्रिंट
ग्लिफिकॉन ग्लिफिकॉन-कैमरा
ग्लिफिकॉन ग्लिफिकॉन-फॉन्ट
ग्लिफिकॉन ग्लिफिकॉन-बोल्ड
ग्लिफिकॉन ग्लिफिकॉन-इटालिक
ग्लिफिकॉन ग्लिफिकॉन-पाठ-ऊँचाई
ग्लिफिकॉन ग्लिफिकॉन-पाठ-चौड़ाई
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-बाम
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-केंद्र
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-संरेखित-जस्टिफाई
ग्लिफिकॉन ग्लिफिकॉन-सूची
ग्लिफिकॉन ग्लिफिकॉन-इंडेन्ट-बाम
ग्लिफिकॉन ग्लिफिकॉन-इंडेंट-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-फेसटाइम-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-चित्र
ग्लिफिकॉन ग्लिफिकॉन-नक्शा-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-समायोजित करब
ग्लिफिकॉन ग्लिफिकॉन-टिंट
ग्लिफिकॉन ग्लिफिकॉन-संपादन
ग्लिफिकॉन ग्लिफिकॉन-शेयर
ग्लिफिकॉन ग्लिफिकॉन-जाँच
ग्लिफिकॉन ग्लिफिकॉन-चल
ग्लिफिकॉन ग्लिफिकॉन-कदम-पिछड़े
ग्लिफिकॉन ग्लिफिकॉन-तेज-पिछड़े
ग्लिफिकॉन ग्लिफिकॉन-पिछड़ा
ग्लिफिकॉन ग्लिफिकॉन-खेल
ग्लिफिकॉन ग्लिफिकॉन-विराम
ग्लिफिकॉन ग्लिफिकॉन-स्टॉप
ग्लिफिकॉन ग्लिफिकॉन-आगू
ग्लिफिकॉन ग्लिफिकॉन-तेज-आगू
ग्लिफिकॉन ग्लिफिकॉन-स्टेप-फोरवर्ड
ग्लिफिकॉन ग्लिफिकॉन-इजेक्ट
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-बाएं
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-प्लस-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-माइनस-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-हटाओ-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-ठीक-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-प्रश्न-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-जानकारी-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-स्क्रीनशॉट
ग्लिफिकॉन ग्लिफिकॉन-हटाओ-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-ओके-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-बैन-वृत्त
ग्लिफिकॉन ग्लिफिकॉन-तीर-बाम
ग्लिफिकॉन ग्लिफिकॉन-तीर-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-तीर-ऊपर
ग्लिफिकॉन ग्लिफिकॉन-तीर-नीचे
ग्लिफिकॉन ग्लिफिकॉन-शेयर-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-आकार-पूर्ण
ग्लिफिकॉन ग्लिफिकॉन-आकार-छोटा
ग्लिफिकॉन ग्लिफिकॉन-विस्मयादिबोधक-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-उपहार
ग्लिफिकॉन ग्लिफिकॉन-पत्ता
ग्लिफिकॉन ग्लिफिकॉन-आग
ग्लिफिकॉन ग्लिफिकॉन-आँख-खुला
ग्लिफिकॉन ग्लिफिकॉन-आँख-बंद
ग्लिफिकॉन ग्लिफिकॉन-चेतावनी-चिह्न
ग्लिफिकॉन ग्लिफिकॉन-प्लेन
ग्लिफिकॉन ग्लिफिकॉन-कैलेंडर
ग्लिफिकॉन ग्लिफिकॉन-यादृच्छिक
ग्लिफिकॉन ग्लिफिकॉन-टिप्पणी
ग्लिफिकॉन ग्लिफिकॉन-चुंबक
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-अप
ग्लिफिकॉन ग्लिफिकॉन-शेवरॉन-डाउन
ग्लिफिकॉन ग्लिफिकॉन-रीट्वीट
ग्लिफिकॉन ग्लिफिकॉन-खरीदारी-गाड़ी
ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-बंद करू
ग्लिफिकॉन ग्लिफिकॉन-फोल्डर-ओपन
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-आकार बदलें-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-एचडीडी
ग्लिफिकॉन ग्लिफिकॉन-बुलहॉर्न
ग्लिफिकॉन ग्लिफिकॉन-घंटी
ग्लिफिकॉन ग्लिफिकॉन-प्रमाण पत्र
ग्लिफिकॉन ग्लिफिकॉन-अंगूठा-अप
ग्लिफिकॉन ग्लिफिकॉन-अंगूठा-नीचे
ग्लिफिकॉन ग्लिफिकॉन-हाथ-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-हाथ-बाम
ग्लिफिकॉन ग्लिफिकॉन-हाथ-अप
ग्लिफिकॉन ग्लिफिकॉन-हाथ-नीचे
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-बाम
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-ऊपर
ग्लिफिकॉन ग्लिफिकॉन-वृत्त-तीर-नीचे
ग्लिफिकॉन ग्लिफिकॉन-ग्लोब
ग्लिफिकॉन ग्लिफिकॉन-रिंच
ग्लिफिकॉन ग्लिफिकॉन-कार्य
ग्लिफिकॉन ग्लिफिकॉन-फिल्टर
ग्लिफिकॉन ग्लिफिकॉन-अटैची
ग्लिफिकॉन ग्लिफिकॉन-फुलस्क्रीन
ग्लिफिकॉन ग्लिफिकॉन-डैशबोर्ड
ग्लिफिकॉन ग्लिफिकॉन-पेपरक्लिप
ग्लिफिकॉन ग्लिफिकॉन-हृदय-खाली
ग्लिफिकॉन ग्लिफिकॉन-लिंक
ग्लिफिकॉन ग्लिफिकॉन-फोन
ग्लिफिकॉन ग्लिफिकॉन-पुशपिन
ग्लिफिकॉन ग्लिफिकॉन-यूएसडी
ग्लिफिकॉन ग्लिफिकॉन-जीबीपी
ग्लिफिकॉन ग्लिफिकॉन-सॉर्ट
glyphicon glyphicon-वर्णमाला द्वारा क्रमबद्ध
ग्लिफिकॉन ग्लिफिकॉन-वर्णमाला-अल्ट द्वारा क्रमबद्ध
glyphicon glyphicon-क्रम के अनुसार क्रमबद्ध करें
ग्लिफिकॉन ग्लिफिकॉन-क्रम-द्वारा-सॉर्ट-अल्ट
glyphicon glyphicon-विशेषता द्वारा क्रमबद्ध करू
glyphicon glyphicon-विशेषताओं के अनुसार-सॉर्ट करें-alt
ग्लिफिकॉन ग्लिफिकॉन-अनचेक
ग्लिफिकॉन ग्लिफिकॉन-विस्तार
ग्लिफिकॉन ग्लिफिकॉन-पतन-नीचे
ग्लिफिकॉन ग्लिफिकॉन-पतन-अप
ग्लिफिकॉन ग्लिफिकॉन-लॉग-इन
ग्लिफिकॉन ग्लिफिकॉन-फ्लैश
ग्लिफिकॉन ग्लिफिकॉन-लॉग-आउट
ग्लिफिकॉन ग्लिफिकॉन-नई-विंडो
ग्लिफिकॉन ग्लिफिकॉन-रिकॉर्ड
ग्लिफिकॉन ग्लिफिकॉन-बचाउ
ग्लिफिकॉन ग्लिफिकॉन-खुला
ग्लिफिकॉन ग्लिफिकॉन-सेव कएल गेल
ग्लिफिकॉन ग्लिफिकॉन-आयात
ग्लिफिकॉन ग्लिफिकॉन-निर्यात
ग्लिफिकॉन ग्लिफिकॉन-भेजना
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-डिस्क
glyphicon ग्लिफिकॉन-फ्लॉपी-बचाए गए
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-हटाओ
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-सेव
ग्लिफिकॉन ग्लिफिकॉन-फ्लॉपी-ओपन
ग्लिफिकॉन ग्लिफिकॉन-क्रेडिट-कार्ड
ग्लिफिकॉन ग्लिफिकॉन-हस्तांतरण
ग्लिफिकॉन ग्लिफिकॉन-कटलरी
ग्लिफिकॉन ग्लिफिकॉन-हेडर
ग्लिफिकॉन ग्लिफिकॉन-संकुचित
ग्लिफिकॉन ग्लिफिकॉन-ईयरफोन
ग्लिफिकॉन ग्लिफिकॉन-फोन-अल्ट
ग्लिफिकॉन ग्लिफिकॉन-टॉवर
ग्लिफिकॉन ग्लिफिकॉन-आँकड़े
ग्लिफिकॉन ग्लिफिकॉन-एसडी-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-एचडी-वीडियो
ग्लिफिकॉन ग्लिफिकॉन-उपशीर्षक
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-स्टीरियो
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-डॉल्बी
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-5-1
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-6-1
ग्लिफिकॉन ग्लिफिकॉन-ध्वनि-7-1
ग्लिफिकॉन ग्लिफिकॉन-कॉपीराइट-मार्क
glyphicon glyphicon-पंजीकरण-चिह्न
glyphicon glyphicon-बादल-डाउनलोड
glyphicon glyphicon-बादल-अपलोड
ग्लिफिकॉन ग्लिफिकॉन-वृक्ष-शंकुधारी
ग्लिफिकॉन ग्लिफिकॉन-वृक्ष-पर्णपाती
ग्लिफिकॉन ग्लिफिकॉन-सीडी
glyphicon glyphicon-सेव-फाइल
glyphicon ग्लिफिकॉन-ओपन-फाइल
ग्लिफिकॉन ग्लिफिकॉन-स्तर-अप
ग्लिफिकॉन ग्लिफिकॉन-प्रतिलिपि
ग्लिफिकॉन ग्लिफिकॉन-पेस्ट
ग्लिफिकॉन ग्लिफिकॉन-सचेतक
ग्लिफिकॉन ग्लिफिकॉन-समीकरण
ग्लिफिकॉन ग्लिफिकॉन-राजा
ग्लिफिकॉन ग्लिफिकॉन-रानी
ग्लिफिकॉन ग्लिफिकॉन-प्यादा
ग्लिफिकॉन ग्लिफिकॉन-बिशप
ग्लिफिकॉन ग्लिफिकॉन-शूरवीर
ग्लिफिकॉन ग्लिफिकॉन-बेबी-फॉर्मूला
ग्लिफिकॉन ग्लिफिकॉन-टेंट
ग्लिफिकॉन ग्लिफिकॉन-ब्लैकबोर्ड
ग्लिफिकॉन ग्लिफिकॉन-बेड
ग्लिफिकॉन ग्लिफिकॉन-सेब
ग्लिफिकॉन ग्लिफिकॉन-मिटाएँ
ग्लिफिकॉन ग्लिफिकॉन-रेत के घड़ी
ग्लिफिकॉन ग्लिफिकॉन-दीपक
ग्लिफिकॉन ग्लिफिकॉन-डुप्लिकेट
ग्लिफिकॉन ग्लिफिकॉन-गुल्लक-बैंक
ग्लिफिकॉन ग्लिफिकॉन-कैंची
ग्लिफिकॉन ग्लिफिकॉन-बिटकॉइन
ग्लिफिकॉन ग्लिफिकॉन-बीटीसी
ग्लिफिकॉन ग्लिफिकॉन-xbt
ग्लिफिकॉन ग्लिफिकॉन-येन
ग्लिफिकॉन ग्लिफिकॉन-jpy
ग्लिफिकॉन ग्लिफिकॉन-रूबल
ग्लिफिकॉन ग्लिफिकॉन-रगड़ना
ग्लिफिकॉन ग्लिफिकॉन-स्केल
ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली
ग्लिफिकॉन ग्लिफिकॉन-आइस-लोली-स्वाद
ग्लिफिकॉन ग्लिफिकॉन-शिक्षा
ग्लिफिकॉन ग्लिफिकॉन-विकल्प-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-विकल्प-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-मेनू-हैम्बर्गर
ग्लिफिकॉन ग्लिफिकॉन-मोडल-विंडो
ग्लिफिकॉन ग्लिफिकॉन-तेल
ग्लिफिकॉन ग्लिफिकॉन-अनाज
ग्लिफिकॉन ग्लिफिकॉन-धूप के चश्मे
ग्लिफिकॉन ग्लिफिकॉन-पाठ-आकार
ग्लिफिकॉन ग्लिफिकॉन-पाठ-रंग
ग्लिफिकॉन ग्लिफिकॉन-पाठ-पृष्ठभूमि
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-शीर्ष
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-नीचे
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-क्षैतिज
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-बाम
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-ऊर्ध्वाधर
ग्लिफिकॉन ग्लिफिकॉन-वस्तु-संरेखित-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-दाहिने
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-बाएं
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-तल
ग्लिफिकॉन ग्लिफिकॉन-त्रिकोण-शीर्ष
ग्लिफिकॉन ग्लिफिकॉन-कंसोल
ग्लिफिकॉन ग्लिफिकॉन-सुपरस्क्रिप्ट
ग्लिफिकॉन ग्लिफिकॉन-सबस्क्रिप्ट
ग्लिफिकॉन ग्लिफिकॉन-मेनू-बाम
ग्लिफिकॉन ग्लिफिकॉन-मेनू-दाहिना
ग्लिफिकॉन ग्लिफिकॉन-मेनू-नीचे
ग्लिफिकॉन ग्लिफिकॉन-मेनू-अप
प्रयोग केना करब
प्रदर्शन कारणक कें लेल, सब आइकन कें लेल एकटा आधार वर्ग आ व्यक्तिगत आइकन वर्ग कें आवश्यकता होयत छै. उपयोग करय लेल निम्नलिखित कोड लगभग कतहु राखू. सही पैडिंग के लेल आइकन आ टेक्स्ट के बीच स्पेस अवश्य छोड़ू.
अन्य घटकक संग नहि मिलाउ
आइकन वर्गक कें सीधा अन्य घटकक कें साथ संयोजित नहि कैल जा सकय छै. एकहि तत्व पर अन्य वर्गक संग एकर प्रयोग नहि करबाक चाही । एकर बदला मे, एकटा नेस्टेड जोड़ू <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ड्रॉपडाउन मेनू केँ दाहिना संरेखित करू.
अतिरिक्त स्थिति कें आवश्यकता भ सकय छै
ड्रॉपडाउन स्वचालित रूप सं दस्तावेज कें सामान्य प्रवाह कें भीतर सीएसएस कें माध्यम सं स्थिति मे राखल जायत छै. एकरऽ मतलब छै कि ड्रॉपडाउन क॑ कुछ 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में बटन के एक श्रृंखला लपेटें .btn-group|
बटन टूलबार
अधिक जटिल घटक के लिये <div class="btn-group">एक में सेट के संयोजन |<div class="btn-toolbar">
साइजिंग
एक समूह म॑ हर बटन प॑ बटन साइजिंग क्लास लागू करै के बजाय, बस .btn-group-*प्रत्येक म॑ जोड़ै छै .btn-group, जेकरा म॑ कई समूह क॑ नेस्टिंग करै के समय भी शामिल छै ।
घोंसला बनाना
.btn-groupएकटा दोसर के भीतर राखू .btn-groupजखन अहाँ चाहैत छी जे ड्रॉपडाउन मेनू बटन के एकटा श्रृंखला के संग मिलाओल जाय.
बटनक कें एकटा समूह कें बराबर आकारक मे खिंचाव बनाऊं ताकि ओकर माता-पिता कें पूरा चौड़ाई मे फैलल जा सकय. बटन समूह के भीतर बटन ड्रॉपडाउन के साथ भी काम करै छै.
सीमा संभालब
बटन क॑ जायज ठहराबै लेली प्रयोग करलऽ जाय वाला विशिष्ट एचटीएमएल आरू सीएसएस के कारण (अर्थात display: table-cell), ओकरा बीच के सीमा दोगुना होय जाय छै । नियमित बटन समूह म॑, margin-left: -1pxसीमा क॑ हटाबै के बजाय ओकरा ढेर करै लेली प्रयोग करलऽ जाय छै । ओना , marginके संग काज नहिं करैत अछि display: table-cell. परिणामस्वरूप, बूटस्ट्रैप कें लेल अपन अनुकूलन कें आधार पर, अहां सीमाक कें हटावय या फेर सं रंगय चाहय सकय छी.
आईई8 आ सीमा
इंटरनेट एक्सप्लोरर 8 कोनों जायज बटन समूह म॑ बटनऽ प॑ सीमा नै रेंडर करै छै, चाहे वू चालू होय <a>या <button>तत्व । ओहि सं गुजरय लेल एक-एकटा बटन के दोसर मे लपेटि लिअ.btn-group .
यदि <a>तत्वक कें उपयोग बटन कें रूप मे कार्य करय कें लेल करल जाय छै – वर्तमान पृष्ठ कें भीतर कोनों अन्य दस्तावेज या खंड पर नेविगेट करय कें बजाय, पृष्ठ मे कार्यक्षमता कें ट्रिगर करय कें लेल – त ओकरा एकटा उचित role="button".
<button>तत्वों के साथ
<button>तत्वक कें साथ जायज बटन समूहक कें उपयोग करय कें लेल , अहां कें प्रत्येक बटन कें एकटा बटन समूह मे लपेटनाय होयत . अधिकांश ब्राउज़र तत्वऽ क॑ औचित्य लेली हमरऽ सीएसएस क॑ सही तरीका स॑ लागू नै करै <button>छै, लेकिन चूँकि हम्मं॑ बटन ड्रॉपडाउन क॑ समर्थन करै छियै, हम्मं॑ ओकरा आसपास काम करी सकै छियै ।
कोनों पाठ-आधारित कें पहिने, बाद, या दूनू तरफ पाठ या बटन जोड़ क फॉर्म नियंत्रण कें विस्तार करूं <input>. .input-groupएक .input-group-addonया के साथ प्रयोग .input-group-btnएकल के तत्वों को पूर्वार्ध या संलग्न करने के लिये .form-control|
पाठ्य <input>स केवल
<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 कें उपयोग करय कें लेल जावास्क्रिप्ट टैब प्लगइन कें आवश्यकता छै
नेविगेशन के रूप मे प्रयोग कएल गेल नव केँ सुलभ बनाउ
यदि अहां नेविगेशन बार प्रदान करय कें लेल navs कें उपयोग करय रहल छी, त , कें role="navigation"सब सं तार्किक मूल कंटेनर मे a कें जरूर जोड़ूं , या पूरा नेविगेशन कें चारू कात <ul>कोनों तत्व कें लपेटूं . <nav>भूमिका कें स्वयं मे नहि जोड़ूं <ul>, कियाकि अइ सं सहायक प्रौद्योगिकी कें द्वारा एकरा वास्तविक सूची कें रूप मे घोषित नहि कैल जा सकय छै.
टैब
ध्यान रहे क्लास के लिये बेस क्लास .nav-tabsकी आवश्यकता है |.nav
आसानी सं टैब या गोली कें अपन माता-पिता कें बराबर चौड़ाई बनावा कें साथ 768px सं चौड़ा स्क्रीन पर .nav-justified. छोट-छोट स्क्रीन पर, nav लिंक ढेर भ' जाइत अछि.
जायज नवबार nav लिंक एखन समर्थित नहि अछि.
सफारी आ रिस्पांसिव जायज नवस
v9.1.2 के रूप म॑, सफारी एगो बग प्रदर्शित करै छै जेकरा म॑ आपकऽ ब्राउज़र क॑ क्षैतिज रूप स॑ आकार बदलला स॑ जायज nav म॑ रेंडरिंग त्रुटि पैदा होय जाय छै जे ताज़ा करला प॑ साफ होय जाय छै । ई बग उचित nav उदाहरण मे सेहो देखाओल गेल अछि .
ओ बिन्दु बदलू जाहि पर अहाँक नवबार संकुचित आओर क्षैतिज मोड के बीच स्विच करैत अछि. चर के अनुकूलित करू @grid-float-breakpointया अपन मीडिया क्वेरी जोड़ू.
जावास्क्रिप्ट प्लगइन के आवश्यकता अछि
यदि जावास्क्रिप्ट अक्षम छै आरू व्यूपोर्ट एतना संकीर्ण छै कि नवबार संकुचित होय जाय छै, त॑ नवबार क॑ विस्तारित करना आरू सामग्री क॑ भीतर देखना असंभव होय जैतै.navbar-collapse .
उत्तरदायी नवबार कें लेल संकुचित प्लगइन कें बूटस्ट्रैप कें अहां कें संस्करण मे शामिल करनाय आवश्यक छै.
ढहल मोबाइल नवबार ब्रेकपॉइंट बदलब
नवबार अपनऽ ऊर्ध्वाधर मोबाइल दृश्य म॑ ढहै छै जब॑ व्यूपोर्ट स॑ संकीर्ण होय छै , आरू जब॑ व्यूपोर्ट कम स॑ कम चौड़ाई म॑ @grid-float-breakpointहोय छै त॑ अपनऽ क्षैतिज गैर-मोबाइल दृश्य म॑ विस्तारित होय जाय छै । @grid-float-breakpointनवबार कखन ढहैत/विस्तारित होइत अछि से नियंत्रित करबाक लेल एहि चर केँ कम स्रोत मे समायोजित करू. पूर्वनिर्धारित मान अछि 768px(सबसँ छोट "छोट" अथवा "टैबलेट" स्क्रीन) ।
नवबार सुलभ बनाउ
कोनों तत्व कें उपयोग करनाय सुनिश्चित करूं <nav>या, यदि कोनों अधिक सामान्य तत्व जैना a <div>, कें उपयोग करय छै, त हर नवबार मे a जोड़ूं role="navigation"ताकि ओकरा सहायक प्रौद्योगिकी कें उपयोगकर्ताक कें लेल एकटा मील कें पत्थर क्षेत्र कें रूप मे स्पष्ट रूप सं पहचानल जा सकय.
ब्रांड छवि
एकटा <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 ऊँच अछि.
कोर बूटस्ट्रैप सीएसएस क बाद एकरा शामिल करब सुनिश्चित करू .
स्थिर शीर्ष
एकटा पूर्ण-चौड़ाई नवबार बनाउ जे पृष्ठक संग दूर स्क्रॉल कए एकटा या केंद्र आ पैड नवबार सामग्री जोड़ि .navbar-static-topकए शामिल करैत अछि ।.container.container-fluid
क्लास के विपरीत .navbar-fixed-*, अहां के कोनो पैडिंग बदलय के जरूरत नहिं अछि body.
उल्टा नवबार
जोड़ि नवबार के लुक संशोधित करू .navbar-inverse.
रोटी के टुकड़े
एक नेविगेशनल पदानुक्रम के भीतर वर्तमान पृष्ठ के स्थान को दर्शाएँ |
बहु-पृष्ठ पृष्ठांकन घटक के साथ अपन साइट या ऐप के लेल पृष्ठांकन लिंक प्रदान करू, या सरल पेजर विकल्प .
पूर्वनिर्धारित पृष्ठांकन
Rdio स प्रेरित सरल पृष्ठांकन, ऐप्स आ खोज परिणाम के लेल बढ़िया। पैघ ब्लॉक कें छूटनाय मुश्किल छै, आसानी सं स्केल करय योग्य छै, आ पैघ क्लिक क्षेत्र प्रदान करय छै.
पृष्ठांकन घटक के लेबलिंग
पृष्ठांकन घटक कें एकटा तत्व मे लपेटल जेबाक चाही <nav>ताकि ओकरा रीडर आ अन्य सहायक प्रौद्योगिकी कें स्क्रीन करय कें लेल नेविगेशन खंड कें रूप मे पहचानल जा सकय. एकरऽ अलावा, जैन्हऽ कि कोनो पन्ना प॑ पहल॑ स॑ ही एक स॑ अधिक ऐन्हऽ नेविगेशन खंड होय के संभावना छै (जैना कि हेडर म॑ प्राथमिक नेविगेशन, या एक साइडबार नेविगेशन), ई सलाह देलऽ जाय छै कि ओकरा लेली एक वर्णनात्मक उपलब्ध कराय देलऽ जाय aria-labelजे <nav>ओकरऽ उद्देश्य क॑ दर्शाबै छै । उदाहरण कें लेल, यदि पृष्ठांकन घटक कें उपयोग खोज परिणामक कें कोनों सेट कें बीच नेविगेट करय कें लेल करल जाय छै, त एकटा उपयुक्त लेबल भ सकय छै aria-label="Search results pages".
अक्षम एवं सक्रिय राज्य
लिंक अलग-अलग परिस्थितिक लेल अनुकूलन योग्य अछि। .disabledअनक्लिक करय योग्य लिंक के लेल आओर .activeवर्तमान पृष्ठ के संकेत करय लेल प्रयोग करू .
हम अनुशंसा करय छी जे अहां सक्रिय या अक्षम एंकर कें कें लेल स्वैप आउट करूं <span>, या पिछला/अगला तीर कें मामला मे एंकर कें छोड़ूं, इच्छित शैली कें बरकरार रखयत समय क्लिक कार्यक्षमता कें हटावय कें लेल.
साइजिंग
फैंसी पैघ या छोट पृष्ठांकन? अतिरिक्त आकारक लेल .pagination-lgवा जोड़ू ।.pagination-sm
पेजर
हल्का मार्कअप आरू शैली के साथ सरल पृष्ठांकन कार्यान्वयन के लेलऽ त्वरित पिछला आरू अगला लिंक. ब्लॉग या पत्रिका सन सरल साइट के लेल ई बढ़िया अछि.
पूर्वनिर्धारित उदाहरण
डिफ़ॉल्ट रूप स, पेजर लिंक कए केंद्रित करैत अछि.
संरेखित लिंक
वैकल्पिक रूप सँ, अहाँ प्रत्येक लिंक केँ साइड मे संरेखित क' सकैत छी:
वैकल्पिक अक्षम अवस्था
पेजर लिंक पृष्ठांकन स सामान्य .disabledउपयोगिता वर्ग क सेहो उपयोग करैत अछि ।
लेबल
उदाहरण
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उदाहरण शीर्षक नया
उपलब्ध भिन्नता
कोनों लेबल कें रूप बदलय कें लेल निम्नलिखित मे सं कोनों संशोधक वर्ग जोड़ू.
डिफ़ॉल्ट प्राथमिक सफलता जानकारी चेतावनी खतरा
टन लेबल अछि?
रेंडरिंग समस्या तखन उत्पन्न भ सकैत अछि जखन अहाँक पास एकटा संकीर्ण कंटेनर के भीतर दर्जनों इनलाइन लेबल होयत अछि, प्रत्येक में अपन inline-blockतत्व (एकटा आइकन के तरह) होयत अछि | एकर रास्ता सेट भ रहल अछि display: inline-block;. संदर्भ आ एकटा उदाहरणक लेल, देखू #13219 .
बैज
<span class="badge">लिंक, बूटस्ट्रैप navs, आओर बहुत किछु मे एकटा जोड़ि कए नव या अपठित आइटम कए आसानी स हाइलाइट करू.
जंबोट्रॉन क॑ पूरा चौड़ाई बनाबै लेली, आरू बिना गोल कोना के, ओकरा सब .containers के बाहर रखलऽ जाय आरू एकरऽ बदला म॑ एक .containerभीतर जोड़लऽ जाय ।
पृष्ठ शीर्षक
h1एक पृष्ठ पर सामग्री के खंडों को उचित रूप से स्पेस आउट और सेगमेंट करने के लिए एक के लिए एक सरल शेल | ई h1' क डिफ़ॉल्ट smallतत्व क उपयोग कर सकै छै, साथ ही साथ अधिकांश अन्य घटक (अतिरिक्त शैली के साथ) ।
उदाहरण पृष्ठ शीर्षक शीर्षक के लिये उपपाठ
थंबनेल
थंबनेल घटक कें साथ बूटस्ट्रैप कें ग्रिड सिस्टम कें विस्तार करूं ताकि छवि, वीडियो, पाठ, आ बेसि कें ग्रिड आसानी सं प्रदर्शित कैल जा सकय.
यदि आहाँ अलग-अलग ऊंचाई आ/अथवा चौड़ाई के थंबनेल के Pinterest-जैसा प्रस्तुति के तलाश में छी, त अहाँ के एकटा तृतीय पक्ष प्लगइन जेना चिनाई , आइसोटोप , या साल्वाटोर के उपयोग करय पड़त .
पूर्वनिर्धारित उदाहरण
डिफ़ॉल्ट रूप सं, बूटस्ट्रैप कें थंबनेल न्यूनतम आवश्यक मार्कअप कें साथ लिंक कैल गेल छवियक कें प्रदर्शन करय कें लेल डिजाइन कैल गेल छै.
कस्टम सामग्री
कनी अतिरिक्त मार्कअप के साथ, थंबनेल में कोनो भी तरह के एचटीएमएल सामग्री जेना हेडिंग, पैराग्राफ, या बटन जोड़ना संभव छै.
उपलब्ध आ लचीला अलर्ट संदेशक कें मुट्ठी भर कें साथ विशिष्ट उपयोगकर्ता क्रियाक कें लेल संदर्भ प्रतिक्रिया संदेश प्रदान करूं.
उदाहरण के लिये
कोनों पाठ आ एकटा वैकल्पिक खारिज बटन मे आ बेसिक अलर्ट संदेशक कें लेल .alertचारि संदर्भ वर्गक मे सं एकटा (जैना, ) लपेटूं..alert-success
कोनो पूर्वनिर्धारित वर्ग नहि
अलर्ट मे डिफ़ॉल्ट क्लास नहि अछि, केवल बेस आओर मोडिफायर क्लास अछि. डिफ़ॉल्ट ग्रे अलर्ट केरऽ बहुत मतलब नै छै, ई लेली आहाँ क॑ संदर्भ वर्ग के माध्यम स॑ एक प्रकार निर्दिष्ट करना आवश्यक छै. सफलता, जानकारी, चेतावनी, या खतरा मे स चुनू।
नीक केलहुं! अहां ई महत्वपूर्ण अलर्ट संदेश सफलतापूर्वक पढ़लहुं.
हेड अप! एहि अलर्ट पर अहां सभ के ध्यान देबय के जरूरत अछि, मुदा ई सुपर इम्पोर्टेन्ट नहिं अछि.
चेतावनी! नीक जे स्वयं चेक करू, अहाँ बेसी नीक नहि लागि रहल छी।
ओह स्नैप! किछु बात बदलू आ फेर सं जमा करय के कोशिश करू.
खारिज करय योग्य अलर्ट
वैकल्पिक .alert-dismissibleआ बंद बटन जोड़ क कोनो अलर्ट पर निर्माण करू.
जावास्क्रिप्ट अलर्ट प्लगइन के आवश्यकता अछि
पूर्ण रूप सं काज करय वाला, खारिज करय योग्य अलर्ट के लेल, अहां के अलर्ट जावास्क्रिप्ट प्लगइन के उपयोग करय पड़त .
चेतावनी! नीक जे स्वयं चेक करू, अहाँ बेसी नीक नहि लागि रहल छी।
सभ डिवाइस मे उचित व्यवहार सुनिश्चित करू
डेटा विशेषताक <button>संग तत्वक उपयोग अवश्य करू .data-dismiss="alert"
अलर्ट में लिंक
.alert-linkकोनों अलर्ट कें भीतर जल्दी सं मिलान करय वाला रंगीन लिंक उपलब्ध करावा कें लेल उपयोगिता वर्ग कें उपयोग करूं .
ओह स्नैप! किछु बात बदलू आ फेर सं जमा करय के कोशिश करू.
प्रगति बार
सरल मुदा लचीला प्रगति पट्टी कें साथ कोनों कार्यप्रवाह या कार्यवाही कें प्रगति पर अद्यतन प्रतिक्रिया प्रदान करूं.
क्रॉस-ब्राउजर संगतता
प्रगति बार अपनऽ कुछ प्रभाव प्राप्त करै लेली CSS3 संक्रमण आरू एनीमेशन के उपयोग करै छै. ई सुविधाक कें इंटरनेट एक्सप्लोरर 9 आ ओकर नीचा या फायरफॉक्स कें पुरान संस्करणक मे समर्थित नहि कैल गेल छै. ओपेरा 12 एनीमेशन क समर्थन नहि करैत अछि।
सामग्री सुरक्षा नीति (CSP) संगतता
यदि आहाँकऽ वेबसाइट म॑ सामग्री सुरक्षा नीति (CSP) छै जे अनुमति नै दै छै style-src 'unsafe-inline', त॑ आपने प्रगति बार चौड़ाई सेट करै लेली इनलाइन विशेषता के उपयोग नै कर॑ सकबै styleजैसनऽ कि नीचें हमरऽ उदाहरणऽ म॑ दिखालऽ गेलऽ छै । चौड़ाई कें सेट करय कें लेल वैकल्पिक विधियक मे जे सख्त सीएसपी कें साथ संगत छै, मे कनिक कस्टम जावास्क्रिप्ट (जे सेट करय छै element.style.width) कें उपयोग करनाय या कस्टम सीएसएस वर्गक कें उपयोग करनाय शामिल छै.
मूल उदाहरण
डिफ़ॉल्ट प्रगति बार।
60% पूर्ण
लेबल के साथ
एकटा दृश्यमान प्रतिशत देखाबय लेल प्रगति पट्टी के भीतर सं <span>with क्लास के हटाउ ..sr-only
६०% २.
ई सुनिश्चित करय कें लेल कि लेबल पाठ कम प्रतिशत कें लेल सेहो पठनीय रहय, min-widthप्रगति बार मे a जोड़य पर विचार करूं.
०% २.
२% २.
संदर्भ विकल्प
प्रगति बार सुसंगत शैलीक कें लेल किछु एकहि बटन आ अलर्ट वर्गक कें उपयोग करयत छै.
४०% सम्पूर्ण (सफलता) २.
20% पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
धारीदार
धारीदार प्रभाव बनेबाक लेल ढाल क उपयोग करैत अछि । IE9 आ नीचाँ मे उपलब्ध नहि अछि।
४०% सम्पूर्ण (सफलता) २.
20% पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
एनिमेटेड
धारियों को दाहिने से बायां एनिमेट करने के लिए में .activeजोड़ें | .progress-bar-stripedIE9 आ नीचाँ मे उपलब्ध नहि अछि।
45% पूर्ण
ढेर भ गेल
एकहि मे एक सँ बेसी बार राखू जाहि .progressसँ ओकरा ढेर भ जाय।
३५% सम्पूर्ण (सफलता) २.
२०% सम्पूर्ण (चेतावनी) २.
१०% सम्पूर्ण (खतरा) २.
मीडिया वस्तु
विभिन्न प्रकार के घटक (जैसे ब्लॉग टिप्पणी, ट्वीट, आदि) के निर्माण के लेलऽ अमूर्त वस्तु शैली जेकरा म॑ पाठ्य सामग्री के साथ-साथ बायां- या दायां-संरेखित छवि के विशेषता छै.
डिफ़ॉल्ट मीडिया
डिफ़ॉल्ट मीडिया कोनों सामग्री ब्लॉक कें बायां या दायां तरफ कोनों मीडिया ऑब्जेक्ट (छवि, वीडियो, ऑडियो) प्रदर्शित करयत छै.
वर्ग .pull-leftआरू .pull-rightभी मौजूद छै आरू पहिने मीडिया घटक कें हिस्सा कें रूप मे उपयोग करल गेलय छेलै, लेकिन v3.3.0 कें रूप मे ओय उपयोग कें लेल अप्रचलित छै. .media-leftई लगभग आरू के बराबर छै .media-right, सिवाय ई के कि html म॑ के .media-rightबाद रखलऽ जाय ।.media-body
मीडिया संरेखण
छवि या अन्य मीडिया कें ऊपर, बीच या नीचा संरेखित कैल जा सकय छै. पूर्वनिर्धारित ऊपर संरेखित अछि.
सूची समूह न केवल तत्वक कें सरल सूची, बल्कि कस्टम सामग्री कें साथ जटिल सूची प्रदर्शित करय कें लेल एकटा लचीला आ शक्तिशाली घटक छै.
मूल उदाहरण
सबसे बेसिक सूची समूह बस सूची आइटम कें साथ एकटा अक्रमित सूची छै, आ उचित वर्गक. एकरा बाद जे विकल्प आबै छै, या जरूरत के हिसाब स अपन सीएसएस के साथ निर्माण करू.
क्रास जस्टो ओडियो
दापिबस एसी सुविधा में
मोरबी लियो रिसुस
पोर्टा एसी consectetur एसी
इरोस पर वेस्टिबुलम
बैज
कोनों सूची समूह आइटम मे बैज घटक जोड़ू आ ओ स्वचालित रूप सं दाहिना दिस स्थित भ जायत.
14क्रास जस्टो ओडियो
२दापिबस एसी सुविधा में
१मोरबी लियो रिसुस
लिंक आइटम
सूची आइटम कें बजाय एंकर टैग कें उपयोग करयत सूची समूह आइटम कें लिंक करूं (जेकर मतलब छै एकटा कें <div>बजाय एकटा अभिभावक कें सेहो <ul>)। प्रत्येक तत्व के आसपास व्यक्तिगत अभिभावक के जरूरत नै।
सूची समूह आइटम सूची आइटम कें बजाय बटन भ सकय छै (जेकर मतलब इहो छै की एकटा कें <div>बजाय एकटा अभिभावक <ul>)। प्रत्येक तत्व के आसपास व्यक्तिगत अभिभावक के जरूरत नै। एतय मानक .btnकक्षाक प्रयोग नहि करू।
जखन कि हरदम जरूरी नहि होएत अछि, मुदा कखनो काल अहां के अपन डीओएम के एकटा डिब्बा मे राखय के जरूरत होएत अछि. ओहि परिस्थिति सभक लेल, पैनल घटक केँ आजमाउ.
मूल उदाहरण
डिफ़ॉल्ट रूप स, सबटा .panelकाज अछि किछु बेसिक बॉर्डर आ पैडिंग लागू करब जे किछु सामग्री कए समाहित करब।
बेसिक पैनल उदाहरण
हेडिंग के साथ पैनल
आसानी स अपन पैनल मे एकटा हेडिंग कंटेनर जोड़ू .panel-heading. अहां कोनों <h1>- पूर्व-स्टाइल हेडिंग जोड़य कें लेल <h6>कोनों क्लास कें साथ सेहो शामिल कयर सकय छी. मुदा, - .panel-titleक' फॉन्ट आकार कए ओवरराइड क' देल गेल अछि .<h1><h6>.panel-heading
उचित लिंक रंगाई के लेल, शीर्षक में लिंक के भीतर अवश्य राखू .panel-title.
बिना शीर्षक के पैनल हेडिंग
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पाद लेख के साथ पैनल
में बटन या माध्यमिक पाठ लपेटें .panel-footer| ध्यान रहे कि पैनल पाद लेख संदर्भ भिन्नता के प्रयोग करते समय रंग आरू सीमा विरासत में नै मिलै छै, कैन्हेंकि एकरऽ मतलब अग्रभूमि म॑ नै छै ।
पैनल सामग्री
संदर्भ विकल्प
अन्य घटकक कें तरह, आसानी सं कोनों पैनल कें कोनों संदर्भ राज्य वर्गक कें जोड़ क कोनों विशेष संदर्भ कें लेल अधिक सार्थक बनावा.
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
पैनल शीर्षक
पैनल सामग्री
टेबुल के साथ
एकटा पैनल के भीतर कोनो गैर-सीमा वाला जोड़ू .tableएकटा निर्बाध डिजाइन के लेल. यदि एकटा अछि .panel-bodyत हम पृथक्करण क लेल तालिका क ऊपर एकटा अतिरिक्त सीमा जोड़ैत छी ।
ब्राउज़र कें एकटा आंतरिक अनुपात बना क अपन समाहित ब्लॉक कें चौड़ाई कें आधार पर वीडियो या स्लाइड शो आयाम निर्धारित करय कें अनुमति दिअ जे कोनों डिवाइस पर सही ढंग सं स्केल करतय.
नियम सीधा <iframe>, <embed>, <video>, आ <object>तत्व पर लागू होइत अछि; वैकल्पिक रूप सं एकटा स्पष्ट वंशज वर्ग कें उपयोग करूं .embed-responsive-itemजखन अहां अन्य विशेषताक कें लेल स्टाइलिंग कें मिलान करय चाहय छी.
प्रो-टिप ! frameborder="0"अहां कें अपन s मे शामिल करय कें जरूरत नहि छै <iframe>कियाकि हम अहां कें लेल ओकरा ओवरराइड करय छी.
वेल्स
नीक जकाँ डिफ़ॉल्ट करू
कुआँ के प्रयोग कोनो तत्व पर सरल प्रभाव के रूप में करू ताकि ओकरा इनसेट प्रभाव देल जा सकय |
देखू, हम एकटा इनार मे छी!
वैकल्पिक कक्षाएँ
दू वैकल्पिक संशोधक वर्गक कें साथ पैडिंग आ गोल कोना कें नियंत्रित करूं.