इस पाठ में हम एक काल्पनिक स्टार्टअप के लिए एक लैंडिंग पृष्ठ बनाने के लिए बूटस्ट्रैप का उपयोग करने के लिए जा रहे हैं में वापस स्वागत है।
हमारे स्टार्टअप परफेक्ट मैच कहा जाता है।
बहुत अजीब बात है।
मैं जानता हूँ कि यह एक मानव बिल्ली के समान डेटिंग app है और मैं व्याख्या करने के लिए क्या मानव बिल्ली के समान डेटिंग यह अपेक्षाकृत अहानिकर यह सिर्फ अकेला मनुष्यों के साथ शेल्ड्रिक बिल्लियों मिलान कुछ और हो सकता हो सकता है हो सकता है के लिए आप इसे छोड़ देंगे।
मुझे नहीं पता।
साइट की एक त्वरित दौरा कर रही द्वारा शुरू हो जाओ और उसे करने के लिए लिखें।
मैं वास्तव में सिर्फ कुछ सुविधाओं की ओर इशारा करते हुए मतलब है।
वहाँ बहुत यहाँ नहीं है।
हम वास्तव में इस कांटे की शकल यह अभी तक कुछ भी नहीं है नहीं है।
तो यह वास्तव में सिर्फ HD mounseers रों है, लेकिन वह सब है कि हम अब तक कवर किया गया है।
इसलिए हम पर्याप्त incontact लंबाई के बारे में हमारे आदर्श मैच घर है।
वे वास्तव में कहीं भी जाने के लिए साइन अप और दो छोटे माउस को वहाँ दाईं ओर हम उसे हैमबर्गर मिल पर लॉग ऑन करें नहीं है।
मैं उस पर क्लिक कर सकते हैं।
उन कड़ियों के सभी अब है कि हैमबर्गर के अंदर हैं।
तो फिर हम एक बड़ी पृष्ठभूमि छवि है कि केन्द्रित रहता है और यह पूरी पृष्ठभूमि शामिल किया गया है।
तो बीच में हम हमारा साथ हमारी शुरुआत को परिपूर्ण मैच के नाम पर है और फिर हम अपने शीर्षक डेटिंग app पर केवल मानव फ़ीड है।
और फिर हम एक छोटी सी एच आर यहाँ क्षैतिज नियम और फिर एक बटन एक आइकन के साथ आरंभ करने के लिए है।
और मैं यह है कि यह बीच में सब रहता हटना और यह भी एक छोटा सा ऊपर ले जाता है इतना है कि हम जहां पाठ पृष्ठ के नीचे आधे रास्ते में शुरू होता है अपने मोबाइल डिवाइस पर अजीब लेआउट के कुछ प्रकार की जरूरत नहीं है के रूप में।
इसलिए हम इसे एक सा कदम है और यह केन्द्रित रहता है।
यह करने के लिए वास्तव में आसान और बूटस्ट्रैप लेआउट लेकिन यह लैंडिंग पृष्ठ के लिए अपेक्षाकृत प्रभावी है।
सब है कि हम एक ही स्तंभ पूरी चौड़ाई तक ले जाता है।
तो इस स्तंभ भर में 12 इकाइयों चला जाता है।
हम भर में सिर्फ एक स्तंभ अप करने के लिए इसे विभाजित कर रहे हैं और नहीं किसी भी वर्गों में 12 इकाइयों और फिर हम उस स्तंभ के अंदर सब कुछ केंद्र।
तो चलो शुरू हो जाओ।
पहली बात तो हम क्या करने की जरूरत है एक फ़ाइल बनाने के लिए है।
मैं DML में से एक कहा जाता सूचकांक है।
मैं अपने नियमित बॉयलरप्लेट परिपूर्ण मैच में इस जोड़ देंगे और फिर बूटस्ट्रैप में जोड़कर शुरू करते हैं और मैं एक समन्वय Bitstrips समन्वय इस्तेमाल करेंगे।
यहाँ एसएस और जावास्क्रिप्ट बाहर करते हैं।
हम टास्कबार के लिए है कि जावास्क्रिप्ट की आवश्यकता होगी।
इसलिए हम टैग लिंक करने की जरूरत है।
तो फिर हम जावास्क्रिप्ट मिलता है।
उस की नकल करें।
यह नीचे जो एक स्क्रिप्ट टैग है पर नीचे रख दिया और फिर हम स्रोत के लिए आप कर रहे हैं कि बराबर निर्धारित किया है।
अब अगर हम इस को खोलने के ठीक ऊपर खुला सांत्वना हम एक छोटी सी समस्या है जो यह है कि हम बूटस्ट्रैप जावास्क्रिप्ट के लिए जे क्वेरी के रूप में अच्छी तरह से आदेश की जरूरत है।
नव पट्टी सबक से वापस याद है हम जे की आवश्यकता की जरूरत
क्यूरे।
तो हम उस के लिए एक समन्वय मिलेगा।
हम संशोधित संस्करण करूँगा।
कि यूआरएल को कॉपी करें।
और अंत में हम यहाँ वापस जाने के लिए और हम ऐसा करने से पहले जावास्क्रिप्ट को bootstrap से जुड़ा हुआ है।
अन्यथा यह अभी तो यह पहली बार क्वेरी को लोड करने की जरूरत है आपकी क्वेरी के बारे में पता नहीं होगा।
अब चलो फिर से कोशिश करते हैं।
आग ताज़ा।
ठीक है हम कुछ भी एक अच्छा संकेत है कि क्योंकि हम किसी भी त्रुटि नहीं दिख रहा है देख नहीं है।
के बीच में पाठ के साथ शुरू करते हैं।
यह सब यहाँ सामग्री।
इसलिए हम एक कंटेनर बनाने की जरूरत है और फिर कंटेनर के अंदर हम div वर्ग ECOs कंटेनर के लिए एक पंक्ति जरूरत है और फिर हम हमेशा उस पंक्ति की जरूरत अंदर वहाँ से हम एक और div है।
जब भी हम ग्रिड प्रणाली हमारे div कि स्तंभ पानी का छींटा बड़े 12 के बराबर वर्ग होने जा रहा है प्रयोग कर रहे हैं और उसके बाद।
और वह है कि कंटेनर भर में सभी तरह अवधि जाएगा।
और फिर अंदर अगर वे एक H1 कि सिर्फ सही मैच कहते हैं और बचत होगी लिए जा रहे हैं।
और हम यह है कि ताज़ा पर छोड़ दें।
और यह सच नहीं है कि हम क्या चाहते हैं और अभी तक कि कुछ बातें हम क्या करने की जरूरत है, क्योंकि वहाँ है।
पहला यह है कि हम उस कॉलम में सब कुछ केंद्र की जरूरत है।
तो अगर हम निरीक्षण क्या हम यहाँ के साथ काम कर रहे हैं आप देख सकते हैं कि एच 1 भर में सभी तरह से चला जाता है और हम सिर्फ इतना है कि के अंदर यह केंद्र के लिए की जरूरत है।
और दूसरी है कि हम थोड़ा इसे नीचे धक्का की जरूरत है।
हम कुछ padding या मार्जिन जोड़ने के लिए इतना है कि हमारे पेज के शीर्ष करने के लिए सही नहीं जाना है की जरूरत है।
की सामग्री के बाकी हिस्सों में जोड़कर शुरू करते हैं।
इसलिए हम भी केवल मानव बिल्ली के समान डेटिंग app है और कहा कि सिर्फ एक एच 3 होगा और हम वास्तव में उस के साथ किसी भी तत्व है कि हम चाहते हो सकता है निभा सकता है, लेकिन मैं इसे एक एच 3 केवल मानव पानी का छींटा बिल्ली के समान डेटिंग एप्लिकेशन कर दूँगा।
और फिर हम कि क्षैतिज नियम जो बहुत पसंद नहीं लगेगा में जोड़ सकते हैं, लेकिन हम इस तथ्य के बाद यह शैली करेंगे और फिर हम भी उस बटन पर कक्षा में एक बटन में जोड़ देंगे।
हम एक नज़र रखना।
यह एक बूटस्ट्रैप बटन डिफ़ॉल्ट है और यह एक बटन बड़ी है।
चलिये वापस चलते हैं।
इसलिए हम बड़े के लिए PTEN और फिर रंग डिफ़ॉल्ट और तो एलजी के बीच आकार की जरूरत है और यहाँ हम सिर्फ पाठ इस प्रकार है जो आरंभ जोड़ने के लिए और बचाने के लिए क्या हम साथ खत्म होता देख दूँगा।
ठीक है।
इसलिए हम अपने सामग्री अब अगले लेकिन केंद्र ग्रिड के अंदर है।
और फिर हम गद्दी और यह नीचे जाने पर ध्यान केंद्रित करेंगे।
लेकिन इस ग्रिड के अंदर केंद्र के साथ शुरू करने के लिए और कहा कि यह एक div सभी के अंदर इतना है कि हम व्यक्तिगत रूप से प्रत्येक बात केंद्र के लिए की जरूरत नहीं है आसान मैं समूह के लिए जा रहा हूँ बनाने के लिए।
हम एच -1 केंद्र के लिए है और फिर तीन और फिर बटन नहीं बल्कि हम कर सकते हैं एक div में समूह और सिर्फ केंद्र है कि एक लाइन के साथ div।
के एक div बनाते हैं और मैं इसे Cantet की एक आईडी दे देंगे और उसके बाद हम वहाँ के अंदर सब कुछ डाल देता हूँ।
तो एच -1 आयु 3 एचआर और बटन ठीक से मांगपत्र और बचत होगी।
अगर मैं पृष्ठ ताज़ा तो कुछ भी नहीं अलग लग रही है इससे पहले कि हम यह है कि हमारे शैली पत्रक में जोड़ दें करना चाहिए।
तो मैं एक लिंक टैग जोड़ा है और मैं अपनी शैली पत्रक एप्लिकेशन को फोन करता हूँ।
एसएस यह अभी तक मौजूद नहीं है।
तो मैं इसे इसे बचाने की जरूरत है।
मैं एक ही निर्देशिका में एसएस देखें।
और हम सब कुछ ज लोगों बैंगनी कर रहे हैं जैसे सरल के साथ शुरू करते हैं।
सिर्फ यकीन है कि यह ठीक से काम करता है बनाने के लिए।
चलो वापस ताज़ा जाना।
एंड्रयू एक बैंगनी एच -1 मिलता है।
महान।
तो अब चयन कि डेव हम सामग्री के विचार के साथ जोड़ा गया है और यह केंद्र करते हैं।
तो यह है कि से छुटकारा पाने के लिए और हम एक आईडी सामग्री की जरूरत है और ऐसा करने के लिए छोड़ते हुए पाठ संरेखित केंद्र है।
चलिये वापस चलते हैं।
हम वहाँ चलें।
इतनी बातें सेंटर अब के लिए गठबंधन कर रहे हैं।
अगले हम इस पेज के नीचे नीचे धक्का होगा एक सा 25 प्रतिशत गद्दी 25 प्रतिशत के बराबर के साथ सटीक होना चाहिए।
यहाँ तो हम गद्दी शीर्ष 25 प्रतिशत कर देंगे।
और नहीं बल्कि यह पिक्सल के एक कठिन नंबर दे अगर हम इसे एक प्रतिशत यह थोड़ा और अधिक संवेदनशील है के रूप में रखने की तुलना में।
तो यह है कि सही केंद्र में है।
और फिर हम के रूप में 25 प्रतिशत परिवर्तन स्क्रीन आकार।
महान।
अब की पृष्ठभूमि छवि में जोड़ दें।
तो छवि है कि मैं उपयोग कर रहा हूँ आराध्य बिल्ली और मानव बातचीत यहाँ पर जा रहा स्पलैश वेब साइट है जो मैं पिछले वीडियो जहां हम बूटस्ट्रैप छवि ग्रिड बनाया में पेश किया पर इस से है।
और वे वास्तव में महान उच्च गुणवत्ता के चित्र है कि आप किसी भी मुद्दे के बिना उपयोग कर सकते हैं के सभी प्रकार है।
और एक कि मैं का उपयोग यहीं मैं भी उस विवरण में बिल्ली लिंक के लिए खोज है।
यहाँ इस छवि के आप एरो सिर्फ सही छवि आप कर रहे हैं l कॉपी पर क्लिक करें।
अब चलो वापस जाना है और मैं एक पृष्ठभूमि छवि के रूप में शरीर में जोड़ने के लिए जा रहा हूँ।
तो पृष्ठभूमि और फिर इसे एक यूआरएल जो यह है कि विशाल तुम ठीक कह रहे हैं आज।
और अगर हम यह यह इस स्तर पर फार्म है उस पर छोड़ दें या ताज़ा हम एक विशाल पृष्ठभूमि छवि को पाने के लिए और सभी हम बता सकते हैं कि यह नाखूनों के लिए स्टार्टअप के कुछ प्रकार है।
इसलिए हम इसे आकार करने के लिए और है कि हम पृष्ठभूमि आकार और परिवर्तन है कि नए सिरे से कवर किया जा करने के लिए इस्तेमाल करने की ज़रूरत है।
फिर हम करीब हो रही है।
यह जबकि अभी भी पूरी चौड़ाई और स्क्रीन की ऊंचाई को कवर करने के लिए संभव के रूप में छोटे रूप में छवि बनाना होगा।
तो यह पहलू अनुपात बदल नहीं होगा यह किसी भी तरह की छवि तिरछा नहीं होगा, लेकिन यह दोनों दिशाओं में के रूप में ज्यादा के रूप में यह करने की जरूरत है खिंचाव जाएगा।
लेकिन कम से कम राशि है कि यह करने की जरूरत है हमारे स्क्रीन पर फिट करने के लिए और यह अभी भी सही नहीं है।
और क्या हम क्या करना चाहते हैं यह के आकार को बदल लेकिन स्थिति को बदल नहीं है।
हम यह पृष्ठभूमि स्थिति केंद्र केंद्र लेकिन बचाने के लिए है कि हम करीब हो जा रहे हैं।
लेकिन यह अभी भी एक परिपूर्ण मैच के रूप में दूर के रूप में छवि चला जाता है नहीं है।
और उन परिवर्तनों को बाद में आएगा।
अभी के लिए मैं नव पट्टी में जोड़ने पर ध्यान केंद्रित करने और मैं इस से पहले उल्लेख किया है कि जब आप Boucek डॉक्स में जाने के लिए और घटकों के लिए जाने के लिए और क्या करना चाहते हैं।
मैं हमेशा इस अगर मैं एक बूटस्ट्रैप नव पट्टी में जोड़ रहा हूँ नहीं है।
यह सिर्फ बहुत अधिक सामान अन्यथा याद करने के लिए है।
और मैं बस यहाँ इस अधिकार की नकल।
शुरू करने के लिए पूरे एनएवी ले जाओगे यहाँ हमारे app करने के लिए वापस जाने के लिए और सिर्फ यह सही शीर्ष पर डाल दिया।
यह निश्चित रूप से NAF कि हम चाहते नहीं है बल्कि यह टुकड़े कि हम ताज़ा करने के लिए चाहते हैं।
यह काफी करीब है।
तो वहाँ कुछ परिवर्तन हम बनाना चाहते है।
पहला और सबसे आसान है कि एक समाधान पर हमारे सामग्री एक कंटेनर में तो यह किनारों के लिए सभी तरह से जाना नहीं है, जैसे कि यह यहाँ करता है।
इसलिए हम वापस और इनसेट जाने या हम सिर्फ इस div वर्ग कंटेनर होना करने के लिए बदल रहे हैं और अगर हम वापस जाने के लिए अब आप देख सकते हैं कि हम अब कुछ रिक्ति जैसे हम समाधान पर यहाँ पर क्या करना है क्योंकि हम जानते हैं कि कंटेनर में जोड़ा जा सकता है।
अब चलो Nev के वास्तविक सामग्री पर काम करने के लिए मिलता है ..
तो सबसे आसान बात ब्रांड है जो अभी सिर्फ ब्रांड का कहना है कि यहाँ वापस इस लाइन वर्ग Neth बार ब्रांड के बराबर होती है और हम निश्चित प्रति मैच के लिए इसे बदलने के लिए और बचा लेंगे बदलने के लिए है।
कोशिश करके देखो।
ठीक अच्छा।
अब हम इस फार्म से छुटकारा मिलता है।
हम सभी को इस जरूरत नहीं है।
इसलिए हमारे फार्म सभी यहीं शुरू होता है।
कि पूरी बात ताज़ा से छुटकारा।
चलो यह भी लटकती से छुटकारा मिलता है।
तुम्हें पता है कि जरूरत नहीं है।
तो यह है कि यहीं से शुरू होता है।
यह झूठ है कि समाप्त होता है वहाँ फिर से ताजा कर रहे हैं।
अब हम एक कड़ी है।
इसलिए हम इन दोनों लिंक जो साइन अप करें और यह लॉग इन होना चाहिए रहे हैं के साथ शुरू करेंगे।
इसलिए हम चाहते हैं कि एक बदलने के लिए साइन अप करने के लिए किया जा सकता है और फिर यह नकली है कि यहीं इस कड़ी है।
बस के अंदर एक लंगर टैग के साथ एक सहयोगी।
और इस एक में लॉग इन किया जाएगा।
चलो पता करते हैं।
महान।
तो माउस के अंत में आ जाएगा।
हम दो लिंक है।
अब हम यहाँ तीन लिंक की जरूरत है।
हम पहले से ही उनमें से दो लोगों की है और हम उस लटकती से छुटकारा मिल जाएगा।
तो हम संपर्क में के बारे में घर की जरूरत है।
तो एक है कि लटकती जो यहीं है पता लगाने।
कक्षा लटकती बराबर होती है।
चलो यह से छुटकारा मिलता है और अब अकबर की एक बहुत सरल कर रहे हैं।
अब हम दो अलग अलग लंबाई की है।
हम वास्तव में उन दोनों से छुटकारा पाने के लिए और इसे सिरे से कोशिश करूँगा।
इसलिए हम एक लंगर टैग के साथ एक सहयोगी में जोड़ देंगे और कहा कि तीन बार तो हम क्या करेंगे।
यह पहली बार एक घर कहना चाहिए।
अगले एक के बारे में है।
और पिछले एक संपर्क है।
चलो पता करते हैं।
हम वहाँ जाते हैं तीन लंबाई हैं।
एक छोटी सी बात है।
होम सक्रिय है और एक बूटस्ट्रैप वास्तव में आसान है कि माना जाता है।
हम सभी वर्ग को जोड़ने करना है कि सहयोगी नहीं लंगर टैग लेकिन माता पिता के सहयोगी को सक्रिय बराबर होती है और अब हम घर सक्रिय लिंक होने के साथ खत्म होता है।
महान।
ठीक है तो यह है कि हमारे नव पट्टी है और अगर हम आकार आप देखेंगे कि हम पहले से ही बस ठीक काम कर रहा है इस हैमबर्गर है।
हम एक समस्या है जो कि हमारी पृष्ठभूमि छवि गड़बड़ है की क्या ज़रूरत है।
हम सिर्फ एक छोटा सा में कवर करेंगे कि लेकिन हम Hamberger ठीक काम कर रहा है।
सब कुछ अच्छा लग रहा है।
अब के फ़ॉन्ट को संबोधित इसलिए फ़ॉन्ट कि मैं यहाँ पर इस्तेमाल किया लेडो L.A है चलो ..
यह तो मैं गूगल फोंट में जाना और लेडो के लिए देख लेंगे गूगल फोंट से है।
ला टी-ओ हर संग्रह के लिए जाना।
हम इसका इस्तेमाल करता है, तो यह सामान्य और बोल्ड मिल जाएगा।
इसके अलावा हम अपने एच -1 बोल्ड होना चाहते हैं।
ठीक है।
और फिर हम ठीक उसके आवेदन में इस कड़ी जोड़ देंगे।
टॉप अप अब यहाँ बचाने का आकलन हम सब कुछ करने के लिए है कि फ़ॉन्ट लागू करने के लिए जा रहे हैं क्षुधा दर्ज करें।
इसलिए मैं शरीर फ़ॉन्ट परिवार के अंदर का चयन करने के लिए जा रहा हूँ लेडो और चलो यकीन है कि इसे सही ढंग से लोड हो रहा है चलो।
हम क्या ताज़ा है देखें।
और हमारे सामने बदलता है यह देखने के लिए क्योंकि पाठ अंधेरा है लेकिन बदल तुम भी यहाँ NFR पर देख सकते हैं मुश्किल है।
यह बदल गया है।
यह मैच क्या हम इस समाधान में है।