बटन एलिमेंट उन अधिक उपयोगी हाइपरटेक्स्ट मार्कअप लैंग्वेज (HTML) एलिमेंट्स में से एक है क्योंकि यह यूजर को पेज के साथ इंटरैक्ट करने में सक्षम बनाता है।
लॉग इन करना, सब्सक्राइब करना, कुछ डिलीट करना या खोलना, मेनू दिखाना, कलर थीम बदलना बटन्स के साथ किए जाने वाले एक्शन हैं।
डिफ़ॉल्ट ब्राउज़र बटन स्टाइल्स सबसे अच्छी दिखने वाली नहीं हैं, और किसी भी तरह से आधुनिक नहीं हैं।
हर प्रोजेक्ट पर उनकी स्टाइलिंग को कस्टमाइज़ करके, हम उसी परिणाम के लिए कई बार वही कोड दोहराते हैं।
फिर से, बूटस्ट्रैप हमारी मदद करता है। देखें कि बूटस्ट्रैप बटन्स के साथ क्या संभव है।
रंगीन बटन्स (Colored Buttons)
<button class="btn btn-primary">बटन 1</button> <button class="btn btn-secondary">बटन 2</button> <button class="btn btn-info">बटन 3</button> <button class="btn btn-warning">बटन 4</button> <button class="btn btn-danger">बटन 5</button> <button class="btn btn-success">बटन 6</button> <button class="btn btn-light">बटन 7</button> <button class="btn btn-dark">बटन 8</button> <button class="btn btn-link">बटन 9</button>
रंगों के संबंध में, हम बूटस्ट्रैप के हर पूर्वनिर्धारित रंग का उपयोग कर सकते हैं, साथ ही BTN-LINK विकल्प का उपयोग लिंक्स के लिए बूटस्ट्रैप की स्टाइलिंग लागू करने के लिए कर सकते हैं।
सभी रंगीन विकल्पों को अच्छा यूनिफॉर्म पैडिंग मिलता है, और कर्सर से होवर करने पर थोड़े गहरे शेड में त्वरित रंग परिवर्तन होता है। लिंक पर होवर पर अंडरलाइन होती है।
यदि हम केवल BTN क्लास घोषित करते हैं, तो बूटस्ट्रैप केवल डिफ़ॉल्ट ब्राउज़र स्टाइलिंग को हटा देगा:
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद वे अपनी टेक जॉब संभावनाओं के बारे में अधिक आश्वस्त महसूस करते हैं। आज ही बूटकैंप से जुड़ें।
औसत बूटकैंप ग्रेजुएट ने करियर ट्रांजिशन में छह महीने से कम समय बिताया, बूटकैंप शुरू करने से लेकर पहली नौकरी पाने तक।
<button>बूटस्ट्रैप के बिना</button> <button class="btn">बूटस्ट्रैप के साथ</button>
जैसा कि हम यहां देख सकते हैं:
आउटलाइन बटन्स (Outline Buttons)
हम केवल आउटलाइन वाले बटन बनाने के लिए उन्हीं रंगों का उपयोग कर सकते हैं:
<button class="btn btn-outline-primary">बटन 1</button> <button class="btn btn-outline-secondary">बटन 2</button> <button class="btn btn-outline-info">बटन 3</button> <button class="btn btn-outline-warning">बटन 4</button> <button class="btn btn-outline-danger">बटन 5</button> <button class="btn btn-outline-success">बटन 6</button> <button class="btn btn-outline-light">बटन 7</button> <button class="btn btn-outline-dark">बटन 8</button> <button class="btn btn-outline-link">बटन 9</button>
उन्हें आउटलाइन के समान बैकग्राउंड कलर मिलता है, और टेक्स्ट कंट्रास्ट के आधार पर सफेद या काला हो जाता है। लाइट और येलो (WARNING) को काला टेक्स्ट मिलता है। हालांकि, लिंक वर्जन इस विकल्प का समर्थन नहीं करता।
आकार (Sizing)
बूटस्ट्रैप बटन्स के लिए तीन आकारों का समर्थन करता है: छोटा, नियमित, और बड़ा।
हम आकार चुनने के लिए एक और क्लास जोड़ते हैं जैसे:
<div class="m-5"> <button class="btn btn-primary btn-sm">छोटा बटन 1</button> <button class="btn btn-warning btn-sm">छोटा बटन 2</button> <button class="btn btn-primary btn-sm">छोटा बटन 3</button> </div> <div class="m-5"> <button class="btn btn-primary">नियमित बटन 1</button> <button class="btn btn-warning">नियमित बटन 2</button> <button class="btn btn-danger">नियमित बटन 3</button> </div> <div class="m-5"> <button class="btn btn-primary btn-lg">बड़ा बटन 1</button> <button class="btn btn-warning btn-lg">बड़ा बटन 2</button> <button class="btn btn-danger btn-lg">बड़ा बटन 3</button> </div>
प्रत्येक आकार के तीन बटन बनाए गए हैं, और प्रत्येक आकार को क्लास M-5 के साथ एक डिव में लपेटा गया है बस उन्हें थोड़ा मार्जिन देने के लिए, उन्हें स्पेस आउट करने के लिए।
ब्लॉक लेवल बटन्स (Block Level Buttons)
यदि हम एक बटन चाहते हैं जो अपने कंटेनर एलिमेंट की पूरी चौड़ाई का हो, तो हम इसमें BTN-BLOCK क्लास जोड़ते हैं। आइए एक सरल फॉर्म बनाएं, इस विधि के लिए एक सामान्य मामला।
<div class="form-group"> <label for="username">यूजरनेम</label> <input type="text" class="form-control" /> <div class="form-group"></div> <label for="email">ईमेल</label> <input type="email" class="form-control" /> </div> <button class="btn btn-lg btn-block btn-primary"> ब्लॉक लेवल बटन </button> <button class="btn btn-lg btn-secondary my-2">नियमित बटन</button> </form>
हम बूटस्ट्रैप फॉर्म क्लासेस के बारे में विस्तार से नहीं जाएंगे।
हमने बस एक सरल फॉर्म बनाया जो यूजरनेम और ईमेल स्वीकार करता है, और इसमें एक ब्लॉक लेवल बटन और एक नियमित बटन है।
MT-2 फिर से सिर्फ मार्जिन (टॉप) है जिसे दो बटन्स को अलग करने के लिए जोड़ा गया है।
और यहां हम अंतर देख सकते हैं:
बटन स्टेट (Button State)
बूटस्ट्रैप के कई अन्य कंपोनेंट्स की तरह, हम स्टेट क्लास के साथ बटन की उपस्थिति को बदल सकते हैं, जो ACTIVE या DISABLED है।
एक्टिव स्टेट (Active State)
एक एक्टिव बटन में थोड़ा गहरा बैकग्राउंड, बॉर्डर, और शैडो होता है।
<button class="btn btn-primary">नियमित</button> <button class="btn btn-primary active">एक्टिव</button> <button class="btn btn-primary">नियमित</button>
डिसेबल्ड स्टेट (Disabled State)
इसके विपरीत, डिसेबल्ड बटन्स उन्हीं प्रॉपर्टीज के लिए हल्के शेड्स का उपयोग करते हैं। जान लें कि DISABLED क्लास जोड़ने से बटन को केवल हल्के रंग मिलेंगे। इसे वास्तव में अक्षम करने के लिए, हमें इसे बटन की विशेषता के रूप में घोषित करना होगा:
<button class="btn btn-primary disabled">डिसेबल्ड दिखने वाला</button> <button class="btn btn-primary" disabled>वास्तव में डिसेबल्ड</button>
क्लास DISABLED वाला बटन अभी भी क्लिक करने योग्य है, और यदि इसके पास एक है तो एक्शन करेगा।
सहायक प्रौद्योगिकियों के लिए, हमें ARIA-DISABLED="TRUE" विशेषता भी शामिल करनी होगी, ताकि स्क्रीन रीडर यूजर्स को पता चले कि स्क्रीन पर एक डिसेबल्ड बटन है।
साथ ही, वर्तमान में एलिमेंट्स DISABLED विशेषता का समर्थन नहीं करते हैं, इसलिए डिसेबल्ड लुक पाने के लिए हमें क्लास शामिल करनी होगी।
<a class="btn btn-danger" disabled>विशेषता समर्थित नहीं</a> <a href="#" class="btn btn-danger disabled">डिसेबल्ड लुक</a>
हालांकि, यह अभी तक सभी वेब ब्राउज़र्स पर पूरी तरह से समर्थित नहीं है, और समर्थित ब्राउज़र्स पर भी, लिंक को अभी भी कीबोर्ड के माध्यम से एक्सेस किया जा सकता है।
यह सुनिश्चित करने के लिए कि फंक्शन पूरी तरह से अक्षम है, हमें TABINDEX="-1" विशेषता जोड़नी चाहिए, ताकि उन्हें कीबोर्ड के साथ भी फोकस नहीं किया जा सके।
आपको वैसे भी टैग्स का उपयोग बटन्स के रूप में नहीं करना चाहिए, लेकिन यह जानना अच्छा है।
बटन ग्रुप्स (Button Groups)
बूटस्ट्रैप में CARDS < (प्रकाशन के समय) की तरह, हम बटन्स को विजुअली एक सिंगल एलिमेंट में फ्यूज करने के लिए GROUP क्लास का उपयोग कर सकते हैं।
<div class="btn-group"> <button class="btn btn-primary">बटन 1</button> <button class="btn btn-warning">बटन 2</button> <button class="btn btn-info">बटन 3</button> <button class="btn btn-danger">बटन 4</button> </div>
हम बस उन्हें BTN-GROUP क्लास के साथ एक डिव में लपेटते हैं और बस!
व्यवहार बिल्कुल वैसा ही है, लेकिन अब वे एक दूसरे के ठीक बगल में हैं, और बाहरी कोने अच्छी तरह से गोल हैं।
इसे सारांशित करने के लिए
बटन्स लगभग हर वेबसाइट पर पाए जा सकते हैं, और वे ऑनलाइन अनुभव का एक बहुत महत्वपूर्ण हिस्सा हैं। हम अपने खातों में लॉग इन कर सकते हैं, ऑनलाइन कुछ ऑर्डर कर सकते हैं, न्यूज़लेटर सब्सक्राइब कर सकते हैं, या बटन्स के साथ हमारे इनबॉक्स में आने वाले उस सभी स्पैम को ब्लॉक कर सकते हैं। उनके बिना, वेबसाइट्स डिजिटल बिजनेस कार्ड्स होंगी। बूटस्ट्रैप के माध्यम से, हम बटन्स को अपनी साइट्स का एक सुंदर कंपोनेंट भी बना सकते हैं।
