ग्लिफिकॉन्स

उपलब्ध ग्लिफ

ग्लिफिकॉन हाफलिंग्स सेट स॑ फॉन्ट फॉर्मेट म॑ 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
  • कम संकलक द्वारा प्रदान कएल गेल सापेक्ष यूआरएल विकल्प क उपयोग करू .
  • url()संकलित CSS मे पथ बदलू .

जे विकल्प अहां कें विशिष्ट विकास सेटअप कें अनुरूप होयत ओकर उपयोग करूं.

सुलभ आइकन

सहायक प्रौद्योगिकी कें आधुनिक संस्करण सीएसएस उत्पन्न सामग्री कें घोषणा करतय, साथ ही विशिष्ट यूनिकोड वर्णक कें घोषणा करतय. 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>

बटन समूह

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

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

एक कें भीतर तत्वक पर टूलटिप या पॉपओवर कें उपयोग करयत समय .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बस s के एकटा श्रृंखला लपेटू .btn-group.btn-group-justified.

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

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

यदि <a>तत्वक कें उपयोग बटन कें रूप मे कार्य करय कें लेल करल जाय छै – वर्तमान पृष्ठ कें भीतर कोनों अन्य दस्तावेज या खंड पर नेविगेट करय कें बजाय, पृष्ठ मे कार्यक्षमता कें ट्रिगर करय कें लेल – त ओकरा एकटा उचित role="button".

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

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

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

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

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

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

बटन ड्रॉपडाउन कें लेल ड्रॉपडाउन प्लगइन कें बूटस्ट्रैप कें अहां कें संस्करण मे शामिल करनाय आवश्यक छै.

एकल बटन ड्रॉपडाउन

किछु बेसिक मार्कअप परिवर्तनक संग कोनो बटन केँ ड्रॉपडाउन टॉगल मे बदलू.

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

विभाजित बटन ड्रॉपडाउन

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

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

साइजिंग

बटन ड्रॉपडाउन सभ आकारक बटनक संग काज करैत अछि ।

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

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

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

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

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

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

इनपुट समूह

कोनों पाठ-आधारित कें पहिने, बाद, या दूनू तरफ पाठ या बटन जोड़ क फॉर्म नियंत्रण कें विस्तार करूं <input>. .input-groupएक .input-group-addonया के साथ प्रयोग .input-group-btnएकल के तत्वों को पूर्वार्ध या संलग्न करने के लिये .form-control|

पाठ्य <input>स केवल

<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. छोट-छोट स्क्रीन पर, nav लिंक ढेर भ' जाइत अछि.

जायज नवबार nav लिंक एखन समर्थित नहि अछि.

सफारी आ रिस्पांसिव जायज नवस

v9.1.2 के रूप म॑, सफारी एगो बग प्रदर्शित करै छै जेकरा म॑ आपकऽ ब्राउज़र क॑ क्षैतिज रूप स॑ आकार बदलला स॑ जायज nav म॑ रेंडरिंग त्रुटि पैदा होय जाय छै जे ताज़ा करला प॑ साफ होय जाय छै । ई बग उचित 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>

नवबर

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

जायज नवबार nav लिंक एखन समर्थित नहि अछि.

उमड़ैत सामग्री

चूँकि बूटस्ट्रैप क॑ पता नै छै कि आपकऽ नवबार म॑ सामग्री क॑ कतेक जगह के जरूरत छै, ई लेली आपक॑ सामग्री क॑ दोसरऽ पंक्ति म॑ लपेटै के साथ समस्या आबी सकै छै । एकर समाधान करबाक लेल, अहाँ क' सकैत छी:

  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अपनऽ पैडिंग आरू ऊंचाई छै, ई लेली आपने के छवि के आधार प॑ कुछ CSS क॑ ओवरराइड करै के जरूरत पड़॑ सकै छै ।

<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 मे :beforeआओर content.

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

पृष्ठांकन

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

पूर्वनिर्धारित पृष्ठांकन

Rdio स प्रेरित सरल पृष्ठांकन, ऐप्स आ खोज परिणाम के लेल बढ़िया। पैघ ब्लॉक कें छूटनाय मुश्किल छै, आसानी सं स्केल करय योग्य छै, आ पैघ क्लिक क्षेत्र प्रदान करय छै.

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

पृष्ठांकन घटक के लेबलिंग

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

अक्षम एवं सक्रिय राज्य

लिंक अलग-अलग परिस्थितिक लेल अनुकूलन योग्य अछि। .disabledअनक्लिक करय योग्य लिंक के लेल आओर .activeवर्तमान पृष्ठ के संकेत करय लेल प्रयोग करू .

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

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

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

साइजिंग

फैंसी पैघ या छोट पृष्ठांकन? अतिरिक्त आकारक लेल .pagination-lgवा जोड़ू ।.pagination-sm

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

पेजर

हल्का मार्कअप आरू शैली के साथ सरल पृष्ठांकन कार्यान्वयन के लेलऽ त्वरित पिछला आरू अगला लिंक. ब्लॉग या पत्रिका सन सरल साइट के लेल ई बढ़िया अछि.

पूर्वनिर्धारित उदाहरण

डिफ़ॉल्ट रूप स, पेजर लिंक कए केंद्रित करैत अछि.

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

वैकल्पिक रूप सँ, अहाँ प्रत्येक लिंक केँ साइड मे संरेखित क' सकैत छी:

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

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

पेजर लिंक पृष्ठांकन स सामान्य .disabledउपयोगिता वर्ग क सेहो उपयोग करैत अछि ।

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

लेबल

उदाहरण

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

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

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

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

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

उपलब्ध भिन्नता

कोनों लेबल कें रूप बदलय कें लेल निम्नलिखित मे सं कोनों संशोधक वर्ग जोड़ू.

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

टन लेबल अछि?

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

बैज

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

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

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

आत्म ढहने वाला

जखन कोनों नव या अपठित वस्तु नहि होयत छै, तखन बैज बस संकुचित भ जायत (सीएसएस कें :emptyचयनकर्ता कें माध्यम सं) बशर्ते कि भीतर कोनों सामग्री मौजूद नहि होयत.

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

:emptyइंटरनेट एक्सप्लोरर 8 मे बैज स्वतः संकुचित नहि होयत, कियाकि एहि मे चयनकर्ता क समर्थन क कमी अछि ।

सक्रिय नव अवस्थाओं के अनुकूल होता है |

गोली नेविगेशन मे सक्रिय राज्यक मे बैज रखय कें लेल अंतर्निहित शैली शामिल छै.

<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' क डिफ़ॉल्ट 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 के अछि

थंबनेल लेबल

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

बोताम बोताम

100%x200 के अछि

थंबनेल लेबल

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

बोताम बोताम

100%x200 के अछि

थंबनेल लेबल

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

बोताम बोताम

<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) संगतता

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

मूल उदाहरण

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

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

लेबल के साथ

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

६०% २.
<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 जोड़य पर विचार करूं.

०% २.
२% २.
<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>

संदर्भ विकल्प

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

४०% सम्पूर्ण (सफलता) २.
20% पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
<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 आ नीचाँ मे उपलब्ध नहि अछि।

४०% सम्पूर्ण (सफलता) २.
20% पूर्ण
६०% सम्पूर्ण (चेतावनी) २.
८०% सम्पूर्ण (खतरा) २.
<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सँ ओकरा ढेर भ जाय।

३५% सम्पूर्ण (सफलता) २.
२०% सम्पूर्ण (चेतावनी) २.
१०% सम्पूर्ण (खतरा) २.
<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>

मीडिया वस्तु

विभिन्न प्रकार के घटक (जैसे ब्लॉग टिप्पणी, ट्वीट, आदि) के निर्माण के लेलऽ अमूर्त वस्तु शैली जेकरा म॑ पाठ्य सामग्री के साथ-साथ बायां- या दायां-संरेखित छवि के विशेषता छै.

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

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

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

नेस्टेड मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

मीडिया हेडिंग

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

मीडिया हेडिंग

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस |
<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

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

छवि या अन्य मीडिया कें ऊपर, बीच या नीचा संरेखित कैल जा सकय छै. पूर्वनिर्धारित ऊपर संरेखित अछि.

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

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस।

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

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस।

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

क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस | Fusce condimentum nunc एसी निसी वल्पुटेट फ्रिंगिला। फौसिबस में डोनेक लैसिनिया कोंगे फेलिस।

डोनेक सेद ओडियो दुई। Nullam quis risus eget उर्ना मोलिस ornare वेल ईउ लियो | सह sociis natoque penatibus एट मैग्निस डिस parturient montes, nascetur रिडिकुलस मुस।

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

मीडिया सूची

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

  • मीडिया हेडिंग

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

    नेस्टेड मीडिया हेडिंग

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

    नेस्टेड मीडिया हेडिंग

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

    नेस्टेड मीडिया हेडिंग

    क्रास बैस अमेट निभ लिबेरो, ग्रेविडा नुल्ला में। नुल्ला वेल मेटस scelerisque एंटी सोलिसिट्यूडिन कोमोडो। क्रास पुरुस ओडियो, वेस्टिबुलम में वल्पुटेट एट, टेम्पस विवेरा टर्पिस |
<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>

सूची समूह

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

मूल उदाहरण

सबसे बेसिक सूची समूह बस सूची आइटम कें साथ एकटा अक्रमित सूची छै, आ उचित वर्गक. एकरा बाद जे विकल्प आबै छै, या जरूरत के हिसाब स अपन सीएसएस के साथ निर्माण करू.

  • क्रास जस्टो ओडियो
  • दापिबस एसी सुविधा में
  • मोरबी लियो रिसुस
  • पोर्टा एसी consectetur एसी
  • इरोस पर वेस्टिबुलम
<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क्रास जस्टो ओडियो
  • दापिबस एसी सुविधा में
  • मोरबी लियो रिसुस
<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लेल एकटा मे जोड़ू ..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अछि।

  • दापिबस एसी सुविधा में
  • क्रास बैस अमेत निभ लिबेरो
  • पोर्टा एसी consectetur एसी
  • इरोस पर वेस्टिबुलम
<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त हम पृथक्करण क लेल तालिका क ऊपर एकटा अतिरिक्त सीमा जोड़ैत छी ।

पैनल हेडिंग

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

# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी चिड़ै के @ ट्विटर पर
<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>

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

पैनल हेडिंग
# 2019। पहिल नाम उपनाम उपयोगकर्ता नाम
मार्क ओटो @ mdo
याकूब थॉर्नटन @मोट
लैरी चिड़ै के @ ट्विटर पर
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

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

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

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

पैनल हेडिंग

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

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