बूटस्ट्रैप विकास वातावरण बनाना

बूटस्ट्रैप के साथ साइट बनाने के लिए VSCodium एक आदर्श विकास वातावरण है

इस लेख में हम बूटस्ट्रैप डेवलपमेंट एनवायरनमेंट बनाकर शुरुआत करेंगे। जैसा कि हमने पिछले लेख में बताया था, बूटस्ट्रैप एक ढांचा है जो हमारे लिए ऐसी साइटें बनाना आसान बनाता है जो किसी भी स्क्रीन आकार के लिए स्वचालित रूप से अनुकूल हो जाती हैं।

दरअसल, किसी विशेष उपकरण की जरूरत नहीं है। आप अपने डेस्कटॉप पर टेक्स्ट एडिटर में आसानी से कोड लिख सकते हैं। कई के पास HTML, CSS और Javascript के लिए भी समर्थन है। परंतु, एकीकृत विकास वातावरण में अन्य उपकरण शामिल हैं जो आपके लिए कोड लिखना और प्रूफरीड करना आसान बनाते हैं।

बूटस्ट्रैप विकास वातावरण बनाना

मेरे स्वाद के लिए, सबसे अच्छा एकीकृत विकास वातावरण विजुअल स्टूडियो कोड है। लेकिन, कई लिनक्स उपयोगकर्ता इसे पसंद नहीं करते क्योंकि यह माइक्रोसॉफ्ट को टेलीमेट्री भेजता है। फिर भी, एक विकल्प है जो VSCode स्रोत कोड का उपयोग करता है जिसे VSCodium कहा जाता है जो किसी के साथ डेटा साझा नहीं करता है। अर्थात् संस्करण जिसका उपयोग हम अभी से करेंगे।

वीएसकोडियम स्थापित करना

हम VSCodium को निम्नलिखित तरीकों से स्थापित कर सकते हैं:

स्नैप स्टोर

sudo snap install codium --classic

फ्लैट पैक

flatpak install flathub com.vscodium.codium

डेबियन और डेरिवेटिव

हमें सत्यापन कुंजियाँ मिली हैं

wget -qO - https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/raw/master/pub.gpg \
| gpg --dearmor \
| sudo dd of=/usr/share/keyrings/vscodium-archive-keyring.gpg

हम भंडार जोड़ते हैं
इको 'देब [हस्ताक्षरित-द्वारा=/usr/share/keyrings/vscodium-archive-keyring.gpg] https://download.vscodium.com/debs vscodium main' \
| सुडो टी /etc/apt/sources.list.d/vscodium.list
हम अपडेट और इंस्टॉल करते हैं
sudo apt update
sudo apt install codium

फेडोरा / आरएचईएल / सेंटोस / रॉकीलिनक्स / ओपनएसयूएसई

हमें सत्यापन कुंजियाँ मिलती हैं

sudo rpmkeys --import https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg

हम भंडार जोड़ते हैं

फेडोरा/आरएचईएल/सेंटोस/रॉकीलिनक्स: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=download.vscodium.com\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/yum.repos.d/vscodium.repo

ओपनएसयूएसई/एसयूएसई: printf "[gitlab.com_paulcarroty_vscodium_repo]\nname=gitlab.com_paulcarroty_vscodium_repo\nbaseurl=https://download.vscodium.com/rpms/\nenabled=1\ngpgcheck=1\nrepo_gpgcheck=1\ngpgkey=https://gitlab.com/paulcarroty/vscodium-deb-rpm-repo/-/raw/master/pub.gpg\nmetadata_expire=1h" | sudo tee -a /etc/zypp/repos.d/vscodium.repo

स्थापित करने के लिए हम करते हैं:

फेडोरा/आरएचईएल/सेंटोस/रॉकीलिनक्स: sudo dnf install codium

OpenSUSE / SUSE: sudo zypper in codium

आर्क लिनक्स

हम इन दोनों में से किसी एक कमांड का उपयोग कर सकते हैं

sudo aura -A vscodium-bin

o

yay -S vscodium-bin

तोता ओएस

sudo apt update
sudo apt install codium

निक्स (ओएस)

nix-env -iA nixpkgs.vscodium

VSCodium को कॉन्फ़िगर करना

स्थापना मोड के आधार पर, VSCodium अंग्रेजी में हो सकती है। इसे हम आसानी से बदल सकते हैं।

  1. फ़ाइलें मेनू में क्लिक करें पसंद।
  2. पर क्लिक करें विस्तार.
  3. हम लिखना स्पेनिश सर्च इंजन में।
  4. एक्सटेंशन पर क्लिक करें स्पेनिश भाषा.
  5. हम क्लिक करके इंस्टालेशन शुरू करते हैं स्थापित करें.
  6. पर क्लिक करें भाषा बदलें और पुनरारंभ करें।

VSCode में एक्सटेंशन का एक विशाल संग्रह है जो विभिन्न भाषाओं में प्रोग्रामिंग की सुविधा प्रदान करता है, और हम उनका उपयोग VSCodium में भी कर सकते हैं। हमें जिसकी आवश्यकता है उसे स्थापित करें:

  1. पर क्लिक करें प्राथमिकताएं।
  2. पर क्लिक करें एक्सटेंशन।
  3. हम लिखना जूते का फीता सर्च इंजन में।
  4. हम उसे चुनते हैं जो कहता है बूटस्ट्रैप 5 और फ़ॉन्ट विस्मयकारी स्निपेट्स।
  5. इंस्टॉल पर क्लिक करें

जब हम साइट कोड लिखना शुरू करेंगे तो हम इस एक्सटेंशन का उपयोग देखेंगे। लेकिन, मुझे एक स्पष्टीकरण देना होगा। इसके काम करने के लिए आपको कमांड टाइप करनी होगी। इस मामले में कॉपी और पेस्ट काम नहीं करता है।

बूटस्ट्रैप प्राप्त करना

बूटस्ट्रैप मूल रूप से घटकों का एक संग्रह है। जब हम बूटस्ट्रैप के आधार पर किसी वेबसाइट का कोड लिखते हैं पहली चीज़ जो हमें करने की ज़रूरत है वह है ब्राउज़र को बताना कि उन्हें कहाँ ढूँढना है।

बूटस्ट्रैप प्राप्त करने के लिए दो विकल्प हैं। सबसे पहले इसे से डाउनलोड करना है वेबसाइट और इसे प्रोजेक्ट फाइलों में जोड़ें और दूसरा प्रोजेक्ट के सर्वर से लिंक डालना है. इसे कुछ पैकेज प्रबंधकों का उपयोग करके भी डाउनलोड किया जा सकता है (मेरा मतलब है कि वे विभिन्न प्रोग्रामिंग भाषाओं द्वारा उपयोग किए जाते हैं, न कि वितरण द्वारा उपयोग किए जाने वाले) लेकिन, हम इसे दस्तावेज़ीकरण पर छोड़ देंगे।

ध्यान रहे कि यदि आप स्थानीय रूप से बूटस्ट्रैप फ़ाइलों के साथ काम करना पसंद करते हैं, तो आपको उन्हें सर्वर पर अपलोड करना होगा बाकी वेबसाइट के साथ। यदि आप प्रोजेक्ट के सीडीएन सर्वर से लिंक करते हैं, तो यह आवश्यक नहीं होगा।

यदि आप बूटस्ट्रैप पैकेज डाउनलोड करते हैं तो आप देखेंगे कि दो फ़ोल्डर और फाइलों की एक श्रृंखला है। हम केवल दो में रुचि रखते हैं। जे एस फ़ोल्डर से बूटस्ट्रैप.बंडल.जे.एस और सीएसएस फ़ोल्डर से बूटस्ट्रैप.सी.एस.एस.

दोनों विकल्पों के लिए कोड लगभग समान है। बस स्थान पथ बदलें।

आइए एक उदाहरण देखें
स्थानीय रूप से बूटस्ट्रैप का उपयोग करना

बूटस्ट्रैप स्थानीय रूप से संग्रहीत

बूटस्ट्रैप घटकों को स्थानीय रूप से कॉल करना

सीडीएन परियोजना से उपयोग करना

CDN से बूटस्ट्रैप का उपयोग करना

HTML कोड जो एक CDN से बूटस्ट्रैप घटकों को लोड करता है

स्थानीय फ़ाइल का स्थान मनमाना है। मैंने उन्हें बूट्रप नामक फ़ोल्डर के अंदर रखा और जेएस और सीएसएस नामक दो सबफ़ोल्डर बनाए।

यदि आप शेष कोड को नहीं समझ पाए हैं तो चिंता न करें। हम अगले लेख में इसका ध्यान रखेंगे।

नोट

लेख प्रकाशित करने के बाद मैंने पाया कि हमारा सामग्री प्रबंधक HTML कोड नहीं बल्कि परिणाम दिखाता है। मैं जीथब या इसी तरह के उदाहरणों को अपलोड करूंगा और मैं यहां स्क्रीनशॉट डालूंगा।


अपनी टिप्पणी दर्ज करें

आपका ईमेल पता प्रकाशित नहीं किया जाएगा। आवश्यक फ़ील्ड के साथ चिह्नित कर रहे हैं *

*

*

  1. डेटा के लिए जिम्मेदार: एबी इंटरनेट नेटवर्क 2008 SL
  2. डेटा का उद्देश्य: नियंत्रण स्पैम, टिप्पणी प्रबंधन।
  3. वैधता: आपकी सहमति
  4. डेटा का संचार: डेटा को कानूनी बाध्यता को छोड़कर तीसरे पक्ष को संचार नहीं किया जाएगा।
  5. डेटा संग्रहण: ऑकेंटस नेटवर्क्स (EU) द्वारा होस्ट किया गया डेटाबेस
  6. अधिकार: किसी भी समय आप अपनी जानकारी को सीमित, पुनर्प्राप्त और हटा सकते हैं।

  1.   धनी कहा

    यह मेरे लिए बहुत उन्नत है, लेकिन ट्यूटोरियल की बहुत सराहना की जाती है, किसी दिन यह मेरी मदद कर सकता है, धन्यवाद

    1.    जॉर्ज कहा

      हैलो अमीर। यह बहुत उन्नत लगता है, लेकिन यह नहीं है (कम से कम व्यावहारिक उद्देश्यों के लिए नहीं)। आपके पास बस कुछ स्पष्ट अवधारणाएं होनी चाहिए: वेब सर्वर, सीडीएन, कोड संपादक, वेब पेज की मूल संरचना और कुछ और।

      मैं एक वेब डेवलपर हूं और मैं आपको बता सकता हूं कि बूटस्ट्रैप एक शानदार शुरुआत है। इसे वेब विकास में शुरू होने वाले किसी भी व्यक्ति द्वारा सीखा जाना चाहिए।

      टिप्पणी। बूटस्ट्रैप से शुरू करने से पहले आपको एचटीएमएल सीएसएस का बुनियादी ज्ञान होना चाहिए ;-)

  2.   क्लाउडियो सेगोविआ कहा

    सीडीएन सर्वर क्या है? स्थानीय रूप के विपरीत?

    1.    डिएगो जर्मन गोंजालेज कहा

      सटीक।
      स्वयं वेब पर आवश्यक फ़ाइलें रखने के बजाय, बूटस्ट्रैप का ही उपयोग किया जाता है।