इस पोस्ट में हम बूटस्ट्रैप के साथ एक साइट बनाकर शुरू करेंगे, खुला स्रोत ढांचा जो हमारे लिए इसे उत्तरदायी बनाना और इसे कुछ अंतःक्रियाशीलता प्रदान करना आसान बनाता है। यह एक विकास पर्यावरण प्लगइन द्वारा स्वचालित रूप से उत्पन्न एक बुनियादी टेम्पलेट है जिसकी हमने पहले सिफारिश की थी और जिसे हमें संशोधित करना होगा।
में पिछले लेख आपको वीएस कोडियम स्थापित करने, इसके यूजर इंटरफेस को स्पेनिश में अनुवाद करने और बूटस्ट्रैप प्लगइन स्थापित करने के निर्देश मिलेंगे।
ध्यान रखने योग्य दो बातें:
- हमारे द्वारा उपयोग किए जाने वाले कमांड कीबोर्ड शॉर्टकट हैं, आपको उन्हें टाइप करना होगा। कॉपी/पेस्ट काम नहीं करता है।
- हमारा सामग्री प्रबंधक मुझे HTML कोड प्रदर्शित करने की अनुमति नहीं देता है इसलिए मुझे स्क्रीनशॉट का उपयोग करना होगा। ताकि आपके पास मेरे द्वारा अपलोड किए गए उदाहरणों के कोड तक पहुंच हो गिटहब को।
GitHub रिपॉजिटरी का क्लोन कैसे बनाएं
जो चीज महान लोगों को हममें से बाकी लोगों से अलग करती है, वह है समस्याओं पर प्रतिक्रिया करने का उनका तरीका। रिचर्ड स्टॉलमैन अपने प्रिंटर ड्राइवर को पसंद नहीं करते थे और चूंकि वे उसे इसे बदलने नहीं देते थे, इसलिए उन्होंने मुफ्त सॉफ्टवेयर आंदोलन शुरू किया। लिनुस टॉर्वाल्ड्स किसी भी कोड शेयरिंग प्लेटफॉर्म से आश्वस्त नहीं थे और उन्होंने अपना खुद का बनाया। गिट
पारंपरिक सॉफ्टवेयर वितरण प्रणालियों के विपरीत, जिसमें केवल उपयोगकर्ता इंटरैक्शन की अनुमति डाउनलोडिंग है, गिट के साथ आप समय के साथ परियोजना के विकास का अनुसरण कर सकते हैं। अन्य लोग रिपॉजिटरी को क्लोन कर सकते हैं, संशोधन कर सकते हैं और प्रस्ताव कर सकते हैं कि मूल परियोजना के डेवलपर्स उन्हें शामिल करें। यदि स्वीकार कर लिया जाता है, तो डेवलपर्स फ़ाइलों को डाउनलोड और पुनः अपलोड किए बिना आसानी से ऐसा कर सकते हैं।
Git पर आधारित कई सेवाएँ हैं, मैंने GitHub को चुना सिर्फ इसलिए कि यह वीएस कोडियम के साथ एकीकृत है।
अपने कंप्यूटर पर नमूना फ़ाइलों को डाउनलोड करने के लिए आपको टर्मिनल में पैकेज स्थापित करने के लिए अपने वितरण के निर्देशों का पालन करते हुए बस git पैकेज को स्थापित करने की आवश्यकता है।
फिर आप निम्न कमांड टाइप करें।
मैं दस्तावेज़ फ़ोल्डर में फ़ाइलों को सहेजना पसंद करता हूं इसलिए मैं निर्देशिका को बदलता हूं
cd Documentos
फिर मैं फाइलों को क्लोन करता हूं:
git clone https://github.com/dggonzalez1971/bootstrap.git
मैं आपको शेष प्रत्येक लेख में इन चरणों की याद दिलाने जा रहा हूं, क्योंकि इस तरह से आप उदाहरण फ़ाइलों को अपलोड करते ही अपडेट करते रहेंगे।
फ़ाइलों को देखने के लिए बस फ़ाइल एक्सप्लोरर खोलें और फ़ोल्डर देखें बूटस्ट्रैप.
बूटस्ट्रैप के साथ साइट बनाना
यदि आप मैन्युअल रूप से कोड टाइप करना पसंद करते हैं तो हम एक फ़ोल्डर बनाकर शुरू करते हैं जिसमें हम साइट को सहेजेंगे। आप जो भी नाम पसंद करते हैं डाल सकते हैं।
फिर हम अगले चरणों का पालन करते हैं:
- मेनू पर चलते हैं पुरालेख।
- पर क्लिक करें नई टेक्स्ट फ़ाइल.
- पर क्लिक करें सहेजें.
- हम अपने द्वारा बनाए गए फ़ोल्डर की तलाश करते हैं और फ़ाइल का नाम डालते हैं example1.html.
- पर क्लिक करें सहेजें.
कभी-कभी फाइल एक्सप्लोरर विंडो VSCodium वन द्वारा छिपी हो सकती है।
आइए एक्सटेंशन को हमारे लिए मूल टेम्पलेट बनाएं। इसके लिए हम टाइप करते हैं !b5-$
यह कोड उत्पन्न करेगा जो आपको उदाहरण फ़ोल्डर में example1.html . के रूप में मिलेगा
हम निम्नलिखित देखेंगे:
यह बूटस्ट्रैप एक्सटेंशन द्वारा उत्पन्न कोड है।
हम इस फाइल में कुछ बदलाव करने जा रहे हैं। आप संशोधनों को example2.html . नाम से पाएंगे
- लाइन 2 पर हम eng को es से बदलकर भाषा बदलते हैं। यह खोज इंजनों को इंगित करता है कि साइट की भाषा स्पेनिश है।
- लाइन 6 में हम उस टेक्स्ट को बदलते हैं जो लेबल के नीचे है शीर्षक। हम डालते है मेरी पहली बूटस्ट्रैप साइट।
- लाइन 12 में हम टैग के बीच की सामग्री को बदलते हैं h1 द्वारा यह बूटस्ट्रैप से बनी साइट है।
आगे, हम कुछ महत्वपूर्ण संशोधन करेंगे। इन संशोधनों के साथ क्या करना है:
- प्लगइन डेवलपर बूटस्ट्रैप संस्करणों के साथ नहीं रह सकता है और अधिक वर्तमान हैं।
- बूटस्ट्रैप घटकों के लिए कई विकल्प हैं और मुझे दूसरे में दिलचस्पी है।
- आधिकारिक दस्तावेज के अनुसार, जावास्क्रिप्ट पुस्तकालयों के लिए कॉल बॉडी टैग के अंदर होनी चाहिए।
उदाहरण के लिए 2 हम पंक्ति 7 की सामग्री को संशोधित करते हैं, पंक्ति 8 और 9 को हटाते हैं और शेष सामग्री को क्रमांकन संगतता बनाए रखने के लिए अपलोड करते हैं। फिर हम एक नई लाइन 10 बनाने के लिए लाइन 11 के अंत पर क्लिक करते हैं और लिंक को जावास्क्रिप्ट लाइब्रेरी में डालते हैं।
यदि आप कोड को नहीं समझते हैं तो चिंता न करें। मैं अगले लेख में प्रत्येक पंक्ति के कार्य के बारे में बताऊंगा।