एक मॉडल एक विंडो है जो वेब पेज की मुख्य विंडो से अलग होती है। इसका मुख्य उद्देश्य मुख्य विंडो को उपयोगकर्ता इंटरैक्शन से अक्षम करना और उपयोगकर्ता के साथ जानकारी साझा करना या कुछ पुष्टि करना है। मॉडल विंडो लॉग-इन घटकों, उपयोगकर्ता इनपुट की पुष्टि, या अन्य असंख्य उपयोगों के रूप में उपयोग करने के लिए लोकप्रिय हैं।
बूटस्ट्रैप एक ऐसा फ्रेमवर्क है जो हमें घटकों को सुपर जल्दी बनाने में मदद कर सकता है। इस लेख में, हम समीक्षा करते हैं कि बूटस्ट्रैप को कैसे सेट किया जाए, हमें मॉडल की आवश्यकता क्यों हो सकती है, और बूटस्ट्रैप फ्रेमवर्क का उपयोग करके मॉडल के कुछ उदाहरणों को देखते हैं।
शुरुआत करना
यह सुनिश्चित करने के लिए कि हम अपने वेब पेज में एक मॉडल देख सकें, सुनिश्चित करें कि हमारे पास उचित निर्भरताएँ हैं। इस परियोजना के लिए, हमें बूटस्ट्रैप, Popper.JS और jQuery की आवश्यकता है। सभी निर्भरताएँ प्राप्त करने में सहायता के लिए बूटस्ट्रैप के क्विक स्टार्ट पेज पर जाएँ।
यह आप पर निर्भर करता है कि आप आवश्यक पैकेज को कैसे लिंक करते हैं, लेकिन सबसे आसान, सबसे शुरुआती-अनुकूल तरीका है jQuery, Popper.js, और बूटस्ट्रैप के लिए कंटेंट डिलीवरी नेटवर्क - CDN - का उपयोग करना। अपने <script> टैग के क्रम से सावधान रहें - यहाँ क्रम मायने रखता है।
मॉडल का उपयोग कब करें
मॉडल वेब-आधारित अनुप्रयोगों के लिए बहुत अच्छे हैं जिन्हें उपयोगकर्ता का ध्यान आकर्षित करने की आवश्यकता होती है।
उदाहरण के लिए, जब आप अपने बैंक की वेबसाइट पर लॉग इन करते हैं, फिर दूसरे टैब पर नेविगेट करते हैं, और फिर पहली वेबसाइट पर वापस जाते हैं, तो आप एक मॉडल देख सकते हैं जो पॉप अप हुआ है, जो दर्शाता है कि आपको निष्क्रियता के कारण लॉग आउट किया जा रहा है। निष्क्रियता का पता लगाना एक प्रमुख उदाहरण है जब मॉडल की आवश्यकता होती है। बैंक का सेटअप उपयोगकर्ता को साइट पर आगे की बातचीत की अनुमति नहीं देता जब तक कि उपयोगकर्ता लॉग इन रहने या लॉग आउट करने का निर्णय नहीं लेता।
विकास के दृष्टिकोण से, मॉडल वेबसाइट को एक नए पेज पर रीफ्रेश होने से रोकने में मदद करते हैं जब यह आवश्यक नहीं है। किसी भी संख्या में खरीदारी खुदरा विक्रेता इसे अपने उपयोगकर्ताओं को "क्विक व्यू" प्रदान करने के तरीके के रूप में उपयोग करते हैं ताकि उपयोगकर्ता न केवल उनकी साइट को तेजी से नेविगेट कर सके, बल्कि तेजी से खरीदारी पूरी कर सके। क्विक व्यू को किसी आइटम की जानकारी प्राप्त करने के लिए पूरे पेज रीलोड की आवश्यकता नहीं होती है।
यदि किसी उपयोगकर्ता को मॉडल के साथ इंटरैक्ट करते समय मुख्य स्क्रीन सामग्री तक पहुँचने की आवश्यकता है, तो उपयोग करने के लिए किसी अन्य UI तत्व तक पहुँचें। मॉडल का उद्देश्य मुख्य विंडो के साथ इंटरैक्शन को दूर करना है, जिससे नियंत्रण मॉडल को मिल जाता है।
81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही बूटकैंप से मिलान करें।
औसत बूटकैंप स्नातक ने बूटकैंप शुरू करने से लेकर पहली नौकरी खोजने तक कैरियर परिवर्तन में छह महीने से कम समय बिताया।
मॉडल बनाने के लिए बूटस्ट्रैप का उपयोग करें
मॉडल पारंपरिक रूप से HTML, CSS और JavaScript के साथ बनाए जाते हैं। ये सभी भाषाएँ मॉडल के निर्माण के लिए महत्वपूर्ण हैं, लेकिन मॉडल को काम करने के लिए JavaScript अनिवार्य है। JavaScript वह स्विच है जो मॉडल को चालू या बंद करेगा।
बूटस्ट्रैप का उपयोग करते समय, दस्तावेज़ीकरण को हाथ में रखना अच्छा होता है ताकि आप मॉडल कोड को ठीक से कॉपी और पेस्ट कर सकें। जैसे ही आप बूटस्ट्रैप का उपयोग करना सीख रहे हैं, और ये घटक कैसे काम करते हैं, मैं कोड को कॉपी/पेस्ट करने और फिर टिप्पणी करने की सलाह देता हूँ ताकि आप जान सकें या पता लगा सकें कि कोड की प्रत्येक पंक्ति क्या कर रही है।
चूँकि हम बूटस्ट्रैप के मॉडल कोड का उपयोग करके पहिया का पुनः आविष्कार नहीं कर रहे हैं, यह जानना महत्वपूर्ण है कि यह कैसे काम करता है ताकि आप इसे किसी अन्य व्यक्ति को समझा सकें। यदि आप यह समझाने में सक्षम नहीं हैं कि यह क्यों काम करता है तो किसी चीज को कॉपी और पेस्ट करना इसके लायक नहीं है।
बटन के साथ मॉडल लॉन्च करना
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" >Launch demo modal </button>
यह कोड सीधे बूटस्ट्रैप के दस्तावेज़ीकरण से आता है कि उनके फ्रेमवर्क का उपयोग करके मॉडल कैसे बनाया जाए। लेख का शेष भाग कोड के माध्यम से जाने में व्यतीत होता है ताकि हम मार्कअप के अर्थ के बारे में सुनिश्चित हो सकें। हम मुख्य रूप से इस खंड में विशेषताओं को कवर करते हैं।
class="btn btn-primary"
हम जानते हैं कि CSS से संबंधित क्लास का क्या अर्थ है। यहाँ यह अलग नहीं है। सूचीबद्ध क्लास उस बूटस्ट्रैप स्टाइलशीट से मेल खाते हैं जिसे हमने HTML दस्तावेज़ के हेड में संदर्भित किया था।
"btn" क्लास बटन की अधिकांश स्टाइलिंग को नियंत्रित करता है; रंग को दूसरी क्लास नाम द्वारा नियंत्रित किया जाता है। "btn-primary" को किसी अन्य सामान्य बटन रंग (यानी btn-secondary या btn-danger) में बदलकर देखें कि क्या होता है।
data-toggle="modal"
यह विशेषता मॉडल के अंदर बटन का हिस्सा होने वाली data-dismiss विशेषता से मेल खाती है।
data-target="#exampleModal"
data-target विशेषता उस कोड ब्लॉक को लक्षित करती है जिसकी आईडी exampleModal है। exampleModal हमारी वास्तविक मॉडल सामग्री है। यह पहचाने गए ब्लॉक से जानकारी लेता है।
यह विशेष रूप से महत्वपूर्ण है यदि हमारे पास एक ही पृष्ठ पर कई मॉडल हैं। आप data-target विशेषता और आईडी को बदलना चाहेंगे ताकि एक समय में केवल एक मॉडल खुले।
इवेंट हैंडलर सभी jQuery और Popper.js का उपयोग करके बूटस्ट्रैप द्वारा प्रबंधित किए जाते हैं। इस बारे में चिंता करने की कोई आवश्यकता नहीं है कि जब कोई उपयोगकर्ता क्लिक करता है तो क्या करना है क्योंकि यह पहले से ही संभाला हुआ है! यह सुनिश्चित करने के लिए कि यह काम करना जारी रखे, किसी भी मूल क्लास नाम को न बदलें क्योंकि इसी तरह उन्हें हमारे CSS में चुना जाता है।
मुख्य मॉडल तत्व
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > ... Modal stuff here ... </div>
ऊपर की तरह, यह कोड सीधे बूटस्ट्रैप के दस्तावेज़ीकरण से आता है। इस खंड का उद्देश्य मार्कअप पर जाना है ताकि इसका अर्थ निश्चित हो सके।
class="modal fade"
मुख्य मॉडल तत्व को मुख्य वेब पेज पर एक बटन का उपयोग करके लॉन्च किया जाता है। यहाँ क्लास नाम इंगित करते हैं कि हमारे मॉडल के लिए दो अलग-अलग चयनकर्ता हैं। पहला मॉडल के लिए शैलियों को इंगित करता है। दूसरा इंगित करता है कि यह तत्व फीड-इन और फीड-आउट तकनीक का उपयोग करके संक्रमण करता है।
id="exampleModal"
हमने पहले आईडी विशेषता देखी है। यह किसी तत्व को स्टाइल बदलने के लिए लक्षित करने का तरीका है। इस उदाहरण में, यह मुख्य पृष्ठ पर लॉन्च बटन का लक्ष्य भी है। यह "data-target" विशेषता से मेल खाता है।
tabindex="-1"
tabindex आमतौर पर इंगित करता है कि तत्व कीबोर्ड द्वारा पहुँच योग्य है। यह मामला नहीं है जब संख्या नकारात्मक है। यह JavaScript और/या क्लिक इवेंट का उपयोग करके केंद्रित होगा।
aria-labelledby="exampleModalLabel" aria-hidden="true"
aria विशेषताएँ सीधी हैं और एक्सेसिबिलिटी को संदर्भित करती हैं। लेबल्डबाई aria विशेषता आमतौर पर उस मॉडल-शीर्षक आईडी से जुड़ी होती है। छिपी हुई विशेषता का सही मान इंगित करता है कि यह स्क्रीन रीडर द्वारा नहीं देखा जाता है।
बूटस्ट्रैप स्टार्टर के साथ अपना खुद का मॉडल तत्व बनाना
आप शैलियों को बदलकर बूटस्ट्रैप के मॉडल पर अपना खुद का स्पिन डाल सकते हैं। CSS की कैस्केडिंग प्रकृति अभी भी सर्वोच्च है इसलिए CSS को ओवरराइट करना एक नया क्लास बनाकर और उसे स्पेस से अलग क्लास नाम से जोड़कर, या महत्वपूर्ण कीवर्ड का उपयोग करके क्लास नाम को ओवरराइट करके किया जा सकता है। बाद वाले का उपयोग केवल चरम मामलों में किया जाना चाहिए। अक्सर, हम एक कस्टम क्लास नाम के साथ किए गए परिवर्तनों को देखेंगे।
<!DOCTYPE html> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>Bootstrap Modal</title> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- बूटस्ट्रैप स्टाइलशीट से लिंक --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" /> <style> body { max-width: 1400px; width: 100%; padding: 20px; margin: 20px; } .btn-ck { background-color: goldenrod; border: 1px solid black; color: black; } .btn-ck:hover { background-color: rgb(231, 203, 131); border: 1px solid lightgray; } .custom-modal { background: rgb(250, 249, 243); height: 400px; width: 500px; position: fixed; top: center; left: center; } </style> </head> <body> <!--[if lt IE 7]> <p class="browsehappy"> You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience. </p> <![endif]--> <!-- बटन मॉडल को ट्रिगर करता है --> <h1>Modal Example</h1> <button type="button" class="btn btn-primary btn-ck" data-toggle="modal" data-target="#exampleModal" > Launch demo modal </button> <!-- मॉडल --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content custom-modal"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel"> CareerKarma Demo Modal </h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close" > <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> You are reading a modal with a bit of custom styling... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal" > Close </button> <button type="button" class="btn btn-primary btn-ck"> Save changes </button> </div> </div> </div> </div> <!-- निम्नलिखित CDN समापन बॉडी टैग से ठीक पहले जाते हैं। --> <!-- jQuery CDN पहले --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" async defer ></script> <!-- popper.js CDN दूसरा --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.4/umd/popper.min.js" async defer ></script> <!-- बूटस्ट्रैप CDN तीसरा --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js" async defer ></script> </body> </html> ऊपर दिए गए कोड संपादक में, हमने बटनों की शैली और मॉडल की पृष्ठभूमि को बदलने के लिए CSS का उपयोग किया है। इस उदाहरण में, मैंने !important कीवर्ड का उपयोग करके बूटस्ट्रैप द्वारा पहले से प्रदान किए गए किसी भी CSS को ओवरराइट करने की कोशिश करने के बजाय एक कस्टम क्लास नाम जोड़ा है।
निष्कर्ष
बूटस्ट्रैप का उपयोग करके मॉडल बनाते समय मुख्य बाधा यह सुनिश्चित करना है कि दस्तावेज़ीकरण सही ढंग से तैयार है। अक्सर यदि कोई त्रुटि होती है, तो यह कॉपी/पेस्ट त्रुटि, आपके HTML के हेड/बॉडी में CDN या स्टाइलशीट की स्थिति में त्रुटि, या यह कि आपका CSS सही तत्व को लक्षित नहीं कर रहा है, के कारण होने की सबसे अधिक संभावना है।
इस कस्टम स्टाइलिंग में से कुछ परीक्षण और त्रुटि के साथ आएगा। जो बढ़िया है वह यह है कि बूटस्ट्रैप का दस्तावेज़ीकरण बहुत विस्तृत है - यदि आपने इससे पहले कोई अन्य फ्रेमवर्क या पैकेज नहीं सीखा है, तो आप भाग्यशाली हैं कि दस्तावेज़ीकरण बहुत बढ़िया है और समझने में काफी सरल है।
