बूटस्ट्रैप ट्यूटोरियल


बूटस्ट्रैप 4 ट्यूटोरियल


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

बूटस्ट्रैप के साथ, आप मानक HTML से जटिल वेब पृष्ठों को जोड़ सकते हैं और उन्हें अपनी आवश्यकताओं के अनुसार अनुकूलित कर सकते हैं। बूटस्ट्रैप भी कई jQuery प्लगइन्स के साथ आता है जो हिंडोला, बटन, टूलटिप्स जैसी अतिरिक्त कार्यक्षमता प्रदान कर सकते हैं।.

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

पी.एस. बूटस्ट्रैप पूर्ण शुरुआती के लिए एक सही विकल्प नहीं है। कुछ HTML और CSS ज्ञान मददगार होंगे। वैकल्पिक रूप से, आप वेबसाइट बनाने के लिए वेबसाइट बिल्डरों या वर्डप्रेस का उपयोग कर सकते हैं.

बूटस्ट्रैप (सामग्री की तालिका) का उपयोग करके वेबसाइट कैसे बनाएं:

  1. चरण 1: सेटअप और अवलोकन करें
    1. एक HTML पेज बनाएं
    2. CDN के माध्यम से बूटस्ट्रैप लोड करें या इसे स्थानीय रूप से होस्ट करें
    3. JQuery को शामिल करें
    4. लोड बूटस्ट्रैप जावास्क्रिप्ट
    5. इसे एक साथ रखें
  2. चरण 2: अपना लैंडिंग पृष्ठ डिज़ाइन करें
    1. एक नेविगेशन पट्टी जोड़ें
    2. कस्टम CSS शामिल करें
    3. पेज कंटेंट कंटेनर बनाएं
    4. पृष्ठभूमि छवि और कस्टम जावास्क्रिप्ट जोड़ें
    5. एक ओवरले जोड़ें
    6. एक पृष्ठ शीर्षक और निकाय पाठ शामिल करें
    7. CTA बटन बनाएं
    8. तीन-स्तंभ अनुभाग सेट करें
    9. एक संपर्क फ़ॉर्म जोड़ें
    10. एक दो-स्तंभ पाद बनाएँ
    11. मीडिया क्वेरी जोड़ें
    12. अपनी वेबसाइट लाइव करें

बूटस्ट्रैप का उपयोग करके वेबसाइट बनाने का कुल समय: 3-4 घंटे.
कौशल स्तर: शुरुआत इंटरमीडिएट तक

Contents

चरण 1: सेटअप और अवलोकन


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

1. एक HTML पेज बनाएं

पहले चरण के रूप में, हम आधार के रूप में एक साधारण HTML टेम्पलेट बनाएंगे, जहाँ हम बूटस्ट्रैप का उपयोग करेंगे। उसके लिए, पहली चीज जो आप करना चाहते हैं वह प्रोजेक्ट फ़ाइलों के लिए आपके कंप्यूटर या सर्वर पर एक फ़ोल्डर बनाना है। इस मामले में, मैं बस इसे कॉल करूंगा बूटस्ट्रैप. यहां, एक नई टेक्स्ट फ़ाइल बनाएं और उसे कॉल करें index.html. इसे अपनी पसंद के टेक्स्ट एडिटर के साथ खोलें (उदा. नोटपैड++) और उसके बाद नीचे दिए गए कोड को पेस्ट करें.





बूटस्ट्रैप ट्यूटोरियल नमूना पृष्ठ








आगे बढ़ने से पहले अपनी फ़ाइल को सहेजना न भूलें!

2 ए। सीडीएन के माध्यम से बूटस्ट्रैप लोड करें

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

अपने पेज में बूटस्ट्रैप पाने के लिए, बस नीचे दिए गए कोड को पेस्ट करें आपके टेम्पलेट का अनुभाग.

जब आप फ़ाइल को सहेजते हैं, तो इसे खोलने वाला कोई भी ब्राउज़र स्वतः बूटस्ट्रैप परिसंपत्तियों को लोड कर देगा.

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

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

2 बी। होस्ट बूटस्ट्रैप स्थानीय रूप से

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

एक बार जब आप ऐसा कर लेते हैं, तो फ़ाइल को अनज़िप करें और उसकी सामग्री को उसी निर्देशिका में कॉपी करें index.html. उसके बाद, आप बूटस्ट्रैप सीएसएस को अपनी परियोजना में इस तरह लोड कर सकते हैं:

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

3. jQuery को शामिल करें

बूटस्ट्रैप की पूर्ण कार्यक्षमता प्राप्त करने के लिए, आपको jQuery लाइब्रेरी को लोड करने की भी आवश्यकता है। यहां, आपको इसे दूरस्थ रूप से लोड करने या स्थानीय रूप से होस्ट करने की संभावना है.

पहले मामले में, आपको jQuery के नवीनतम संस्करण का लिंक मिल जाता है यहाँ. आप इसे अपने पृष्ठ में लाइब्रेरी को लोड करने के लिए उपयोग कर सकते हैं, जहां यह कहता है, ठीक नीचे से पहले कोड की लाइन डालकर तुम्हारे पन्ने पर.

वैकल्पिक रूप से, डाउनलोड (राइट-क्लिक> लिंक इस रूप में सेव करें…), अनज़िप करें, और इसे प्रोजेक्ट फ़ोल्डर में डालें। फिर, इसे अपनी फ़ाइल के रूप में उसी स्थान पर शामिल करें:

फिर से, सुनिश्चित करें कि पथ आपके सेटअप से मेल खाता है.

4. लोड बूटस्ट्रैप जावास्क्रिप्ट

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

आप इसे इस तरह से दूर से कॉल कर सकते हैं:

या स्थानीय रूप से ऐसा:

5. यह सब एक साथ रखें

यदि आपने ऊपर दिए गए चरणों का सही ढंग से पालन किया है, तो आपको दूरस्थ समाधान के लिए इस तरह दिखने वाली फ़ाइल के साथ समाप्त होना चाहिए:

   बूटस्ट्रैप ट्यूटोरियल नमूना पृष्ठ         

वैकल्पिक रूप से, यदि आप स्थानीय स्तर पर मेजबानी कर रहे हैं, तो आपके पृष्ठ टेम्पलेट को नीचे दिए गए कोड जैसा होना चाहिए:

   बूटस्ट्रैप ट्यूटोरियल नमूना पृष्ठ         

यदि आपके पास ऐसा है और आपने अपना काम बचा लिया है, तो आप अब अगले चरण पर जाने के लिए तैयार हैं.

चरण 2: अपना लैंडिंग पृष्ठ डिज़ाइन करें


ठीक है, यह माना जाता था कि, बहुत सारी तैयारी का काम। हालाँकि, यह बहुत कठिन नहीं था, क्या यह था? साथ ही, अब मज़ा शुरू होता है.

फिलहाल, जब आप अपनी नमूना साइट पर जाते हैं, तो आपको बस एक खाली पृष्ठ देखना चाहिए। उसको बदलने का समय.

1. एक नेविगेशन बार जोड़ें

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

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

हम इसका उपयोग नीचे की तरह करेंगे और इसे नीचे की तरह ही पोस्ट करेंगे टैग:

 प्रतीक चिन्ह   

कोड की कुछ व्याख्या:

  • नेवबार-विस्तार-md – यह इंगित करता है कि किस बिंदु पर नेविगेशन बार ऊर्ध्वाधर या हैमबर्गर आइकन से पूर्ण आकार के क्षैतिज बार तक फैलता है। इस मामले में, हमने इसे मध्यम स्क्रीन पर सेट किया है, जो कि बूटस्ट्रैप में, 768px से अधिक कुछ भी है.
  • नेवबार-ब्रांड – यह आपकी वेबसाइट ब्रांडिंग के लिए उपयोग किया जाता है। आप यहां एक लोगो छवि फ़ाइल भी शामिल कर सकते हैं.
  • नेवबार-Toggler – ध्वस्त मेनू के लिए टॉगल बटन को दर्शाता है। टुकड़ा डेटा-टॉगल = "पतन" परिभाषित करता है कि यह हैमबर्गर मेनू में बदल जाएगा, ड्रॉप-डाउन करने के लिए नहीं, जो अन्य विकल्प है। यह महत्वपूर्ण है कि आप परिभाषित करें डेटा-लक्ष्य एक सीएसएस आईडी के साथ (द्वारा परिभाषित) #) और एक लपेटो div वास्तविक नाम के समान नाम के साथ नेवबार तत्त्व.
  • नेवबार-Toggler आइकन – जैसा कि आप शायद अनुमान लगा सकते हैं, यह आइकन उपयोगकर्ताओं को छोटे स्क्रीन पर मेनू खोलने के लिए क्लिक करता है.
  • नेवबार-एनएवी – के लिए वर्ग
      सूची तत्व जो मेनू आइटम रखता है। उत्तरार्द्ध के साथ निरूपित किया जाता है नव-आइटम तथा नव-लिंक.

    मैं इसे इतना क्यों समझा रहा हूं?

    क्योंकि वह बूटस्ट्रैप की बात है। आपके पास ये सभी मानक हैं जो आपको कुछ HTML और CSS कक्षाओं के साथ जल्दी से तत्व बनाने की अनुमति देते हैं। स्टाइल प्रदान करने के लिए आपको कोई सीएसएस नहीं लिखना होगा, सब कुछ पहले से ही बूटस्ट्रैप के भीतर स्थापित है। इसके अलावा, सब कुछ मोबाइल उत्तरदायी बॉक्स से बाहर है! क्या आप यह देखना शुरू कर रहे हैं कि यह कितना मददगार है?

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

    बूटस्ट्रैप ट्यूटोरियल नेविगेशन बार को जोड़ता है

    ऐसा इसलिए है क्योंकि इसमें बहुत अधिक स्टाइल नहीं है। जबकि आप जोड़ पा रहे हैं डिफ़ॉल्ट रंग (उदाहरण के लिए, नेवबर को एक वर्ग की तरह देकर बीजी-डार्क नवबार-डार्क), हम इसके बजाय अपने खुद को जोड़ना चाहते हैं.

    2. कस्टम CSS शामिल करें

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

    उसके लिए, बस अपने टेक्स्ट एडिटर के साथ एक खाली फाइल बनाएं और उसे कॉल करें main.css. इसे सहेजें, फिर इसे अपने बूटस्ट्रैप साइट के मुख्य भाग में इस तरह जोड़ें:

    यह एक स्टाइल शीट के लिए कोड है जो मुख्य निर्देशिका में रहता है। यदि आप अपने अंदर जगह तय करते हैं सीएसएस फ़ोल्डर, लिंक में सही पथ शामिल करना सुनिश्चित करें.

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

    तन { गद्दी: 0; मार्जिन: 0; पृष्ठभूमि: # f2f6e9; } /*--- नेविगेशन बार ---*/ .नबार { पृष्ठभूमि: # 6ab446; } .नव-लिंक, .नेवबर-ब्रांड { रंग: #fff; कर्सर: सूचक; } .नव-कड़ी { मार्जिन-राइट: 1em! महत्वपूर्ण; } .नव-लिंक: होवर { रंग: # 000; } .नवबार-पतन { औचित्य-सामग्री: फ्लेक्स-एंड; }

    और यहाँ परिणाम है:

    बूटस्ट्रैप ट्यूटोरियल स्टाइल नेविगेशन बार

    पहले से बेहतर लग रहा है, यह नहीं है?

    3. एक पेज कंटेंट कंटेनर बनाएं

    नेविगेशन बार के बाद, अगली चीज़ जो आप चाहते हैं वह पृष्ठ सामग्री के लिए एक कंटेनर है। यह बूटस्ट्रैप में वास्तव में आसान है क्योंकि आपको इसके लिए इसकी आवश्यकता है, यह नावबार टैग के नीचे है:

    ध्यान दें कंटेनर-द्रव कक्षा। यह उन डिफ़ॉल्ट बूटस्ट्रैप कक्षाओं में से एक है। इसे लागू करना div तत्व स्वचालित रूप से सीएसएस का एक गुच्छा उस पर लागू होता है.

    -तरल भाग सुनिश्चित करता है कि कंटेनर स्क्रीन की पूरी चौड़ाई में फैला है। वहाँ भी सिर्फ एक पात्र, जिसने इस पर लागू चौड़ाई तय की है, इसलिए स्क्रीन के दोनों तरफ हमेशा जगह होगी.

    हालाँकि, यदि आप अब पृष्ठ पुनः लोड करते हैं, तब भी आपको कुछ भी दिखाई नहीं देगा (जब तक कि आप डेवलपर टूल का उपयोग न करें)। ऐसा इसलिए है क्योंकि आपने केवल एक खाली HTML तत्व बनाया है। यह अब बदलना शुरू हो जाएगा.

    4. एक पृष्ठभूमि छवि और कस्टम जावास्क्रिप्ट जोड़ें

    इस बूटस्ट्रैप ट्यूटोरियल में अगले चरण के रूप में, हम अपने लैंडिंग पृष्ठ हेडर के लिए एक पूर्ण-स्क्रीन पृष्ठभूमि छवि शामिल करना चाहते हैं। उसके लिए, हमें स्क्रीन पर सभी तरह से छवि खिंचाव बनाने के लिए कुछ jQuery का उपयोग करना होगा.

    आप उसी तरह से करते हैं जिसमें आप कस्टम CSS शामिल करते हैं। सबसे पहले, नाम की एक टेक्स्ट फ़ाइल बनाएं main.js और इसे अपने साइट फ़ोल्डर के अंदर रखें। फिर, समापन से पहले इसे कॉल करें अंदर टैग करें index.html.

    उसके बाद, आप कोड के इस टुकड़े को कॉपी और पेस्ट कर सकते हैं

    संपूर्ण स्क्रीन पर तत्व खिंचाव:
    $ (Document) .ready (function () { $ ( '। हैडर') ऊंचाई ($ (विंडो) .height ())। })

    फिर, केवल एक चीज जो बाईं ओर है वह एक पृष्ठभूमि छवि सेट करना है। ऐसा आप अंदर ही अंदर कर सकते हैं main.css:

    .हेडर { पृष्ठभूमि-छवि: url ('छवियां / हेडर-पृष्ठभूमि.jpg'); पृष्ठभूमि का आकार: कवर; पृष्ठभूमि-स्थिति: केंद्र; स्थिति: रिश्तेदार; }

    यदि आप ऊपर दिए गए पथ द्वारा निर्दिष्ट स्थान पर पर्याप्त आकार की एक छवि रखते हैं, तो आप इसके समान परिणाम प्राप्त करेंगे:

    बूटस्ट्रैप ट्यूटोरियल में हेडर बैकग्राउंड इमेज शामिल है

    5. एक ओवरले जोड़ें

    पृष्ठभूमि की छवि को अतिरिक्त स्टाइलिश बनाने के लिए, हम एक ओवरले भी जोड़ेंगे। उसके लिए, आप अपने द्वारा पहले शामिल किए गए एक और div तत्व बनाएँगे.

    फिर, आप अपनी कस्टम CSS फ़ाइल में निम्नलिखित जोड़ सकते हैं:

    .ओवरले { स्थिति: निरपेक्ष; न्यूनतम ऊंचाई: 100%; न्यूनतम-चौड़ाई: 100%; बायां: 0; शीर्ष: 0; पृष्ठभूमि: आरजीबीए (0, 0, 0, 0.6); }

    यह आपके द्वारा पहले किए गए चित्र के लिए यह अच्छा ओवरले बनाएगा:

    बूटस्ट्रैप ट्यूटोरियल ओवरले को जोड़ता है

    6. एक पृष्ठ शीर्षक और बॉडी टेक्स्ट शामिल करें

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

    उन बनाने के लिए, बस ओवरले के नीचे, अंतिम चरण में आपके द्वारा सेट कंटेनर के अंदर इस स्निपेट को जोड़ें:

    लैंडिंग पेज पर आपका स्वागत है!

    लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। क्विसक इंटरड्यूम क्वम ओडियो, क्विस प्लज़ेरैट एन्टे लिक्टस यूरोप। सेड अलिकेत डोलर आईडी सपियन रटरम, आईडी वल्गुलेट क्वम इयुकुलिस। सस्पेंडिस कंटेक्टुर मील आईडी लिबरो फ्रिंजिला, फेराट्रा सेम ऑलकोरकोरपर में.

    उसके बाद, निम्न मार्कअप को इसमें जोड़ें main.css.

    .विवरण { बाएं: 50%; स्थिति: निरपेक्ष; शीर्ष: 45%; रूपांतर: अनुवाद (-50%, -55%); पाठ-संरेखित करें: केंद्र; } .वर्णन h1 { रंग: # 6ab446; } .विवरण पी { रंग: #fff; फ़ॉन्ट-आकार: 1.3rem; लाइन-ऊंचाई: 1.5; }

    जब आप करते हैं, तो लैंडिंग पृष्ठ अब इस तरह दिखता है:

    बूटस्ट्रैप ट्यूटोरियल पेज शीर्षक और विवरण जोड़ें

    यह वास्तव में एक साथ शुरू हो रहा है, यह नहीं है?

    7. CTA बटन बनाएं

    कोई भी लैंडिंग पेज कॉल के बिना कार्रवाई के लिए पूरा नहीं होता है, अक्सर बटन के रूप में। इस कारण से, हम इस बूटस्ट्रैप ट्यूटोरियल में एक बनाने के लिए शामिल नहीं करने के लिए एमिस होंगे.

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

    उस के अलावा, मैं इस सीएसएस जोड़ने के लिए main.css:

    .विवरण बटन { बॉर्डर: 1px ठोस # 6ab446; पृष्ठभूमि: # 6ab446; सीमा-त्रिज्या: 0; रंग: #fff; } .विवरण बटन: होवर { बॉर्डर: 1px ठोस #fff; पृष्ठभूमि: #fff; रंग: # 000; }

    सहेजने और पुनः लोड करने के बाद, यह इस तरह दिखता है:

    बूटस्ट्रैप ट्यूटोरियल एक्शन बटन पर कॉल जोड़ें

    8. एक तीन-स्तंभ अनुभाग सेट करें

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

    लोरम ipsum

    लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। क्विसक इंटरड्यूम क्वम ओडियो, क्विस प्लज़ेरैट एन्टे लिक्टस यूरोप। सेड अलिकेत डोलर आईडी सपियन रटरम, आईडी वल्गुलेट क्वम इयुकुलिस.

    लोरम ipsum

    लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। क्विसक इंटरड्यूम क्वम ओडियो, क्विस प्लज़ेरैट एन्टे लिक्टस यूरोप। सेड अलिकेत डोलर आईडी सपियन रटरम, आईडी वल्गुलेट क्वम इयुकुलिस.

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

    स्तंभों के लिए, उनके पास सभी वर्ग हैं: कॉल-एलजी -4, कॉल-MD-4 तथा कॉल-SM-12. ये दर्शाते हैं कि हम स्तंभों के साथ काम कर रहे हैं और उनके आकार अलग-अलग स्क्रीन पर होंगे.

    इसे समझने के लिए, आपको यह जानने की जरूरत है कि बूटस्ट्रैप ग्रिड में, एक पंक्ति में सभी कॉलम हमेशा संख्या 12 तक जुड़ते हैं। इसलिए, उन्हें ऊपर की कक्षाओं को देने का मतलब है कि वे बड़े और मध्यम स्तर पर स्क्रीन का एक तिहाई हिस्सा लेंगे। स्क्रीन (12 से 3 से विभाजित 4 है) लेकिन छोटे उपकरणों पर पूरी स्क्रीन (12 में से 12 कॉलम).

    यह समझ में आता है, यह नहीं है?

    आप यह भी देखेंगे कि मैंने चित्र शामिल किए हैं और जोड़ा है .छवि तरल पदार्थ उन्हें कक्षा। यह उन्हें उत्तरदायी बनाने के लिए है ताकि वे स्क्रीन के साथ-साथ उस पैमाने को मापें जिस पर पृष्ठ को देखा जाता है.

    इसके अतिरिक्त, आपके पास सामान्य स्थान में शामिल निम्नलिखित स्टाइल है:

    .विशेषताएं { मार्जिन: 4em ऑटो; गद्दी: 1em; स्थिति: रिश्तेदार; } .सुविधा-शीर्षक { रंग: # 333; फ़ॉन्ट-आकार: 1.3rem; फ़ॉन्ट-वजन: 700; मार्जिन-बॉटम: 20 पीएक्स; पाठ-परिवर्तन: अपरकेस; } .सुविधाएँ img { -webkit-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow: 1px 1px 4px rgba (0, 0, 0, 0.4); बॉक्स-छाया: 1px 1px 4px rgba (0, 0, 0, 0.4); मार्जिन-बॉटम: 16 पीएक्स; }

    जब मुख्य सामग्री के नीचे जोड़ा और बचाया, यह इस तरह दिखता है:

    बूटस्ट्रैप ट्यूटोरियल तीन कॉलम सेक्शन को जोड़ता है

    9. एक संपर्क फ़ॉर्म जोड़ें

    आप देखेंगे कि नया फ़ील्ड अभी भी खाली है। यह उद्देश्य पर था क्योंकि हम इसमें संपर्क फ़ॉर्म जोड़ना चाहते हैं। आगंतुकों को संपर्क में लाने के लिए लैंडिंग पृष्ठों के लिए यह एक बहुत ही सामान्य अभ्यास है.

    बूटस्ट्रैप में संपर्क फ़ॉर्म बनाना काफी आसान है:

    संपर्क में रहो!

    अब तक, मुझे कॉलम बनाने के लिए मार्कअप की व्याख्या नहीं करनी चाहिए। यहाँ बाकी मार्कअप का मतलब है:

    • फार्म समूह – स्वरूपण के लिए फार्म फ़ील्ड के चारों ओर लपेटने के लिए उपयोग किया जाता है.
    • प्रपत्र नियंत्रण – इनपुट, टेक्स्ट क्षेत्र आदि जैसे फ़ील्ड्स को अस्वीकृत करता है.

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

    .सुविधाएँ .फॉर्म-कंट्रोल, .इनपुट्स { सीमा-त्रिज्या: 0; } .सुविधाएँ .btn { पृष्ठभूमि-रंग: # 589b37; बॉर्डर: 1px ठोस # 589b37; रंग: #fff; मार्जिन-टॉप: 20 पीएक्स; } .सुविधाएँ .btn: होवर { पृष्ठभूमि-रंग: # 333; बॉर्डर: 1px ठोस # 333; }

    जब आप ऐसा करते हैं, तो आपको एक फॉर्म मिलता है:

    बूटस्ट्रैप ट्यूटोरियल में संपर्क फ़ॉर्म शामिल है

    10. एक दो-स्तंभ पाद बनाएँ

    ठीक है, अब हम बूटस्ट्रैप ट्यूटोरियल के अंत की ओर बढ़ रहे हैं। अंतिम चीज जिसे आप अपने लैंडिंग पृष्ठ में जोड़ना चाहते हैं, वह दो स्तंभों वाला एक पाद लेख है। अब तक, यह आपके लिए किसी भी समस्या का अधिक हिस्सा नहीं है.

    अतिरिक्त जानकारी

    लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। क्विसक इंटरड्यूम क्वम ओडियो, क्विस प्लज़ेरैट एन्टे लिक्टस यूरोप। सेड अलिकेत डोलर आईडी सपियन रटरम, आईडी वल्गुलेट क्वम इयुकुलिस.

    लॉरेम इप्सम डोलर अमेट, कंसेटेटुर एडिपिसिंग एलीट। क्विसक इंटरड्यूम क्वम ओडियो, क्विस प्लज़ेरैट एन्टे लिक्टस यूरोप। सेड अलिकेत डोलर आईडी सपियन रटरम, आईडी वल्गुलेट क्वम इयुकुलिस.

    संपर्क करें

    1640 रिवरसाइड ड्राइव, हिल वैली, कैलिफोर्निया
    [ईमेल संरक्षित]
    + 01 234 567 88
    + 01 234 567 89

    सामान्य ग्रिड मार्कअप के अलावा, यह खंड बूटस्ट्रैप के साथ टाइपोग्राफी को संशोधित करने की कुछ संभावनाओं पर प्रकाश डालता है:

    • पाठ अपरकेस
    • फोंट की मोटाई: बोल्ड
    • पाठ-केंद्र

    यह उन वर्गों के नामों से बहुत स्पष्ट होना चाहिए जो वे करते हैं। आप बूटस्ट्रैप और टाइपोग्राफी के बारे में अधिक जानकारी पा सकते हैं यहाँ.

    उपरोक्त के अलावा, आप इस तरह से स्टाइल का उपयोग कर सकते हैं:

    .पेज फ़ुटर { पृष्ठभूमि-रंग: # 222; रंग: #ccc; गद्दी: 60 पीएक्स 0 30 पीएक्स; } .पाद लेख-कॉपीराइट { रंग: # 666; गद्दी: 40 पीएक्स 0; }

    यह एक सुंदर पाद लेख का परिणाम है जो ऐसा दिखता है:

    बूटस्ट्रैप ट्यूटोरियल में पेज पाद शामिल है

    11. मीडिया प्रश्न जोड़ें

    पेज अब मूल रूप से तैयार है। यह भी पूरी तरह से जिम्मेदार है। हालाँकि, ब्राउज़र के मोबाइल दृश्य में, ऊपरी भाग अभी तक बिल्कुल नहीं निकला है.

    मोबाइल डिज़ाइन पर बूटस्ट्रैप ट्यूटोरियल एरर

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

    परिणामस्वरूप, उपरोक्त समस्या को ठीक करने के लिए, आप बस इस तरह कोड का एक टुकड़ा शामिल कर सकते हैं:

    @मीडिया (अधिकतम-चौड़ाई: 575.98px) { .विवरण { बायां: 0; गद्दी: 0 15px; स्थिति: निरपेक्ष; शीर्ष 10%; परिवर्तन: कोई नहीं; पाठ-संरेखित करें: केंद्र; } .वर्णन h1 { फ़ॉन्ट-आकार: 2em; } .विवरण पी { फ़ॉन्ट-आकार: 1.2rem; } .विशेषताएं { मार्जिन: 0; } }

    उसके बाद, सब कुछ जैसा है वैसा होना चाहिए:

    बूटस्ट्रैप ट्यूटोरियल मीडिया क्वेरी जोड़ें

    12. अपनी वेबसाइट को एक वेब होस्ट पर अपलोड करें

    यदि आप साथ चल रहे हैं, तो आपको अब एक तैयार वेबसाइट के साथ सेट होना चाहिए जो मोबाइल पर भी है और पूरी तरह उत्तरदायी है.

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

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

    FTP के माध्यम से सर्वर पर बूटस्ट्रैप वेबसाइट अपलोड करें

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

    हालाँकि, एक बार यह हो जाने के बाद, जब आप अपने डोमेन तक पहुँचते हैं, तो आपको अपनी ब्राउज़र विंडो में तैयार साइट को देखने में सक्षम होना चाहिए.

    बूटस्ट्रैप ट्यूटोरियल ने लैंडिंग पृष्ठ समाप्त कर दिया

    कोड की कुछ पंक्तियों के लिए बुरा नहीं, सही?

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

    निष्कर्ष

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

    जैसा कि आपने शुरुआती के लिए इस बूटस्ट्रैप ट्यूटोरियल में देखा है, इसे केवल HTML, CSS और कुछ वैकल्पिक jQuery के बुनियादी ज्ञान की आवश्यकता है। वर्डप्रेस का उपयोग करते समय उतना आरामदायक नहीं है, एक वेबसाइट बनाने के लिए बूटस्ट्रैप अभी भी एक वैध विकल्प है.

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

    बेशक, सीखने के लिए और भी बहुत कुछ है.

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

    अपडेट: हमने शुरुआती .pdf और .png संस्करणों के लिए बूटस्ट्रैप धोखा शीट भी बनाई.

    क्या आपके पास ऊपर बूटस्ट्रैप ट्यूटोरियल पर कोई विचार है? प्रश्न, टिप्पणियाँ, अनुरोध? नीचे टिप्पणी अनुभाग में हमें बताएं!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map