या पोस्टमध्ये आम्ही बूटस्ट्रॅपसह साइट बनवून सुरुवात करू, ओपन सोर्स फ्रेमवर्क जे आम्हाला प्रतिसाद देणारे बनवणे आणि काही संवादात्मकता प्रदान करणे सोपे करते. आम्ही आधी शिफारस केलेल्या डेव्हलपमेंट एन्व्हायर्नमेंट प्लगइनद्वारे आपोआप व्युत्पन्न केलेले हे मूलभूत टेम्पलेट आहे आणि आम्हाला त्यात सुधारणा करावी लागेल.
मध्ये मागील लेख तुम्हाला VS कोडियम स्थापित करण्यासाठी, त्याचा वापरकर्ता इंटरफेस स्पॅनिशमध्ये अनुवादित करण्यासाठी आणि बूटस्ट्रॅप प्लगइन स्थापित करण्यासाठी सूचना सापडतील.
दोन गोष्टी लक्षात ठेवाव्यात:
- आम्ही वापरत असलेल्या कमांड्स कीबोर्ड शॉर्टकट आहेत, तुम्हाला ते टाइप करावे लागतील. कॉपी/पेस्ट काम करत नाही.
- आमचा सामग्री व्यवस्थापक मला HTML कोड प्रदर्शित करण्याची परवानगी देत नाही म्हणून मला स्क्रीनशॉट वापरावे लागतील. जेणेकरून मी अपलोड केलेल्या उदाहरणांच्या कोडमध्ये तुम्हाला प्रवेश मिळेल GitHub ला.
गिटहब रेपॉजिटरी क्लोन कसे करावे
महानांना आपल्या बाकीच्यांपासून वेगळे करते ते समस्यांवर त्यांची प्रतिक्रिया. रिचर्ड स्टॉलमनला त्याचा प्रिंटर ड्रायव्हर आवडला नाही आणि ते त्याला ते बदलू देत नसल्यामुळे त्यांनी फ्री सॉफ्टवेअर चळवळ सुरू केली. लिनस टोरवाल्ड्सला कोणत्याही कोड शेअरिंग प्लॅटफॉर्मवर विश्वास बसला नाही आणि त्याने स्वतःचे तयार केले. git
पारंपारिक सॉफ्टवेअर वितरण प्रणालीच्या विपरीत ज्यामध्ये केवळ वापरकर्ता परस्परसंवाद डाउनलोड करण्याची परवानगी आहे, Git सह आपण कालांतराने प्रकल्पाच्या उत्क्रांतीचे अनुसरण करू शकता. इतर लोक रेपॉजिटरी क्लोन करू शकतात, सुधारणा करू शकतात आणि मूळ प्रकल्पाच्या विकासकांनी ते समाविष्ट करण्याचा प्रस्ताव देऊ शकतात. स्वीकारल्यास, विकसक फायली डाउनलोड आणि पुन्हा-अपलोड न करता सहजपणे करू शकतात.
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 च्या शेवटी क्लिक करू आणि Javascript लायब्ररीची लिंक टाकू.
तुम्हाला कोड समजत नसेल तर काळजी करू नका. प्रत्येक ओळीचे कार्य मी पुढील लेखात स्पष्ट करेन.