यह आलेख बूटस्ट्रैप बैज के उपयोग को प्रदर्शित करने के लिए निम्नलिखित दृष्टिकोणों को शामिल करेगा:
- अतिरिक्त जानकारी के लिए बूटस्ट्रैप बैज का उपयोग कैसे करें?
- प्रासंगिक जानकारी के लिए बूटस्ट्रैप बैज का उपयोग कैसे करें?
- बूटस्ट्रैप बैज में कस्टम स्टाइल कैसे जोड़ें?
- बूटस्ट्रैप बैज में आइकन कैसे जोड़ें?
- बूटस्ट्रैप बैज को दूसरे स्रोत से कैसे लिंक करें?
- बैज को गोल कैसे करें?
- काउंटर के रूप में बूटस्ट्रैप बैज का उपयोग कैसे करें?
बूटस्ट्रैप बैज क्या हैं?
बैज मूल घटक हैं जिनका उपयोग संकेतक दिखाने के लिए किया जाता है। उदाहरण के लिए, सूचनाओं या संदेशों की संख्या दिखाने के लिए उनका उपयोग संख्यात्मक काउंटर के रूप में किया जा सकता है:
उनका उपयोग अतिरिक्त जानकारी प्रदर्शित करने के लिए भी किया जा सकता है, जैसे कि दी गई छवि में दिखाया गया है:
अतिरिक्त जानकारी के लिए बूटस्ट्रैप बैज का उपयोग कैसे करें?
अतिरिक्त जानकारी के रूप में उपयोग करने के लिए HTML तत्वों के भीतर बूटस्ट्रैप बैज जोड़े जा सकते हैं। प्रदर्शन के लिए नीचे दिए गए उदाहरण को देखें।
उदाहरण
अतिरिक्त जानकारी के लिए बूटस्ट्रैप बैज का उपयोग करने के लिए सबसे पहले:
- जोड़ें ' <एच5> ' और ' <एच6> ”तत्व।
- इसे रखो ' <विस्तार> 'तत्व' के साथ बिल्ला ' और ' बिल्ला-* 'कक्षाएं। 'बैज-*' वर्ग निर्दिष्ट रंग के साथ बैज को संदर्भित करता है:
< h6 > छात्रवृत्ति < अवधि कक्षा = 'बैज बैज-द्वितीयक' > नया < / अवधि < / h6 >
यह देखा जा सकता है कि प्रासंगिक शीर्षकों में दो बैज जोड़े गए हैं:
प्रासंगिक जानकारी के लिए बूटस्ट्रैप बैज का उपयोग कैसे करें?
बूटस्ट्रैप बैज का उपयोग प्रासंगिक जानकारी प्रदान करने के लिए भी किया जा सकता है जैसे ' बिल्ला-खतरा ”बैज को लाल रंग में प्रदर्शित करता है और इसका उपयोग रद्द, अमान्य, या अधिक जैसे कुछ विफल संदेशों को दिखाने के लिए किया जा सकता है। ' बिल्ला-सफलता ” का उपयोग किया जाता है जहाँ हम कुछ सफलता संदेश दिखाना चाहते हैं।
उदाहरण
चर्चित परिदृश्य को समझने के लिए दिए गए कोड को देखें:
< अवधि कक्षा = 'बैज बैज-खतरे' >खाता सत्यापित नहीं< / अवधि >< अवधि कक्षा = 'बैज बैज-जानकारी' > यह बिल्ला है < / अवधि >
< अवधि कक्षा = 'बैज बैज-चेतावनी' > खाता लंबित के लिए अनुमोदन< / अवधि >
< अवधि कक्षा = 'बैज बैज-सफलता' >खाता सत्यापित< / अवधि >
उत्पादन
बूटस्ट्रैप बैज में कस्टम स्टाइल कैसे जोड़ें?
आप बूटस्ट्रैप बैज में कुछ विशिष्ट स्टाइल जोड़ने के लिए CSS का उपयोग भी कर सकते हैं। बेहतर समझ के लिए, एक वर्ग जिसका नाम ' रीति 'के भीतर जोड़ा गया है' <विस्तार> ' तत्व। फिर, निम्नलिखित गुण लागू होते हैं:
< अवधि कक्षा = 'बैज बैज-डेंजर कस्टम' >खाता सत्यापित नहीं < / अवधि >< अवधि कक्षा = 'बैज बैज-जानकारी कस्टम' > यह बिल्ला है < / अवधि >
< अवधि कक्षा = 'बैज बैज-चेतावनी कस्टम' > खाता लंबित के लिए अनुमोदन< / अवधि >
< अवधि कक्षा = 'बैज बैज-सफलता प्रथा' >खाता सत्यापित< / अवधि >
शैली 'कस्टम' वर्ग
।रीति {फ़ॉन्ट आकार : 18 पीएक्स ;
फ़ॉन्ट वजन : 100 ;
पत्र अंतराल : 1 पीएक्स ;
गद्दी : 8 पीएक्स 15 पीएक्स ;
}
' ।रीति 'का उपयोग' तक पहुँचने के लिए किया जाता है रीति ' कक्षा। निम्नलिखित गुण इसके लिए लागू होते हैं:
- ' फ़ॉन्ट आकार ” फ़ॉन्ट आकार समायोजित करता है।
- ' फ़ॉन्ट वजन 'फ़ॉन्ट की मोटाई बताता है।
- ' पत्र अंतराल ”अक्षरों के बीच जगह जोड़ता है।
- ' गद्दी 'तत्व की सामग्री के आसपास स्थान प्रदान करता है।
उत्पादन
बूटस्ट्रैप बैज में आइकन कैसे जोड़ें?
हम बैज में अलग-अलग आइकन भी जोड़ सकते हैं। ऐसा करने के लिए, कई वर्ग हैं जिनका इस कारण से उपयोग किया जा सकता है। अधिक जानकारी के लिए, पर जाएँ फ़ॉन्ट विस्मयकारी वेबसाइट।
उदाहरण
HTML में, 'जोड़ें' <विस्तार> ' तत्व। इस तत्व के भीतर, आइकन वर्ग सम्मिलित करने के लिए इनलाइन तत्व ' ' या '' रखें:
< अवधि कक्षा = 'बैज बैज-डेंजर कस्टम' > खाता सत्यापित नहीं है< मैं कक्षा = 'सुदूर फा-टाइम्स-चक्र' < / मैं >
< / अवधि >
< अवधि कक्षा = 'बैज बैज-सफलता प्रथा' > खाता सत्यापित
< मैं कक्षा = 'fas fa-उपयोगकर्ता-चेक' < / मैं >
< / अवधि >
उत्पादन
बूटस्ट्रैप बैज को दूसरे स्रोत से कैसे लिंक करें?
बूटस्ट्रैप बैज को क्लिक करने योग्य बनाने के लिए, “ बिल्ला 'एचटीएमएल के भीतर कक्षाएं' <क> ” टैग करें और “में लिंक किए गए पृष्ठ का संदर्भ प्रदान करें href ' गुण:
< एक href = '#' कक्षा = 'बैज बैज-डेंजर कस्टम' >रद्द करें< / एक >< एक href = '#' कक्षा = 'बैज बैज-जानकारी कस्टम' >जमा करें< / एक >
उत्पादन
बैज को गोल कैसे करें?
बैज के किनारों को अधिक गोल बनाने के लिए, एक वर्ग जोड़ें ' बिल्ला गोली ”। यह वर्ग एक बड़े 'का समर्थन करता है बॉर्डर-त्रिज्या 'और क्षैतिज' गद्दी ' गुण:
< अवधि कक्षा = 'बैज बैज-पिल बैज-डेंजर कस्टम' >खाता सत्यापित नहीं < / अवधि >< अवधि कक्षा = 'बैज बैज-पिल बैज-चेतावनी कस्टम' > खाता लंबित के लिए अनुमोदन< / अवधि >
< अवधि कक्षा = 'बैज बैज-पिल बैज-सक्सेस कस्टम' > खाता सत्यापित < / अवधि >
उत्पादन
काउंटर के रूप में बूटस्ट्रैप बैज का उपयोग कैसे करें?
काउंटर के साथ एक बटन बनाने के लिए, एक HTML 'जोड़ें' <बटन> 'टैग के साथ प्रकार' बटन 'और इसे बटन वर्ग असाइन करें' btn ' और ' btn-सफलता ”। फिर, 'शामिल करें' <विस्तार> काउंटर लगाने के लिए तत्व:
< बटन प्रकार = 'बटन' कक्षा = 'बीटीएन बीटीएन-सफलता' >सूचनाएं < अवधि कक्षा = 'बैज बैज-लाइट' > 4 < / अवधि >
< / बटन >
उत्पादन
बूटस्ट्रैप बैज और बूटस्ट्रैप में उनके संबंधित लेबल के बारे में यह सब था।
निष्कर्ष
बूटस्ट्रैप ' बिल्ला 'वर्ग का उपयोग वेबसाइट पर बैज जोड़ने के लिए किया जाता है। उदाहरण के लिए, 'जैसे वर्ग' बिल्ला-खतरा ”, “ बैज-जानकारी ”, और अधिक का उपयोग बैज में उनके लेबल के रूप में प्रासंगिक जानकारी जोड़ने के लिए किया जा सकता है। बैज में आइकन जोड़ने के लिए कुछ वर्ग लागू होते हैं, जैसे ' दूर फा-बार-चक्र 'एक क्रॉस-सर्कल आइकन लगाने के लिए। इस पोस्ट ने बूटस्ट्रैप बैज और लेबल पर व्यापक गाइड प्रदान की है।