यह सबक हम अपने शिविर पर काम जारी रखने के लिए जा रहे हैं में वापस स्वागत है।
हम पहले से ही प्रारंभिक सेट अप किया है।
हम कुछ बुनियादी लेख और पाद बाहर रखना जोड़ा Parshall है हम बूटस्ट्रैप जोड़ा गया है और हम नए कैंप बनाने की कार्यक्षमता जोड़ा किया है।
अब हम कैंप पेज बूटस्ट्रैप का उपयोग करने में शैली में जाने के लिए जा रहे हैं।
तो चलो शुरू हो जाओ।
बहुत पहले की बात मैं करता हूँ यकीन है कि मेरे सर्वर चल रहे हैं बनाने के लिए है।
और बस अब हम क्या है पर एक नज़र रखना।
निश्चित रूप से थोड़ा underwhelming।
तो मैं दो मुख्य लक्ष्य है।
पहले एक है कि हम यहाँ शीर्षक में एक बेहतर हैडर चाहते हैं तो यह अच्छे लग रहे चाहिए।
हम का उपयोग करने के लिए क्या बूटस्ट्रैप में एक jumbotron कहा जाता है और उसके बाद भी कैंप कैंप की सूची नहीं है, बस खड़ी इस तरह प्रदर्शित करना चाहिए जा रहे हैं।
इसके बजाय हम चाहते छोटे छवियों का एक ग्रिड के पार जा रहा है और कहा कि ग्रिड उत्तरदायी होना चाहिए।
के पहले एक है जो इस शीर्षक पाठ में एक छोटा सा अच्छे लग रहे करने के लिए हो रही है के साथ शुरू करते हैं।
तो मैंने कैंप कि हाँ मैं बस यहाँ में काम करने के लिए जा रहा हूँ को खोलने के लिए जा रहा हूँ।
इसलिए मुझे लगता है क्योंकि हम काफी HD मेल का एक सा लेखन करने जा रहे हैं यह एक छोटा सा आकार बदलने के लिए जा रहा हूँ और हम सब पर एक टर्मिनल के साथ कुछ भी करने के लिए नहीं जा रहे हैं।
तो हैडर हम एक शीर्षक टैग है जो हम पहले नहीं देखा है का उपयोग करने के लिए जा रहे हैं पर काम करने के लिए।
कार्यात्मक यह एक div तरह से कुछ के रूप में ठीक उसी तरह से काम करता है।
फर्क सिर्फ इतना है कि यह यह करने के लिए अर्थ अर्थ का एक छोटा सा है।
शीर्षक का उपयोग बजाय सिर्फ एक मनमाना div से, लेकिन यह वास्तव में यह सिर्फ एक कंटेनर है कोई फर्क नहीं पड़ता।
और हम इसे jumbotron के एक वर्ग को देने के लिए जा रहे हैं और फिर हम में जोड़ने के लिए अच्छी तरह से सिर्फ वास्तव में इस एच -1 कॉपी और हम सिर्फ उस पर छोड़ दें और Frigo बचाने के लिए और हमारे पेज को ताज़ा कर देंगे करने के लिए जा रहे हैं इसके बारे में अंदर।
अब हम क्या Jumbotron कहा जाता है।
यह अभी भी बहुत अच्छा नहीं है।
अगली बात हमें क्या करना चाहिए एक बूटस्ट्रैप कंटेनर के अंदर सब कुछ कर रहा है।
इतना सब कुछ है कि हम यहाँ यह है कि मैं इंडेंट करने के लिए जा रहा हूँ और मैं वर्ग के साथ एक div जोड़ने के लिए जा रहा हूँ के सभी देख बस ऐसे ही कंटेनर के बराबर होती है।
और फिर हम उस के अंदर सब कुछ रहना होगा और इस पक्षों पर हमारे लिए कुछ speccing जोड़ देगा।
ताज़ा करें।
आप देख सकते हैं हम अब सही बाईं ओर यहां के खिलाफ बातें हैं।
हम कुछ जगह है और हमारे jumbotron थोड़ा करीब लग रही है और अंत में एक Naff बार दिखाई पड़ेगा।
इसलिए इस के साथ ही अच्छे है एक छोटा सा दिखेगा।
अभी के लिए हम सिर्फ Jumbotron है।
अब चलो पाठ ही बदल सकते हैं।
तो बजाय यह है कैंप पेज के शिविर के लिए एक स्वागत संदेश में आपका स्वागत है डाल दिया।
जो कुछ भी आप चाहते हैं सामग्री डाल करने के लिए स्वतंत्र महसूस हो रहा है और मैं भी मैं टैगलाइन का सिर्फ एक छोटा सा तरह जोड़ देंगे पैराग्राफ में एक पैराग्राफ में जोड़ देंगे और मैं सिर्फ हमारे हाथ देख सकते हैं और दुनिया भर से कैंप लेने कहूँगा।
कुछ इस तरह वास्तव में कोई फर्क नहीं है।
हम ताज़ा बचा लेंगे।
ठीक है तो अब हम एक छोटे टैग लाइन है और आखिरी बात हम करना चाहते हैं इस लिंक का ख्याल रखना है।
नई कैम्प का ग्राउंड लिंक जोड़ें।
इसलिए मुझे लगता है कि कॉपी और भी Jumbotron अंदर डाल करने के लिए जा रहा हूँ।
हालांकि मैं इसे एक बटन में बनाने के लिए जा रहा हूँ।
बूटस्ट्रैप बटनों में से एक तो यह है कि ऐसा करने के लिए या पहले एक पैरा जोड़ने के लिए और फिर उस के अंदर लंगर टैग डाल दिया।
और मैं कर रहा हूँ कि सिर्फ रिक्ति के लिए।
आप यह है कि यह अपने आप ही लाइन पर होना चाहते हैं और फिर मैं रंग के लिए और पानी का छींटा है कि जैसे बड़े और बचत होगी बीच PTEN ETN प्राथमिक के बटन वर्ग कई वर्गों देने के लिए जा रहा हूँ।
अब हम एक नई कैम्प का ग्राउंड बटन पड़ा है।
हम उस पर क्लिक करें और यह रूप है कि पूरी तरह से स्टाइल है करने के लिए हमें ले जाता है।
एक छोटी सी बात यह है कि अगर मैं इस विंडो का आकार बदलने के यहां है।
सूचना कैसे हमारे पाठ सही Jumbotron के किनारे जो महान नहीं है के खिलाफ चला जाता है।
हम कुछ रिक्ति यहाँ है और वे कहते हैं कि हम क्या करने रिक्ति सिर्फ Jumbotron के अंदर एक और कंटेनर जोड़ने की आवश्यकता होगी क्या रखना चाहते हैं इसलिए div वर्ग के समापन div पर अंत से पहले यहाँ नीचे Jumbotron अंदर कंटेनर के बराबर होती है और फिर और फिर बस मांगपत्र सब कुछ।
और अब अगर हम ताज़ा करें।
वह एक ही लग रहा है लेकिन जब हम इसे नीचे हटना अब हम कुछ जगह नहीं है।
ठीक है, ताकि हैडर हिस्सा है।
अब हम छवियों की कि ग्रिड पर काम करना चाहते हैं और मैं आप के साथ सामने हो जाएगा।
यह निश्चित रूप से एक छोटा सा और काम है।
ठीक है कि ग्रिड पर शुरू हो और हम एक पंक्ति बनाने के द्वारा शुरू करने के लिए इतना div वर्ग बस ऐसे ही पंक्ति के बराबर होती है जा रहे हैं और मैं सिर्फ एक छोटे से यहाँ संदेश के साथ शुरू करने जा रहा हूँ।
इसलिए हम एक div वर्ग को जोड़ने के लिए जा रहे हैं बराबर होती है और मैं बनाने के लिए यह सिर्फ पूरी चौड़ाई को लेने के लिए जा रहा हूँ और हम बस यहाँ संदेश के लिए जा रहे हैं और एच 3 कहता है कि हमारी सबसे लोकप्रिय साइटों कैंप आप जानते हैं बहुत पसंद नहीं लगेगा।
अभी के लिए की पीठ पर चलें और के div वर्ग पंक्ति जो हम एक पंक्ति में हमारे ग्रेड स्कूल में सब कुछ की जरूरत है जोड़कर शुरू करते हैं।
यह एक div वर्ग बस ऐसे ही पंक्ति बराबर होती है।
और अब हम एक पाश के लिए इस बारे में बात करने के लिए क्या हम वास्तव में क्या करना चाहते हैं प्रत्येक कैम्प का ग्राउंड हम एक div एक स्तंभ वर्ग और बूटस्ट्रैप ग्रिड का उपयोग कर के साथ एक स्तंभ है कि यह सुनिश्चित करना चाहते हैं के लिए पंक्ति के अंदर हमारे ग्रिड के बजाय है, क्योंकि लोगों की है।
इसलिए मुझे लगता है कि ऐसा करने के लिए जहां अब मैं प्रत्येक पाश बस ऐसे ही दांतेदार बना लिए जाने के लिए इस कोड के सभी डाल करने के लिए जा रहा हूँ जा रहा हूँ।
और फिर हम यहाँ हमारे समापन div टैग की जरूरत है।
तो इस शास्त्रीय पंक्ति के लिए है और इस कंटेनर के लिए है।
ठीक।
तो ative वर्ग पंक्ति और नहीं बल्कि सिर्फ एक छवि के लिए एक एच के साथ यह div और यहाँ के रूप में यह सामग्री छोड़ने हम अभी भी एक छवि है, लेकिन हम यह तो div यह स्तंभ छोटे में स्तंभ मध्यम तीन में से एक वर्ग है कि बदलने के लिए जा रहे हैं की तुलना में 6 और वह सिर्फ इतना है कि हम कुछ बड़ा छवियों जब स्क्रीन आकार बड़ा है इसे पाने के लिए उत्तरदायी बनाने के लिए है।
और फिर जब हम इसे नीचे हटना यह पंक्ति प्रति सिर्फ दो छवियों के लिए नीचे जाना होगा और फिर इसे पंक्ति प्रति सिर्फ एक छवि के लिए नीचे और आगे भी हटना होगा।
तो अंदर है कि हम वास्तव में एक और div में जोड़ने के लिए जा रहे हैं और इस div थंबनेल वर्ग है जो एक बूटस्ट्रैप वर्ग है जो हमें थोड़ा कार्ड के अंदर है कि थम्बनेल जोड़ देगा यह एक छोटे से ग्रिड आइटम बनाना होगा बनाने में मदद मिलेगी है किया जा रहा है छवि बस इस तरह से शुरू करने के लिए।
हम कैम्प का ग्राउंड आप आर एल के बराबर की छवि सेवाओं है और हम सिर्फ उस पर छोड़ देंगे।
और हम अब के लिए इस से छुटकारा पाने के लिए और बस को बचाने और देखते हैं कि हम क्या मिल सकता है अगर हम ताजा कर रहे हैं जा रहे हैं।
ठीक है।
तो क्या अब हम छवियों का एक ग्रिड है।
वहाँ केवल तीन है, लेकिन हम इस ग्रिड हो रही है।
और मैं तुम्हें दिखाता हूँ कि मैं क्या यह संवेदनशील बनाने से क्या मतलब।
तो जैसा कि एक सूचना इन कैसे यह दो वर्गों या स्क्रीन भर में दो मदों में परिवर्तन हटना।
याद रखें कि वहाँ 12 इकाइयों है कि।
तो क्या हम पहली बार था कि हम चार टुकड़ों में विभाजित कर रहे हैं, जहां वे प्रत्येक तीन इकाइयों से बाहर ले गया और फिर जब ग्रिड छोटा हो जाता है यहीं वे प्रत्येक छह इकाइयों लेने के लिए और भी छोटे यह स्वचालित रूप से एक करने के लिए चला जाता है।
और हम हैं कि क्योंकि अतिरिक्त छोटे डिफ़ॉल्ट 12 इकाइयों का उपयोग करने के लिए है लिखने के लिए नहीं था।
इसलिए हम चाहते हैं कि निर्दिष्ट करने के लिए नहीं था।
अब हम एक एक nother बूटस्ट्रैप वर्ग एक div वर्ग बस ऐसे ही शीर्षक के बराबर होती है क्या करने के लिए सिर्फ एक साल की उम्र की तुलना में इस कैम्प का ग्राउंड नाम में वापस नहीं बल्कि शीर्षक मिलता है।
और फिर अंदर वहाँ कैम्प का ग्राउंड नाम के लिए एक एच डाल देंगे।
ठीक है बचाने देखते हैं क्या ऐसा लग रहा है चलो।
हम वहाँ चलें।
हम इन अच्छा सा कार्ड मिलता है।
इस थम्बनेल हमारे लिए कर रही है कि वर्ग है।
हम अपने चित्र है।
और हम सिर्फ यह देखना है कि क्या यह की तरह यदि हम वस्तुओं के एक झुंड में जा रहा छवियों का एक गुच्छा है दिखता है।
तो आप ऐसा करने की जरूरत नहीं है, लेकिन मैं यहाँ में इस पेस्ट करने जा रहा हूँ।
बस हमें कुछ और जानकारी दे।
यह डुप्लिकेट डेटा हो जाएगा, लेकिन वह ठीक है।
और फिर हम और यकीन है कि हम सही अल्पविराम जोड़ने बनाने की जरूरत है तो वहाँ अल्पविराम और वहाँ आने के लिए।
अब अगर हम ओह ताज़ा हम सर्वर को पुनः आरंभ करने की जरूरत है।
और एप्लिकेशन के साथ हर बार हम गंदगी।
हाँ।
और अब अगर हम ताज़ा वह हम एक छोटी सी समस्या है देखेंगे।
हमारे ग्रिड में एक छोटा सा गड़बड़ है।
और क्या हो रहा है कि हम छवियों कि अलग ऊंचाइयों की रहे है।
इसलिए इस सामन क्रीक इनमें से एक की तुलना में अलग है।
यहाँ तक कि चौड़ाई हालांकि इस मामले में वही कर रहे हैं।
और कहा कि इस ग्रिड से दूर फेंक रहे है और वहाँ एक आसान तरीका है, हालांकि यह एक छोटा सा wonky है यह तय करने के लिए है।
और मैं आपको बताएंगे कि कैसे हम हैं कि हमारे कैम्प का ग्राउंड के बजाय करना।
हाँ।
कक्षा पंक्ति के दिन मैं एक शैली विशेषता में जोड़ने के लिए जा रहा हूँ और मैं सिर्फ इस अस्थायी रूप से करने जा रहा हूँ।
हम एक बाहरी स्टाइलशीट को यह चलती हो जाएगा, लेकिन मैं सिर्फ लाइन में यह करने के लिए यह आसान के लिए आप को देखने के लिए बनाने के लिए जा रहा हूँ।
इसलिए हम शैली की चादर के होने का फ्लेक्स और फ्लेक्स की चादर के प्रदर्शित होने को तैयार।
और उन दो गुण है कि हमारे ग्रिड की मदद से बाहर करने के लिए जा रहे हैं।
तो अगर मैं ताजा थे अब हम ग्रिड के साथ खत्म होता है, जहां यह अधिक लचीला है।
यह बात नहीं है कि हम कुछ अलग ऊंचाइयों है कि अब ग्रिड तो वहाँ adapts इन दोनों के बीच अधिक स्थान और वहाँ यह यहाँ है क्योंकि।
असल में यह आवश्यक है जहाँ हम सब कुछ अपने आप ही लाइन पर एक साथ होना हम सब कुछ पूरी तरह से गठबंधन किया है सकते हैं, जहां हो सकता है अंतरिक्ष की न्यूनतम राशि बाहर के आंकड़े।
और वहाँ एक अन्य परिवर्तन हम कर सकते हैं वापस जाओ और पाठ का केंद्र है जो हमारे लिए एक बूटस्ट्रैप जो हमारे पाठ सही वहाँ केंद्रित कर देगा में जोड़ने के लिए है जो है।
और मुझे लगता है कि थोड़ा बेहतर लग रहा है।
इसके अलावा व्यक्तिगत पसंद की बात है और अब हम कुछ समय के लिए कैम्प का ग्राउंड पृष्ठ के साथ कर रहे हैं।
उम्मीद है कि पता चलता है कि आप कैसे बूटस्ट्रैप वास्तव में हमारी मदद कर सकते हैं बातें बहुत विशेष रूप से आसान खरोंच से इस काम को करने के लिए की तुलना कर सकते हैं।
और मुझे सिर्फ तुम हो कि हम अपने अच्छा संवेदनशील ग्रिड दिखाते हैं।
तो इस मोबाइल पर है।
हम चार छवियों के लिए यह अच्छा लेआउट सभी तरह के पार जा मिलता है।
ठीक है तो मैं यह कैसे लगता है के साथ बहुत खुश हूँ।