यह सबक हम इस शो पेज स्टाइल पर ध्यान केंद्रित करने जा रहे हैं में वापस आने के लिए आपका स्वागत है।
इसलिए अभी हमारे शो पृष्ठ इस तरह दिखता है।
हम बटन है कि कुछ भी नहीं है के साथ एक छोटे Naff बार यहाँ है।
हम एक एच 1 कैम्प का ग्राउंड के नाम के साथ लोगों की है।
और हम एक छवि और एक वर्णन है और हम एक नई टिप्पणी जोड़ने के लिए एक बटन है और फिर टिप्पणियों के सभी प्रदर्शित कर रहे हैं।
हर एक को एक छोटे पैराग्राफ।
तो यहाँ हमारा लक्ष्य इसे इस तरह से एक छोटा सा और देखो बनाने के लिए है।
तो मैं यहाँ पर एक साइडबार है।
हम तो बस अभी तक नक्शा पास करने के लिए नहीं जा रहे हैं, लेकिन हम नक्शे के लिए जगह बनाने जाएगा और फिर हम विवरण के साथ हमारे मुख्य सामग्री पर होगा।
कुछ पाठ शीर्षक हम रेटिंग्स अभी तक ऐसा करने के लिए नहीं जा रहे हैं, लेकिन फिर हम यह भी है कि इस तरह दिखेगा समीक्षा की एक सूची होगा।
अपनी छोटी सी कंटेनर वहाँ नीचे मैं कुछ लीवर के लिए एक छोटा सा बटन होगा।
आम तौर पर यह एक छोटा सा और स्टाइल है।
हम इस जोड़ सकते हैं और कहते हैं कि कितने समीक्षा छोड़ दिया गया।
तो यह है कि क्या हम के लिए लक्ष्य कर रहे हैं।
और हम बस बूटस्ट्रैप ग्रिड पर ध्यान केंद्रित करने जा रहे हैं शुरू करने के लिए।
याद रखें कि बूटस्ट्रैप ग्रिड 12 इकाइयों के पार है।
हम इस छोटी सी साइड बार के लिए उन 12 में से तीन को नामित करने के लिए जा रहे हैं और फिर हम मुख्य सामग्री के लिए नौ में जोड़ने के लिए जा रहे हैं।
इससे पहले कि हम वास्तव में कुछ भी बदलने पर आरंभ मुझे लगता है कि मैं वी 5 में काम कर रहा हूँ बाहर बात करना चाहते हैं।
तो अगर आप के साथ पालन करना चाहते हैं इन सभी परिवर्तनों वी 5 में होगा।
और कारण है कि मैं क्या कर रहा हूँ कि हम एक कस्टम शैली पत्रक बनाने के लिए है करने के लिए जा रहे हैं।
हम सार्वजनिक निर्देशिका और कुछ अन्य चीजें हैं जो पर्याप्त परिवर्तन कर रहे हैं की सेवा करने के लिए जा रहे हैं।
तो मैं एक अलग संस्करण बनाना चाहते थे।
लेकिन इससे पहले कि हम चाहते हैं कि पहली बात यह है कि हम क्या करने जा रहे हैं इस बूटस्ट्रैप कंटेनर के चारों ओर एक कंटेनर को जोड़ने है।
इसलिए इस शो में है कि ई.जे. बस ऐसे ही कंटेनर वर्ग के साथ एक div जोड़ने जा रही है और हम उस के अंदर सब कुछ डाल देंगे।
और मैं में साइडबार जोड़कर शुरू करेंगे और हम सिर्फ कुछ डमी डेटा के साथ भर देंगे हम यहाँ की तरह।
तो डिवएक्स और इस वर्ग के समर्थक के बराबर होती है और उस पंक्ति में हम एक और div जहां एक वर्ग स्तंभ मध्यम तीन बस ऐसे ही है के लिए जा रहे होने की जरूरत है।
और फिर यहाँ के अंदर हम एक पैरा जोड़ने के लिए जा रहे हैं और हम इस पाठ कि जोकिम कहते हैं पाने के लिए जा रहे हैं।
तो यह है कि एक पैरा जहां वर्ग की बढ़त है और उसके बाद हम सिर्फ तुम अब हम इस अंत में बदल जाएगा के लिए शिविर प्रस्तुत करने के लिए जा रहे हैं।
लेकिन हाँ शिविर और फिर उन छोटी सूची आइटम जोड़ने के लिए हम वर्ग के साथ एक div करूँगा सूची पानी का छींटा समूह है और फिर यहाँ हम एक सहयोगी में सहयोगी दलों का एक गुच्छा जोड़ने के लिए जा रहे हैं सूची समूह आइटम का एक वर्ग है।
और अंदर हम सिर्फ कुछ डमी डेटा जोड़ देंगे और हम सिर्फ यह जानकारी 1 फोन करता हूँ और फिर मैं जानकारी 3 को यह जानकारी नकल करने जा रहा हूँ।
और फिर यह है कि अब के लिए की तरह दिखता है क्या देखते हैं।
तो पृष्ठ ताज़ा हम एक साइडबार यहाँ है और मैं इन शुरू करने के लिए चयनित आइटम में से एक बना देंगे।
और हम सभी को यह करना है सही वहाँ एक सक्रिय जोड़ने है।
हम ताजा कर रहे हैं, तो अब हम देखते हैं कि उनमें से एक भी सक्रिय है।
और यह वास्तव में सिर्फ एक तो हम खाली स्थान का एक बहुत कुछ नहीं है, लेकिन फिर हम वास्तविक आंकड़ों वहाँ जोड़ दिया जाएगा और एक नक्शा अंततः वहाँ कुछ है करने के लिए प्लेसहोल्डर है।
और अभी यह बाहर बात करने के लिए नक्शे अंततः लेकिन न सिर्फ अभी तक इस माध्यम तीन स्तंभ के अंदर यहीं से जाना जाएगा।
ठीक है तो यह है कि एक ओर बार है।
अब हम मुख्य सामग्री में जोड़ने के लिए जा रहे हैं।
तो हम एक और स्तंभ की जरूरत है और यह एक वर्ग स्तंभ मध्यम 9 है।
और वहाँ के बजाय हम एच-1 की आवश्यकता है कि हम छवि है लेकिन इस बात का सब से पहले आप यह वास्तव में इन सभी थंबनेल जैसे हम मुखपृष्ठ पर है में से एक में है नोटिस देंगे की जरूरत है।
इनमें से हर एक को एक झलक है।
हम शीर्षक और टिप्पणियों और है कि सभी में पूरी छवि के चारों ओर एक ही बात करने जा रहे हैं।
इसलिए हम एक div जोड़ने के लिए जा रहे हैं और कि div वर्ग होगा थम्बनेल के बराबर होती है।
और फिर उस के अंदर हम छवि को जोड़ने के लिए जा रहे हैं और मैं अभी भी छवि हम पहले से ही लिखा है जाएगा और अभी यह जगह सही वहाँ में।
तो यह है कि हमारे कैम्प का ग्राउंड की छवि होने जा रहा है।
और फिर हम यह भी है कि बूटस्ट्रैप हमें देता है कि जो छवि Dasch उत्तरदायी है के लिए एक वर्ग जोड़ना चाहते हैं।
हम वहाँ चलें।
उसे सहेजो।
और अगर हम अब हम क्या है पर एक नज़र रखना और ताज़ा हम कम से कम छवि और सही जगह में सामग्री है।
हम एक समस्या है, जहां यह है कि हम यह चाहते हैं के साथ हालांकि नहीं ले रही है।
मुझे लगता है कि सभी तरह के पार जाना चाहते हैं और हम कुछ कस्टम अंत में सी एस एस के साथ कि संभाल के लिए होगा।
और अब हम वापस जाने के लिए और यहाँ में इस जोड़ जहां हम शिविर जमीन के नाम पर और फिर रात प्रति कीमत है जो हम वास्तव में डेटाबेस में नहीं है होगा।
तो हम बस हार्डकोडेड करेंगे।
तो चलो कि अब करते हैं।
और कि एक और div है और यह एक कैप्शन पूरा पानी का छींटा के एक वर्ग है।
और फिर वहाँ के अंदर हम के लिए एक एच जोड़ने के लिए जा रहे हैं।
और हम सही करने के लिए इस पर खींचने के लिए जा रहे हैं और हम कक्षा के बराबर होती है पुल पानी का छींटा सही है और फिर जो कुछ भी हम यहाँ में डाल कीमत हो जाएगा।
और मैं सिर्फ $ 9 एक रात फिर से इस डेटाबेस से अंत में आ रहा होगा साथ शुरू करेंगे।
हम ताजा कर रहे हैं, तो अब हम सही पक्ष पर $ 9 एक रात पाने के लिए और फिर हम कैम्प का ग्राउंड जो मैं सिर्फ बाएं हाथ की ओर यहाँ पर कॉपी हूँ के नाम पर प्राप्त करना चाहते हैं।
तो हम इसे ठीक नीचे डाल देता हूँ और अगर हम पुल सही नहीं जोड़ कर यह स्वचालित है कि हालांकि मेरे मन में क्या था की तुलना में बड़ा है बाईं ओर पर जाना होगा और मैं के लिए एक छोटे एच में है कि बारी हूँ और मैं जा रहा हूँ वहाँ की बस ऐसे ही अंदर एक लंगर टैग को जोड़ने और लंगर टैग के अंदर कैम्प का ग्राउंड नाम रख दिया।
और कहा कि पीछे विचार यह है कि अंत में मुझे वापस जाना है।
यह वास्तविक कैम्प का ग्राउंड या पार्क सर्विस पेज जहां हम कुछ बुक करने के लिए जा सकते हैं करने के लिए एक लिंक होना चाहिए।
अभी के लिए यह कहीं नहीं करने के लिए सिर्फ कड़ी है।
ठीक।
तो हम उस में है।
हम एक कीमत है।
अब में वापस विवरण जोड़ दें।
तो यह है कि सिर्फ एक पैराग्राफ टैग हो जाएगा और फिर हम अपने विवरण जो कैम्प का ग्राउंड वर्णन है ठीक वहाँ में जोड़ देंगे।
और इसकी वजह यह है कि हम एक बड़ी सदस्यता नहीं है एक छोटा सा underwhelming होने जा रहा है अभी तो हम चलते हैं और कुछ Lorem Ipsum के साथ डेटाबेस को देखने के लिए क्या करना चाहते हो सकता है और मैं सिर्फ इस चोरी करने के लिए जा रहा हूँ और मैं कॉपी करेंगे कि और वापस बीज फाइल करने के लिए जाना।
और फिर हमारे बीज की फ़ाइल के बजाय और मैं उन तीनों पर विवरण बदल देंगे।
बस इसे ब्ला ब्ला ब्ला एक ही बात करने के बजाय बनाते हैं।
अब हम Lorem Ipsum की एक लंबी सा है और हम बचा लेंगे।
और फिर इस आशय हम सर्वर को पुनः आरंभ करने के लिए है कि क्योंकि डेटाबेस प्राप्त होगा राशि में जाना बनाने के लिए।
और फिर वापस जाने के लिए और कैंप पेज के लिए बारी है।
हम तीन कैंप की है।
हालांकि वे अब एक और अधिक वैध विवरण कुछ पाठ है।
ठीक है बढ़िया।
तो चलो अब हम क्या पर काम करने की जरूरत एक नजर डालते हैं।
वहाँ कुछ मामूली चीजें है।
हम सितारों की समीक्षा में अब के लिए अकेले गिनती छोड़ देंगे और हम टिप्पणी करने के लिए नीचे कदम होगा।
के शो है कि करने के लिए वापस जाओ ई.जे. हाँ फ़ाइल हम अब के लिए बीज के बाहर बंद कर सकते हैं कि हम क्या करने जा रहे हैं स्तंभ मध्यम नौ के अंदर अच्छी तरह से एक वर्ग अच्छी तरह से दे में जोड़ने क्योंकि हम इसे इसी कॉलम में यहाँ होना चाहते है।
अंतरिक्ष का एक ही राशि उठा रहा है।
तो यह है कि सिर्फ यहीं इस थम्बनेल है यह तो थंबनेल और कैप्शन के बाद यहीं जाना करते हैं।
तो ठीक है वे div वर्ग को जोड़ने के लिए जा रहे हैं।
अच्छी तरह से बराबर होती है।
और फिर इसे खोलने के लिए जा रहा है कि अंदर और यह है जहाँ यह टिप्पणी जोड़ने के लिए के माध्यम से पाशन करना होगा।
लेकिन मैं बटन में आप बटन के लीवर जोड़कर शुरू करने जा रहा हूँ और हम सिर्फ एक सरल div करूँगा और इस div पाठ पानी का छींटा के एक वर्ग का अधिकार होगा।
और फिर वहाँ के अंदर हम यहाँ हमारे लंगर टैग को जोड़ने के लिए जा रहे हैं हम पहले से ही एक नई टिप्पणी बनाने के लिए है।
बस यह कि यहां डाल दिया।
यह एक लंबे समय से एक है, लेकिन याद है कि यह एक लंगर टैग बटन बटन सफलता है कि यह हरे बनाता का एक वर्ग है कि है।
लेकिन रेफरी एक बहुत लंबे हिस्सा है।
यह कैंप जा रहा है स्लेश कैम्प का ग्राउंड आईडी स्लेश टिप्पणियों नई स्लेश लेकिन बचाने के लिए और ताज़ा करें।
ठीक।
तो आप देख सकते हैं कि हम अब अच्छी तरह से अमेरिका की सीमा में अच्छा ग्रे पृष्ठभूमि देता है कि लोगों की है।
यह जहां हम टिप्पणी में जोड़ने के लिए जा रहे है।
इसलिए हम आगे क्या टिप्पणी के माध्यम से पाश की जरूरत है और हम पहले से ही किया है।
बल्कि सिर्फ हर एक को हम वास्तव में एक अलग पंक्ति बनाने के लिए जा रहे हैं के लिए एक पैरा बनाने की तुलना में।
तो मैं तुम्हें दिखाता हूँ कि तरह जब यह इस कॉपी या यह कटौती लग रहा है।
और हम इस अतिरिक्त पैरा हटा सकते हैं और हम पाठ के बाद सही है कि सही डाल करने के लिए जा रहे हैं।
और हम यह अच्छी तरह से करते हैं।
इसलिए हम अपने पाश है और फिर हम एक टिप्पणी के माध्यम से पाश के लिए जा रहे हैं और हम यहां से हर एक div वर्ग के लिए एक div वर्ग पंक्ति पंक्ति के बराबर होती है अंदर जोड़ने के लिए जा रहे हैं।
और फिर प्रत्येक के अंदर हम एक और div वर्ग को जोड़ने के लिए जा रहे हैं स्तंभ मध्यम 12 के बराबर होती है और उस बचाने के लिए।
और हम क्या हम यहाँ है हम उपयोगकर्ता नाम ईमेल स्लेश उपयोगकर्ता नाम जो हम लेखक फोन के साथ अंत पर एक नज़र रखना है।
और फिर ठीक है पर इस समय 10 दिन पहले जो होगा के लिए सिर्फ मुश्किल कोड और अब तो वास्तविक टिप्पणी अगले आता है।
तो यह है कि काम हम कुछ पाठ करते हैं और फिर करने की जरूरत बनाने के लिए सही पर कुछ करना खींच सही पाठ सही है और फिर हम वास्तविक टिप्पणी से खुद के लिए में एक पैरा जोड़ने की जरूरत है।
तो चलो कि कोशिश करते हैं और यहाँ में चलते हैं।
हम अपने स्तंभ मध्यम 12 लोगों की है।
और उस के अंदर हम सिर्फ टिप्पणी लेखक को जोड़ने के साथ शुरू करने जा रहे हैं।
तो चलो बस वहीं है कि जोड़ें।
और फिर उस नीचे हम एक समय में जोड़ने के लिए जा रहे हैं और इस अधिकार पर होगा।
इसलिए हम शास्त्रीय पुल सही जोड़ देंगे।
और फिर यहाँ हम अभी के लिए जोड़ देंगे दस दिन पहले।
खैर अभी मुश्किल कोड में है।
और फिर आखिरी बात यह है कि वे क्या करना चाहते हैं वास्तव में टिप्पणी पाठ को दिखाने के लिए है।
तो मैं और यहाँ इस टिप्पणी पाठ पाने के लिए जा रहा हूँ और हम अपने स्वयं के पैरा हम पहले से ही यहाँ है जो सिर्फ इतना है कि हम सिवाय तरह अंदर डाल देता हूँ कि स्तंभ के अंदर यह यहां स्थानांतरित करने के लिए जैसे हम लेखक है चाहता हूँ 10 दिनों जाना ।
हम उन्हें एक ही स्तंभ में एक साथ और अब हो सकता है लेकिन बचाने के लिए और वापस जाने के लिए चाहते हैं।
हम क्या हो।
ठीक है।
इसलिए हम एक टिप्पणी की है।
बस।
लेकिन जैसा कि आप देख सकते हैं कि हम एक बटन एक नई टिप्पणी जोड़ने है।
यकीन है कि यह काम करता है।
और टिप्पणियों यहां प्रदर्शित कर रहे हैं।
हम रेटिंग याद आ रहे हैं।
इसलिए यह थोड़ा अजीब लग रहा है, लेकिन है कि अभी के लिए ठीक है।
हम क्या करना चाहते हो सकता है एक या दो और टिप्पणी जोड़ने के लिए जाना है।
तो यहाँ वापस जाओ और चलो बस कुछ और Lorem Ipsum का उपयोग करते हैं।
तो मैं सिर्फ इस के कुछ हिस्सों को कॉपी और उन्हें टिप्पणी के रूप में जोड़ने के लिए जा रहा हूँ।
बस उस से कुछ का उपयोग और लेखक से यहां डेरा दिया जाएगा।
दादा जी।
जमा करें।
ठीक।
तो क्या अब हम हमारी टिप्पणी यहाँ बस ठीक हो रही है।
यही काम कर रहा है।
मैं कुछ जगह है कि हम जोड़ना चाहते है।
आप क्या हम यहाँ है एक सच में बेहोश लाइन यदि आप स्क्रीन के कलाकारों पर दिखाई देंगे मैं नहीं जानता कि वहाँ पर एक नज़र रखना है।
वहाँ एक सच में बेहोश लाइन उस में कुछ रिक्ति जोड़ने के लिए और हम सभी के लिए है कि काम करने के लिए क्या करने की जरूरत एक एच आर जोड़ना है।
तो सही इस पाठ सही बटन जो हम सिर्फ एक क्षैतिज शासन में जोड़ सकते हैं और अगर हम ताज़ा हम अब वहाँ कुछ जगह है के बाद।
आप एक बटन है और हम अपने सभी टिप्पणियों अल्पावधि में प्रदर्शित किया जा रहा है।
हम क्यों उपयोगकर्ता नाम का निर्माण नहीं है।
तो हम यहाँ वापस जाना होगा और हम पहले से ही इस किया था और वे इसे से छुटकारा मिल गया है, लेकिन हम वापस जाने के लिए और लेखक के साथ फिर से एक मजबूत टैग जोड़ा है और वे इसे एक छोटे से देखने के लिए आसान बनाने के लिए करेंगे।
हम वहाँ चलें।
फिर भी महान नहीं है, लेकिन अब के लिए काफी अच्छा है।
तो यह है कि वास्तव में सभी बूटस्ट्रैप कि हम अब के लिए क्या करने की जरूरत है।
लेकिन हम अभी भी नहीं किया हो।
अगर हम वापस जाने के लिए और समाप्त ish संस्करण पर एक नज़र लेने के लिए आप देखेंगे कि छवि पूरे थम्बनेल लेता है और सिर्फ इतना है कि नहीं कर रहे हैं।
हालांकि मैं सटीक एक ही छवि यह वास्तविक छवि के बारे में ही नहीं है का उपयोग करने के लिए एक मुद्दा बना दिया।
समस्या हमारे स्टाइल के लिए नीचे आता है।
और क्या हम करना चाहते हैं में जाने के लिए और इस छवि को बता कंटेनर के साथ 100 प्रतिशत तक ले जाना है।
तो मैं तुम्हें दिखाता हूँ हम सिर्फ यह निरीक्षण कर सकते हैं और इस इंस्पेक्टर यहां के लिए एक महान प्रयोग है।
हम उसे यहां का चयन कर सकते हैं और फिर यहाँ पर हम 100 प्रतिशत के साथ एक शैली में जोड़ सकते हैं।
और वहाँ हम चले।
तो है कि एक बात यह है कि हम क्या करना चाहते हैं जाएगा है।
वहाँ अभी भी एक बहुत ही मामूली अंतर है जो वहाँ सही वहाँ एक छोटी सी जगह है कि हम इस पर एक भी नहीं है है है है।
और उस से छुटकारा पाने के लिए हम सभी को करना चाहते वास्तविक थंबनेल में जाना और थंबनेल जो यहीं है चुन सकते हैं और हम उस गद्दी शून्य देने के लिए जा रहे हैं।
और अब अगर हम एक नज़र लेने के लिए यह तरीका है कि हम यह देखना चाहते हैं या लगभग उस तरह से देखने के लिए जब लग रहा है लग रहा है।
हम यहाँ के रूप में अच्छी तरह से कुछ रिक्ति जोड़ने के लिए जा रहे हैं।
आप वहाँ कुछ रिक्ति यहाँ किया है देख सकते हैं और है कि अभी हम ठीक कर सकते हैं।
इसके अलावा द्वारा यह निरीक्षण और याद है कि हम वास्तव में यह तय नहीं कर रहे हैं हम सिर्फ यह ब्राउज़र में बाहर परीक्षण कर रहे हैं और फिर हम वापस जाने के लिए और वास्तव में हमारे अपने स्टाइल शीट में इन परिवर्तनों को बना देंगे।
तो क्या हम क्या करना चाहते हैं कैप्शन बछेड़ा जो यहाँ इस बॉक्स है पर गद्दी का एक छोटा सा में जोड़ने के लिए है।
और पदम हम चाहते हैं छोड़ दिया, ठीक ऊपर और नीचे पर है और यह नौ या 10 पिक्सल होने जा रहा है।
तो हम बस padding नौ एक्स कर देंगे।
और वहाँ हम चले।
हम वहाँ एक अच्छा अंतर के साथ खत्म होता है।