बूटस्ट्रैप बटन

बटन तत्व इस अर्थ में अधिक उपयोगी हाइपरटेक्स्ट मार्कअप लैंग्वेज (एचटीएमएल) तत्वों में से एक है कि यह उपयोगकर्ता को एक पृष्ठ के साथ बातचीत करने में सक्षम बनाता है।

लॉग इन करना, सदस्यता लेना, हटाना या कुछ खोलना, मेनू दिखाना, रंग विषय बदलना बटन के साथ की जाने वाली क्रियाएं हैं।

डिफ़ॉल्ट ब्राउज़र बटन शैलियाँ सबसे अच्छी दिखने वाली नहीं हैं, और किसी भी तरह से आधुनिक नहीं हैं।

प्रत्येक प्रोजेक्ट पर उनकी स्टाइल को अनुकूलित करके, हम एक ही परिणाम के लिए एक ही कोड को कई बार दोहराते हैं।

फिर से, बूटस्ट्रैप हमें मजबूर करता है। देखें कि बूटस्ट्रैप बटन से क्या संभव है।

रंगीन बटन

जैसा कि हम यहां देख सकते हैं:

रूपरेखा बटन

हम केवल एक आउटलाइन वाले बटन बनाने के लिए समान रंगों का उपयोग कर सकते हैं:

वे रूपरेखा के समान पृष्ठभूमि रंग प्राप्त करते हैं, और इसके विपरीत के आधार पर पाठ सफेद या काला हो जाता है। हल्का और पीला (चेतावनी) काला पाठ मिलता है। हालांकि, लिंक संस्करण इस विकल्प का समर्थन नहीं करता है।

आकार देना

बूटस्ट्रैप बटन के लिए तीन आकारों का समर्थन करता है:छोटा, नियमित और बड़ा।
हम इस तरह के आकार का चयन करने के लिए एक और वर्ग जोड़ते हैं:

प्रत्येक आकार के तीन बटन बनाए जाते हैं, और प्रत्येक आकार को कक्षा M-5 के साथ एक डिव में लपेटा जाता है ताकि उन्हें थोड़ा सा मार्जिन दिया जा सके, ताकि उन्हें बाहर रखा जा सके।

ब्लॉक लेवल बटन

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

 username  
 <लेबल फॉर =" ईमेल ">ईमेल <इनपुट प्रकार ="ईमेल" वर्ग ="फॉर्म-नियंत्रण" /> 
 <बटन वर्ग ="बीटीएन बीटीएन-एलजी बीटीएन- ब्लॉक btn-प्राथमिक"> ब्लॉक लेवल बटन

हम बूटस्ट्रैप फॉर्म क्लासेस के बारे में विस्तार से नहीं जाएंगे।

हमने अभी एक सरल फ़ॉर्म बनाया है जो एक उपयोगकर्ता नाम और ईमेल स्वीकार करता है, और इसमें एक ब्लॉक स्तर बटन और एक नियमित बटन है।

एमटी-2 फिर से दो बटनों को अलग करने के लिए केवल मार्जिन (शीर्ष) जोड़ा गया है।

और यहाँ हम अंतर देख सकते हैं:

बटन स्थिति

कई अन्य बूटस्ट्रैप घटकों की तरह, हम एक राज्य वर्ग के साथ एक बटन की उपस्थिति को बदल सकते हैं, जो कि सक्रिय या अक्षम है।

सक्रिय अवस्था

एक सक्रिय बटन में थोड़ा गहरा बैकग्राउंड, बॉर्डर और शैडो होता है।

अक्षम वर्ग वाला अभी भी क्लिक करने योग्य है, और यदि उसके पास है तो वह एक क्रिया करेगा।

सहायक तकनीकों के लिए, हमें ARIA-DISABLED=“TRUE” विशेषता भी शामिल करनी होगी, ताकि स्क्रीन रीडर उपयोगकर्ता जान सकें कि स्क्रीन पर एक अक्षम बटन है।

साथ ही, वर्तमान में तत्व अक्षम विशेषता का समर्थन नहीं करते हैं, इसलिए अक्षम दिखने के लिए हमें कक्षा को शामिल करना होगा।

विशेषता समर्थित नहीं
 अक्षम रूप

टैग के मामले में, अक्षम वर्ग CSS नियम जोड़ता है POINTER-EVENTS:NONE, जो माउस क्लिक को अक्षम करता है।

हालाँकि, यह अभी तक सभी वेब ब्राउज़रों पर पूरी तरह से समर्थित नहीं है, और यहाँ तक कि समर्थित ब्राउज़रों पर भी, लिंक को अभी भी कीबोर्ड के माध्यम से एक्सेस किया जा सकता है।

यह सुनिश्चित करने के लिए कि फ़ंक्शन पूरी तरह से अक्षम है, हमें TABINDEX=“-1” विशेषता जोड़नी चाहिए, ताकि उन्हें कीबोर्ड से भी फ़ोकस न किया जा सके।

आपको वैसे भी टैग को बटन के रूप में उपयोग नहीं करना चाहिए, लेकिन यह जानना अच्छा है।

बटन समूह

बूटस्ट्रैप में CARDS <(लेखन के समय प्रकाशन में) की तरह, हम बटनों को एक साथ एक तत्व में नेत्रहीन रूप से फ्यूज करने के लिए GROUP क्लास का उपयोग कर सकते हैं।

हम बस उन्हें बीटीएन-ग्रुप क्लास के साथ एक डिव में लपेटते हैं और बस!

व्यवहार बिल्कुल वैसा ही है, लेकिन अब वे एक दूसरे के ठीक बगल में हैं, और बाहरी कोने अच्छी तरह गोल हैं।

इसे पूरा करने के लिए

बटन लगभग हर वेबसाइट पर पाए जा सकते हैं, और वे ऑनलाइन अनुभव का एक बहुत ही महत्वपूर्ण हिस्सा हैं। हम अपने खातों में लॉग इन कर सकते हैं, कुछ ऑनलाइन ऑर्डर कर सकते हैं, न्यूज़लेटर की सदस्यता ले सकते हैं, या बटन के साथ हमारे इनबॉक्स में आने वाले सभी स्पैम को ब्लॉक कर सकते हैं। उनके बिना, वेबसाइटें डिजिटल बिजनेस कार्ड होंगी। बूटस्ट्रैप के माध्यम से, हम बटनों को अपनी साइट का एक सुंदर घटक भी बना सकते हैं।