बूटस्ट्रैप बटन | व्याख्या की

यह लेख आपको निर्देश देगा:

• बूटस्ट्रैप में बटन कैसे बनाते हैं?
• बूटस्ट्रैप में आउटलाइन बटन कैसे बनाएं?
• बूटस्ट्रैप बटन आकार कैसे समायोजित करें?
• बूटस्ट्रैप में ब्लॉक-लेवल बटन कैसे बनाएं?
• बूटस्ट्रैप में एक्टिव स्टेट बटन कैसे बनाएं?
• बूटस्ट्रैप में अक्षम राज्य बटन कैसे बनाएं?

बूटस्ट्रैप में बटन कैसे बनाते हैं?

बूटस्ट्रैप ' btn ” वर्ग का उपयोग बटन बनाने के लिए किया जाता है। स्टाइल बटन जोड़ने के लिए, आप 'का उपयोग कर सकते हैं' btn 'रंग वर्ग के साथ वर्ग, जैसे' btn-सफलता ” एक हरा बटन बनाने के लिए।

एचटीएमएल में, ' <बटन> ”, “ <क> ', और ' <इनपुट> 'प्रकार के साथ टैग' बटन ” का उपयोग बटन बनाने के लिए किया जाता है। ' btn ” क्लास में स्टाइल को पूर्वनिर्धारित किया गया है जो बटन तत्वों में मूल स्टाइल जोड़ता है।

स्पष्ट अवधारणा के लिए, नीचे दिया गया उदाहरण देखें।

उदाहरण

HTML फ़ाइल में, विभिन्न टैग्स का उपयोग करके बटन बनाने के चरणों का पालन करें:

• जोड़ें ' <बटन> ' और ' <क> 'तत्व और उन्हें असाइन करें' btn ' और ' btn-प्राथमिक 'कक्षाएं।
• फिर, 'जोड़ें' <इनपुट> 'प्रकार के साथ टैग करें' बटन ”। इसे असाइन करें ' btn ' और ' btn-सफलता ” पहले दो बटन को नीले रंग में और तीसरे को हरे रंग में स्टाइल करने के लिए:

उत्पादन

बूटस्ट्रैप में आउटलाइन बटन कैसे बनाएं?

बटन की रूपरेखा जोड़ने के लिए, बूटस्ट्रैप ' बीटीएन-रूपरेखा-* 'वर्ग का प्रयोग किया जाता है। इसके वाक्य-विन्यास में, “ * ” यहाँ बाह्यरेखा रंग का प्रतिनिधित्व करता है। उदाहरण के लिए, ' btn-रूपरेखा-खतरे 'लाल रूपरेखा रखता है,' btn-रूपरेखा-प्राथमिक ” नीली रूपरेखा सेट करता है, और बहुत कुछ।

नीचे दिए गए कोड का विश्लेषण करें:

यह देखा जा सकता है कि ' अगला ” बटन की नीली रूपरेखा है, “ रद्द करना 'लाल रूपरेखा वाला बटन, और' सफलता ” बटन को हरे रंग की आउटलाइन के साथ स्टाइल किया गया है:

बूटस्ट्रैप बटन आकार कैसे समायोजित करें?

बटन के आकार को समायोजित करने के लिए कुछ बूटस्ट्रैप कक्षाएं लागू की जाती हैं, जैसे:

• ' बीटीएन-एलजी ” एक बड़ा बटन बनाने के लिए क्लास लगाई जाती है। यह वर्ग फ़ॉन्ट आकार और पैडिंग बढ़ा सकता है।
• ' बीटीएन-एमडी ” एक मध्यम आकार का बटन बनाता है।
• ' btn-एसएम ” एक छोटा बटन बनाता है।

उदाहरण

अब, हम अलग-अलग आकार और स्व-व्याख्यात्मक नामों के साथ तीन बटन बनाएंगे:

उत्पादन

बूटस्ट्रैप में ब्लॉक-लेवल बटन कैसे बनाएं?

ब्लॉक-लेवल बटन वे होते हैं जो पूर्ण-चौड़ाई वाले आकार को होल्ड करते हैं। ब्लॉक-स्तरीय बटन बनाने के लिए, “ btn- ब्लॉक 'वर्ग का उपयोग निम्नानुसार किया जाता है

उत्पादन

बूटस्ट्रैप में एक्टिव स्टेट बटन कैसे बनाएं?

सक्रिय स्थिति बटन उन बटनों को संदर्भित करते हैं जो वर्तमान में सक्रिय हैं। ये बटन सामान्य से थोड़े गहरे रंग के होते हैं। ऐसे बटन बनाने के लिए, बूटस्ट्रैप ' सक्रिय ” वर्ग का उपयोग किया जाता है।

उदाहरण

नीचे दिया गया कोड दो बटन बनाता है। पहला सामान्य अवस्था में है जबकि दूसरा '' के साथ लगाया जाता है। सक्रिय ' कक्षा:

उत्पादन

बूटस्ट्रैप में अक्षम राज्य बटन कैसे बनाएं?

अक्षम स्थिति बटन उन बटनों को संदर्भित करते हैं जो क्लिक करने योग्य और अनुपयोगी हैं। बूटस्ट्रैप में, ' अक्षम 'श्रेणी का उपयोग अक्षम स्थिति बटन बनाने के लिए किया जाता है। ' अक्षम इस उद्देश्य के लिए विशेषता का भी उपयोग किया जा सकता है।

उदाहरण

नीचे दिए गए उदाहरण को देखें:

• पहला बटन अक्षम अवस्था में नहीं है।
• दूसरा उपयोग करता है ' अक्षम ” कक्षा एक अक्षम राज्य बटन बनाने के लिए।
• तीसरा उपयोग करता है ' अक्षम ' गुण:

उत्पादन

हमने CSS में बूटस्ट्रैप बटन और उनकी स्टाइलिंग से संबंधित विभिन्न पहलुओं को शामिल किया है।

निष्कर्ष

' btn ” वर्ग का उपयोग सरल डिज़ाइन के साथ बूटस्ट्रैप बटन बनाने के लिए किया जाता है। रंगीन और आउटलाइन बटन बनाने के लिए, “ बीटीएन-* ' और ' बीटीएन-रूपरेखा-* 'कक्षाओं का उपयोग किया जाता है जहां' * ” किसी भी रंग वर्ग का प्रतीक है। उदाहरण के लिए, ' btn-चेतावनी 'एक पीला बटन बनाता है,' btn-रूपरेखा-चेतावनी ” एक पीला आउटलाइन बटन बनाता है, और बहुत कुछ। बटन को सक्रिय या अक्षम करने के लिए, क्रमशः 'सक्रिय' और 'अक्षम' वर्ग लागू होते हैं। इस पोस्ट ने बूटस्ट्रैप बटनों पर एक व्यापक मार्गदर्शिका प्रदान की।