2013 में अपनी रिलीज़ के बाद से, बूटस्ट्रैप ने क्रांति ला दी है कि कैसे डेवलपर्स वेब पेजों को स्टाइल करते हैं। बूटस्ट्रैप एक लोकप्रिय फ्रंट-एंड फ्रेमवर्क है जिसका उपयोग उत्तरदायी वेब एप्लिकेशन को डिजाइन करने के लिए किया जाता है।
Django वेब पेजों को स्टाइल करने के लिए बूटस्ट्रैप की पूर्व-निर्मित CSS शैलियों और जावास्क्रिप्ट प्लगइन्स का उपयोग करता है। जबकि यह स्टाइलिंग की परेशानी को कम करता है, इसे Django में कॉन्फ़िगर करना चुनौतीपूर्ण हो सकता है।
आइए जानें कि Django एप्लिकेशन में बूटस्ट्रैप को कैसे इंस्टॉल और कॉन्फ़िगर किया जाए।
बूटस्ट्रैप कैसे स्थापित करें
इसके दो तरीके हैं बूटस्ट्रैप 5 का प्रयोग करें एक Django परियोजना में। आप इसे अपने एप्लिकेशन में इंस्टॉल कर सकते हैं या फ़ाइलों का उपयोग करके संदर्भ दे सकते हैं बूटस्ट्रैप की सीडीएन. यह परियोजना पूर्व पद्धति का उपयोग करेगी।
बूटस्ट्रैप स्थापित करने से पहले, एक Django परियोजना बनाएँ और गैलरी नामक एक एप्लिकेशन। एप्लिकेशन एक फोटो गैलरी होगी, और आप एप्लिकेशन के नेविगेशन बार को स्टाइल करने के लिए बूटस्ट्रैप का उपयोग करेंगे।
अगला, निम्न आदेश के साथ बूटस्ट्रैप स्थापित करें:
पिपेनव स्थापित करना django-bootstrap5 # बूटस्ट्रैप संस्करण 5 स्थापित करता हैपिपफाइल की जांच करें और पुष्टि करें कि बूटस्ट्रैप 5 निर्भरता है। अब आपको Django प्रोजेक्ट को सूचित करने की आवश्यकता है कि आप बूटस्ट्रैप निर्भरता का उपयोग कर रहे हैं।
में settings.py फ़ाइल, बूटस्ट्रैप को नीचे दिखाए अनुसार पंजीकृत करें:
INSTALLED_APPS = [
'गेलरी',
'bootstrap5',
]प्रोजेक्ट सेटिंग्स में बूटस्ट्रैप को पंजीकृत करना django-bootstrap5 निर्भरता को आपके प्रोजेक्ट से जोड़ता है। यह परियोजना में परिभाषित किसी अन्य एप्लिकेशन के लिए उपलब्ध होगा।
टेम्पलेट पर बूटस्ट्रैप लागू करें
सबसे पहले नाम का एक फोल्डर बनाएं खाके आपके एप्लिकेशन फ़ोल्डर में। इस फोल्डर के अंदर एक आधार.html फ़ाइल और ए नेवबार.html फ़ाइल। टेम्प्लेट में HTML फाइलें होंगी जिन्हें बूटस्ट्रैप स्टाइल करेगा।
जबकि आप बूटस्ट्रैप को नेवबार.html टेम्पलेट, आधार फ़ाइल का उपयोग पारंपरिक है। ए आधार.html फ़ाइल में किसी भी पेज पर लागू करने के लिए सभी स्क्रिप्ट और लिंक होंगे। यह अलग-अलग टेम्प्लेट की जटिलता को कम करता है, जिससे आपका कोड साफ़ और समझने में आसान हो जाता है।
में आधार.html फ़ाइल, निम्न शामिल करें:
{% लोड बूटस्ट्रैप5%}<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<मेटा चारसेट ="यूटीएफ-8">
<मेटा http-equiv="एक्स-UA- संगत" सामग्री ="आईई = किनारा">
<मेटा नाम ="व्यूपोर्ट" सामग्री ="चौड़ाई = उपकरण-चौड़ाई, प्रारंभिक-पैमाना = 1.0">
<शीर्षक> गेलरी </title>{% ब्लॉक शैलियाँ %}
{% बूटस्ट्रैप_सीएसएस%}
{% एंडब्लॉक%}
</head>
<शरीर>
{% शामिल करना 'नेवबार.html' %}
{% ब्लॉक सामग्री%} {% एंडब्लॉक%}
{% ब्लॉक स्क्रिप्ट%}
<स्क्रिप्ट src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" अखंडता ="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" क्रॉसोरिजिन ="अनाम">
</script>
{% बूटस्ट्रैप_जावास्क्रिप्ट%}
</body>
</html>
सबसे पहले, बूटस्ट्रैप5 निर्भरता लोड करें। फिर दो ब्लॉक स्टाइल बनाएं जहां आप टेम्प्लेट के लिए सभी स्टाइल परिभाषित करेंगे। सम्मिलित करें {% बूटस्ट्रैप_सीएसएस%} टेम्प्लेट टैग और बूटस्ट्रैप CSS फ़ाइल का लिंक।
अगला, एक ब्लॉक स्क्रिप्ट बनाएं जो जावास्क्रिप्ट कार्यक्षमता को परिभाषित करती है।
ये शामिल हैं नेवबार.html में आधार.html इसे बूटस्ट्रैप से जोड़ता है।
बूटस्ट्रैप शैलियों को जोड़कर कॉन्फ़िगरेशन का परीक्षण करें नेवबार.html साँचा:
<नव वर्ग ="नावबार नावबार-विस्तार-lg">
<डिव क्लास ="कंटेनर-द्रव">
<एच2 वर्ग ="ब्रैंड" शैली ="हरा रंग करें">पिचा गैलरी</h2><बटन क्लास ="navbar-toggler" टाइप ="बटन" डेटा-टॉगल ="गिर जाना" डेटा-लक्ष्य ="#navbarसमर्थित सामग्री" आरिया-नियंत्रण ="navbarSupportedContent" आरिया-विस्तारित ="असत्य" आरिया-लेबल ="टॉगल से संचालित करना"><मैं वर्ग ="फास एफए-बार"></मैं></button>
<डिव क्लास ="पतन नेवबार-पतन" आईडी ="navbarSupportedContent">
<उल वर्ग ="नवबार-नव एमएल-ऑटो एमबी-2 एमबी-एलजी-0">
<ली वर्ग ="नव-आइटम"><एक वर्ग ="नव-लिंक नव-लिंक-1 सक्रिय" आरिया-वर्तमान ="पृष्ठ" href="{% यूआरएल 'घर' %}" शैली ="हरा रंग करें">घर</ए></li>
<ली वर्ग ="नव-आइटम"><एक वर्ग ="नव-लिंक नव-लिंक -2" href="#गेलरी" शैली ="हरा रंग करें">गेलरी</ए</li>
</ul>
</div>
</div>
</nav>
अब, सर्वर को चलाएं और ब्राउज़र में अपनी साइट की जांच करें। आपको उस स्टाइल को देखना चाहिए जो बूटस्ट्रैप नेविगेशन बार पर लागू होता है।
Django प्रोजेक्ट्स में बूटस्ट्रैप का उपयोग क्यों करें?
आप ज्यादातर Django का उपयोग बैक-एंड डेवलपमेंट के लिए करेंगे, लेकिन यह अद्भुत फ्रंट-एंड पेज भी बना सकता है। Django शुरुआती लोगों के लिए फ्रंट-एंड पेजों को स्टाइल करने के लिए बूटस्ट्रैप का उपयोग करना अच्छा अभ्यास है। जब आप फुल-स्टैक एप्लिकेशन बनाते हैं तो आपको Django की गहन समझ मिलती है।
किसी भी फ्रंट-एंड फ्रेमवर्क की तरह, आप अपने वेब पेजों को स्टाइल करने के लिए Django प्रोजेक्ट के साथ बूटस्ट्रैप क्लासेस का उपयोग कर सकते हैं। बूटस्ट्रैप 5 में बेहतर घटक और तेज़ स्टाइल शीट है। इसने आधुनिक उपकरणों के लिए जवाबदेही में भी सुधार किया है।
अपने Django प्रोजेक्ट्स के लिए स्टाइल और अद्भुत UI बनाने के लिए बूटस्ट्रैप का उपयोग क्यों न करें? Django आपको वेब विकास में अपनी क्षमताओं से विस्मित कर देगा।