बूटस्ट्रैप 4: 7 चरणों के साथ एक चिकना और सरल वेबसाइट कैसे बनाएं?

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:20

इस निर्देश का उद्देश्य प्रोग्रामिंग से परिचित लोगों को देना है - HTML या अन्यथा - बूटस्ट्रैप 4 के साथ एक ऑनलाइन पोर्टफोलियो बनाने का एक सरल परिचय। मैं आपको वेबसाइट के प्रारंभिक सेटअप के बारे में बताऊंगा, कुछ अलग सामग्री ब्लॉक कैसे बनाएं, और कुछ समस्याएं जिनका आप सामना कर सकते हैं।

पोर्टफोलियो को कई छोटे चरणों में विभाजित किया गया है ताकि इसे और अधिक प्रबंधनीय बनाया जा सके: एचटीएमएल फ्रेम, सीएसएस फ्रेम, जावास्क्रिप्ट फ्रेम, नेविगेशन बार, और होमपेज (सामग्री ब्लॉक के साथ)।

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

नोट: यह मार्गदर्शिका संपूर्ण नहीं है और इसे HTML, CSS, या Javascript में प्रोग्राम करना सीखने के विकल्प के रूप में उपयोग नहीं किया जाना चाहिए।

स्रोतों की आवश्यकता

• बूटस्ट्रैप 4
• jQuery 3.3.1

वैकल्पिक संसाधन

• FontAwesome
• गूगल फ़ॉन्ट्स
• हाइलाइट.जेएस

यदि आप पूर्ण उदाहरण पर जाना चाहते हैं या रिपॉजिटरी पर एक नज़र डालना चाहते हैं:

• पूरा उदाहरण
• कोष

नोट: मैं अपने उदाहरणों के लिए चित्रों में उदात्त का उपयोग करूंगा यदि आप उसी पाठ संपादक के साथ अनुसरण करना चाहते हैं।

चरण 1: सेट अप करना

फ़ोल्डर सेटअप

1. कहीं एक फ़ोल्डर बनाएँ जहाँ आप वह सब कुछ संग्रहीत कर सकें जिसे हम डाउनलोड करने जा रहे हैं। यह पोर्टफोलियो के लिए आपकी रूट डायरेक्टरी होगी।
2. "बूटस्ट्रैप" नाम के अंदर एक फोल्डर बनाएं
3. अपने रूट पोर्टफोलियो फ़ोल्डर के अंदर एक और फ़ोल्डर बनाएं जिसका नाम "jquery" है

पोर्टफोलियो फ़ोल्डर

|----- बूटस्ट्रैप |----- jquery

बूटस्ट्रैप 4

1. उनकी वेबसाइट पर जाएं और "संकलित सीएसएस और जेएस" अनुभाग के नीचे "डाउनलोड" बटन पर क्लिक करें।
2. अपने "डाउनलोड" फ़ोल्डर या किसी अन्य सुविधाजनक स्थान पर.zip फ़ाइल सहेजें।
3. ज़िप फ़ाइल खोलें और "सीएसएस" और "जेएस" फ़ोल्डरों को "बूटस्ट्रैप" फ़ोल्डर में निकालें जो आपने पहले बनाया था।

jQuery

1. उनकी वेबसाइट पर जाएं और "असम्पीडित, विकास jQuery 3.3.1" डाउनलोड करें
2. उस फ़ाइल को आपके द्वारा पहले बनाए गए "jquery" फ़ोल्डर के अंदर सहेजें।

जब हम वास्तविक पोर्टफोलियो पर काम करना शुरू करते हैं तो सभी ढांचे अब तैयार हैं।

चरण 2: HTML फ़्रेम (index.html)

आपका नाम

यह फ्रेम कुछ भी अधिक जटिल नहीं है, लेकिन मैं सेटअप के सामान्य उद्देश्यों की व्याख्या करना चाहता हूं।

JQuery के बाद बूटस्ट्रैप JS

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

FontAwesome

यदि आपने कोई वेब विकास किया है, तो संभावना है कि आप जानते हैं कि FontAwesome क्या है। हालांकि अगर ऐसा नहीं है, तो यह एक आइकन सेट है जिसमें अतिरिक्त अनुकूलन के लिए टूलकिट शामिल है। यह अविश्वसनीय रूप से उपयोगी है यदि आप मेरे जैसे हैं और आपके पास बिल्कुल कोई कलात्मक प्रतिभा नहीं है।

हाईलाइट.जेएस

यह ढांचा वेब पेजों पर डायनामिक कोड हाइलाइटिंग की अनुमति देता है। यदि आप केवल सामान्य प्रोग्रामिंग भाषाओं का उपयोग करते हैं, तो आप इसे मेरे द्वारा उपयोग किए जाने वाले बाकी ढांचे की तरह आयात कर सकते हैं, लेकिन भाषाओं का एक कस्टम सेट डाउनलोड करने का विकल्प भी है। मैंने कुछ मैक्रोइंग और आईएनआई भाषाओं के कारण बाद वाला विकल्प चुना, लेकिन यह पूरी तरह आप पर निर्भर है।

नोट: उन स्थानों से अवगत रहें जहां मैं दो आइकन और हाइलाइट.जेएस जैसी फ़ाइलों के लिए हार्ड-कोडेड लिंक का उपयोग करता हूं। इसके अलावा, चूंकि केवल बूटस्ट्रैप और jQuery की आवश्यकता है, किसी भी अन्य ढांचे को जोड़ने या हटाने के लिए स्वतंत्र महसूस करें। यदि आप किसी को हटाते हैं, तो बाद में संगत कोड की पंक्तियों को हटाना याद रखें।

चरण 3: CSS फ़्रेम (style.css)

/* *उम्मीद है कि bg रंग को धूसर करने के लिए और फ़ॉन्ट शैली को बदलने से वेबसाइट का उपभोग करना आसान हो जाता है */body {पृष्ठभूमि: ग्रे; फ़ॉन्ट-फ़ैमिली: 'ओपन सेन्स', सेन्स-सेरिफ़; }

/*

* यह सुनिश्चित करता है कि एनएवी बार सब कुछ के ऊपर है */ एनएवी { z-index: 9999; }

/*

* यह पैराग्राफ टेक्स्ट को अधिक पठनीय बनाना चाहिए */ p {font-size: 18px; मार्जिन-टॉप: 5px; मार्जिन-बॉटम: 5px; }

/*

* यह सुनिश्चित करता है कि मेरे सभी कोड ब्लॉक सही तरीके से फॉर्मेट किए गए हैं */ कोड { टेक्स्ट-एलाइन: लेफ्ट; }

/*

* मैं नहीं चाहता कि सूचियों में बुलेट हों */ li {सूची-शैली-प्रकार: कोई नहीं; }

/*

* लिंक डिफ़ॉल्ट रूप से नीले होते हैं, और मैं चाहता हूं कि वे बूटस्ट्रैप की शैली के अनुरूप हों */ li a, a{ color: white; }

/*

* मैं एक वर्ग टैग को एक div से जोड़ता हूं जिसमें यह सुनिश्चित करने के लिए कि सामग्री ओवरलैप नहीं है */.navFix {padding-bottom: 70px; }

/*

* बढ़ा हुआ आकार नेवबार को बढ़ाता है */.सोशल-मीडिया {फ़ॉन्ट-आकार: 1.3em; }

/*

* ड्रॉपडाउन लिंक के लिए डिफ़ॉल्ट हाइलाइट रंग सफेद है */.ड्रॉपडाउन-मेनू ए: होवर {पृष्ठभूमि-रंग: #212529; }

/*

* पीडीएफ को एक निश्चित ऊंचाई तक दिखाने वाले फोर्स डिव्स */.pdfFill {ऊंचाई: 45rem; }

/*

* बटन और कोड ब्लॉक के बीच कुछ अंतर जोड़ें */.codeStyle { पैडिंग-टॉप: 30px; }

मैंने इस फ्रेम में सामग्री-आधारित सीएसएस तत्वों को शामिल किया है ताकि आपको कुछ समय बाद सहेजने का प्रयास किया जा सके। वे सभी बहुत ही सरल हैं और ज्यादातर जीवन की गुणवत्ता में बदलाव हैं जो पाठकों के लिए पोर्टफोलियो के साथ बातचीत को आसान बनाते हैं।

एनएवी जेड-इंडेक्स

मेरे पास वेब विकास का बहुत सीमित अनुभव है, इसलिए मुझे यकीन नहीं है कि बूटस्ट्रैप के नेविगेशन बार को लागू करते समय यह एक आम समस्या है, लेकिन बिना किसी फ्रंट-टू-बैक ओरिएंटेशन विनिर्देश के, नेविगेशन बार वास्तव में अन्य सामग्री के तहत दिखाई देगा जैसे बूटस्ट्रैप के कार्ड। यह बंधनेवाला नावबार के साथ सबसे अधिक ध्यान देने योग्य है, लेकिन मैंने सुरक्षा के लिए वैसे भी सूचकांक परिवर्तन को शामिल किया है।

कोड संरेखण

चूंकि मैं आम तौर पर तत्वों को संरेखित करने के लिए बूटस्ट्रैप के "औचित्य-सामग्री-केंद्र" और "पाठ-केंद्र" वर्गों का उपयोग करता हूं, मैं नहीं चाहता कि मेरा कोड उस केंद्र-संरेखित प्रकृति को प्राप्त करे। यह किसी भी संरेखण परिवर्तन को ओवरराइट करके और कोड टैग को बाएं-संरेखित करके आसानी से तय किया जाता है: यह कोड में टैब-स्पेसिंग को सुरक्षित रखता है।

नेवीफिक्स पैडिंग

जब बूटस्ट्रैप का नेविगेशन बार पृष्ठ के शीर्ष पर अटक जाता है तो सामग्री उसके नीचे लोड हो जाएगी। मेरा मानना है कि ऐसा इसलिए होता है क्योंकि नेवबार वास्तव में पेज के बजाय व्यूपोर्ट के शीर्ष पर अटका हुआ है। भले ही यह नेवबार और बाकी सामग्री के बीच की जगह को बढ़ाकर तय किया गया हो।

पीडीएफ ऊंचाई

पीडीएफ फाइलों की डिफ़ॉल्ट ऊंचाई अविश्वसनीय रूप से छोटी है। यह अनिवार्य रूप से अपठनीय है, इसलिए मैंने कोशिश करने के लिए ऊंचाई बदल दी और एक समय में लगभग एक पृष्ठ के लिए पर्याप्त जगह दी।

चरण 4: जावास्क्रिप्ट फ़्रेम (javascript.js)

/* * यह 'टॉगल' वर्ग के साथ किसी भी तत्व की खोज करता है और या तो इसे छुपाता है या छुपाता है */ फंक्शन टॉगलसेक्शन (आईडी, टॉगलआईडी) {if (document.getElementById(id)) { var divID = document.getElementById(id); var divArray = document.getElementsByClassName(toggleID);

के लिए (var i = 0; i < divArray.length; i++) {divArray.style.display = "none"; }

divID.style.display = "ब्लॉक";

}

विवरण झूठा है;

}

/*

* कोड जिसे एक निश्चित क्रम में चलाने की आवश्यकता है */ $(दस्तावेज़)। तैयार (फ़ंक्शन() {/* * फाइलों से सामग्री में लोड करें */

/*

* डेटा में लोड करने के लिए थोड़ी देरी को बाध्य करें */ सेटटाइमआउट (फ़ंक्शन() {/* * */ $('प्री कोड') में लोड किए गए सभी कोड को हाइलाइट करें। प्रत्येक (फ़ंक्शन (i, ब्लॉक) { hljs.highlightBlock (ब्लॉक);});}, 1000); });

इस पोर्टफोलियो को संशोधित और प्रबंधित करना आसान बनाने के लिए, मैंने एक-पृष्ठ प्रारूप का उपयोग करने का निर्णय लिया। यह अधिकांश भाग के लिए सब कुछ स्थानीय रखता है और सामग्री को तेजी से लोड करता है।

टॉगलसेक्शन

मैंने कक्षा मूल्यों का उपयोग यह प्रबंधित करने के लिए किया कि किस सामग्री को दिखाने या छिपाने की आवश्यकता है क्योंकि अधिकांश समय मैं कई तत्वों को एक साथ अलग करने और समूहित करने के लिए divs का उपयोग कर रहा हूं। आप इसका उपयोग अलग-अलग बटनों को एक साथ समूहबद्ध करने के लिए भी कर सकते हैं, लेकिन "ब्लॉक" डिस्प्ले को सेट करने से पहले इसे एक अतिरिक्त जांच की आवश्यकता होती है ताकि कोई सामग्री न दिखाई जा सके।

दस्तावेज़ लोड हो रहा है

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

$('#mq2-intro').load("files/tutorials/mq2/mq2-intro/content.html");

यह एक उदाहरण है कि हम सामग्री में कैसे लोड करेंगे।

चरण 5: नेविगेशन बार

आद्याक्षर

• घर
• मेरे बारे में
• परियोजना ट्यूटोरियल
• मुझसे संपर्क करो

• पोर्टफोलियो में हर चीज में से नेविगेशन बार सबसे जटिल तत्व है। कक्षाओं का सरासर संयोजन इसे एक पहेली की तरह बनाता है जिसके लिए आपको नियम पुस्तिका को लगातार देखने की आवश्यकता होती है।

  बूटस्ट्रैप कार्यक्षमता

  बूटस्ट्रैप अनिवार्य रूप से विभिन्न वर्ग मूल्यों के माध्यम से कार्य करता है। "नौसेना" तत्व को देखते हुए, प्रत्येक वर्ग के उद्देश्य का पता लगाना बहुत मुश्किल नहीं है:

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

  ब्रांड

  ब्रांड विशिष्ट लोगो और नाम है जिसे आप ऊपर बाईं ओर प्रत्येक वेबसाइट पर देखते हैं। यह एक आजमाया हुआ डिज़ाइन तत्व है जिसकी इस बिंदु पर प्रत्येक उपयोगकर्ता अपेक्षा करता है।

  नोट: "i" टैग वास्तव में FontAwesome आइकन हैं, और आपको ये टैग किसी भी आइकन के पेज से मिलते हैं।

  टॉगलर/छोटा जा सकने वाला बटन (मोबाइल)

  यह बटन केवल मोबाइल उपकरणों पर दिखाई देता है। लेकिन चूंकि हमने "एनएवी" घोषणा में शामिल किया था कि नेविगेशन बार को विस्तार योग्य बनाने की आवश्यकता है, इसलिए ये तत्व अपनी आईडी और "डेटा-टॉगल" पहचानकर्ताओं के माध्यम से एक दूसरे से जुड़ते हैं।

  नेवबार लिंक (बाईं ओर)

  ये लिंक पूरी तरह से इस बात पर निर्भर करते हैं कि आपको अपने पोर्टफोलियो के लिए किन श्रेणियों की आवश्यकता है। मैंने शुरुआती बिंदु के रूप में कुछ विशिष्ट उदाहरण शामिल किए, लेकिन कोई भी समान नहीं है। आपको "ट्यूटोरियल" अनुभाग की आवश्यकता नहीं हो सकती है क्योंकि आप कला मूर्तियों को गढ़ने पर ध्यान केंद्रित करते हैं। प्रत्येक "ली" आइटम को कॉपी और पेस्ट किया जा सकता है, इसलिए एक बार जब आपको पता चल जाए कि आपको क्या चाहिए, तो नेविगेशन को सेट करना आसान है।

  नोट: आप अन्य ड्रॉपडाउन मेनू में तकनीकी रूप से ड्रॉपडाउन मेनू बना सकते हैं, लेकिन मैं इसकी अनुशंसा तब तक नहीं करूंगा जब तक कि आप इंटरफ़ेस को साफ-सुथरा बनाने के लिए और अधिक CSS और Javascript जोड़ने के इच्छुक नहीं हैं।

  नेवबार लिंक्स (दाईं ओर)

  लिंक की सही सूची "एमएल-ऑटो" वर्ग देकर, बूटस्ट्रैप समान रूप से दो सूचियों को समान रूप से अलग करता है। यह स्वच्छ बाएँ और दाएँ पक्ष विभाजन बनाता है। मैंने इस स्थान का उपयोग सोशल मीडिया लिंक के लिए करने का निर्णय लिया क्योंकि यह आपकी उपस्थिति बढ़ाने का एक बहुत ही सामान्य और लोकप्रिय तरीका है। यदि यह प्रासंगिक नहीं है, तो आप इन लिंक्स को खोज बार, लॉगिन जानकारी आदि के लिए स्क्रैप कर सकते हैं। लेकिन बस याद रखें कि यह उपयोग करने के लिए महत्वपूर्ण स्थान है। और बाईं ओर नेवबार लिंक के समान, आप इन्हें भी कॉपी और पेस्ट कर सकते हैं।

  नोट: यदि आप उन लिंक का उपयोग करने की योजना बना रहे हैं जो मेरे पास पहले से हैं, तो "उपयोगकर्ता नाम" को वास्तविक "href" लिंक में स्वयं बदलें।

  चरण 6: होमपेज

  

  

  

  आपका नाम

  प्रोग्रामर राइटर गेमर

  यह अनुभाग, और आपकी सामग्री के बाद के पृष्ठ इस बात पर निर्भर करेंगे कि आप अपने पोर्टफोलियो में क्या रखना चाहते हैं। मैं स्पष्ट रूप से हर एक सामग्री प्रकार को संबोधित नहीं कर सकता, लेकिन मैंने छवियों, पीडीएफ़, वीडियो, कोड ब्लॉक, कुछ विशिष्ट समावेशन को शामिल करने का प्रयास किया।

  तालिका प्रारूप

  होमपेज को टेबल की तरह काम करने के लिए सेट किया गया है। मैं आपका अंतिम उत्पाद बनाने के लिए अपने अद्भुत डिजाइन कौशल पर भरोसा नहीं करूंगा, लेकिन मैंने यह दिखाने के लिए पंक्ति और स्तंभ संयोजनों के विभिन्न रूपों को जोड़ा कि यह बहुत गतिशील और लचीला है। आप बाईं ओर बटन और दाईं ओर सामग्री रखने के लिए 3 पंक्तियाँ और 2 कॉलम बना सकते हैं, या आप कुछ पूरी तरह से अलग कर सकते हैं। इसमें बस थोड़ा सा प्रयोग होता है।

  बटन

  ये कार्य अनिवार्य रूप से नियमित बटनों की तरह करते हैं। यहां एकमात्र वास्तविक बूटस्ट्रैप एकीकरण बाकी थीम के साथ मेल खाने के लिए स्टाइल से उपजा है। अन्यथा, अपनी सामग्री दिखाने के लिए जितने चाहें उतने या छोटे बटन बनाएं और फिर सुनिश्चित करें कि href लिंक को divs के लिए आईडी के साथ मिलाना है।

  प्रोग्रामिंग कोड सामग्री

  "कोड" टैग डिफ़ॉल्ट टैग हैं जो हाइलाइट.जेएस सभी हाइलाइटिंग को प्रबंधित करने के लिए उपयोग करता है। यदि आपको Javascript.js फ़ाइल से याद है, तो अन्य फ़ाइलों से सामग्री लोड करने के लिए एक अनुभाग है।

  $('#home-programmer-macro').load("files/home/watchLoot.mac");

  • इसका पहला भाग उस तत्व की "आईडी" की तलाश करता है जिसमें आप सामग्री सम्मिलित करना चाहते हैं।
  • दूसरा भाग उस फ़ाइल का स्थान है जिसमें आप लोड करना चाहते हैं।

  नोट: सामग्री वास्तव में पूरी तरह से लोड नहीं होगी क्योंकि एक अच्छा मौका है कि आप इस वेब पेज को सर्वर के बजाय स्थानीय रूप से संपादित कर रहे हैं। इसे कई अलग-अलग तरीकों से संबोधित किया जा सकता है, जिसे मैं इंस्ट्रक्शनल के अंत में संबोधित करूंगा।

  यूट्यूब वीडियो

  एम्बेडेड "iframe" वास्तव में YouTube से ही आता है। मैं उन्हें विस्तृत रूप से नहीं बताऊंगा कि उन्हें कैसे प्राप्त किया जाए, लेकिन जब आप किसी वीडियो को "साझा" करने के लिए जाते हैं, तो एक "एम्बेड" विकल्प होता है जो वेब पेज पर अपना वीडियो दिखाने के लिए आवश्यक कोड उत्पन्न करने में आपकी सहायता करेगा।

  चरण 7: आगे देख रहे हैं

  इस बात की बहुत अच्छी संभावना है कि मैंने कुछ तत्व या सामग्री प्रकार को कवर नहीं किया है जिसे आप अपनी वेबसाइट में शामिल करना चाहते हैं। शुक्र है कि आपके लिए अगले कदम खुद उठाने के लिए कई अच्छे विकल्प हैं।

  बूटस्ट्रैप का दस्तावेज़ीकरण

  बूटस्ट्रैप का दस्तावेज़ीकरण शुरू करने के लिए एक बढ़िया जगह है यदि आप ऐसे तत्वों की तलाश कर रहे हैं जो पूर्व-प्रोग्राम किए गए हैं और ऐसे उदाहरण हैं जिन्हें आप प्रयोग करने के लिए अपने पोर्टफोलियो में कॉपी और पेस्ट कर सकते हैं। मैंने कार्ड, हिंडोला या फ़ॉर्म को नहीं छुआ। मैं अत्यधिक अनुशंसा करता हूं कि आप विकल्पों को देखने के लिए "घटक" अनुभाग देखें।

  W3स्कूल

  W3Schools एक अद्भुत वेबसाइट है जहाँ आप वेब प्रोग्रामिंग और विकास से संबंधित किसी भी चीज़ के बारे में सीख सकते हैं। वे मुझसे कहीं अधिक स्मार्ट हैं, और वे लगभग हर HTML, CSS और जावास्क्रिप्ट कार्यक्षमता को कवर करते हैं जिसके बारे में आप सोच सकते हैं।

  अपने पोर्टफोलियो की मेजबानी

  यह निर्देशयोग्य आपको सिखाता है कि अपनी वेबसाइट को कुछ अलग-अलग प्लेटफार्मों पर कैसे होस्ट किया जाए। यदि आप लोगों, भर्ती करने वालों आदि को अपना पोर्टफोलियो दिखाने में सक्षम होना चाहते हैं तो आपको ये कदम उठाने होंगे।

  प्रयोग करें और मज़े करें

  एक बढ़िया पोर्टफोलियो बनाने का एकमात्र तरीका यह है कि आप कुछ भी प्रयोग करके और दिलचस्प लगने वाली हर चीज का प्रयोग करके देखें। कई फैंसी डिज़ाइन पोर्टफोलियो और वेबसाइट महान संक्रमण प्रभाव या गतिशील पृष्ठभूमि का उपयोग करते हैं, लेकिन उनमें से कोई भी पूर्व-निर्मित नहीं होता है।