इस पाठ में वापस स्वागत है हम प्रयोग कर क्या हम अब तक बूटस्ट्रैप के बारे में सीखा है एक छोटे से परियोजना का निर्माण करने जा रहे हैं।
यह घटकों हम इसे अब jumbotron और ग्रिड सिस्टम बार सहित के बारे में बात कर रहा है की एक बहुत कुछ शामिल होंगे।
मैं भी प्रतीक यहां सहित एक या दो नई चीजों में फेंक दिया।
हम नहीं देखा है बस अभी तक उन कैसे करना है।
और यह भी सच है कि इस नव पट्टी मैं पुस्तक के रूप में इसे शीर्ष करने के लिए तय रहता है तो यह जिस तरह से हम एक निश्चित नव पट्टी जो हम भी बस अभी तक नहीं देखा है स्क्रॉल नहीं करता देखेंगे।
और फिर अंत में हम डिफ़ॉल्ट बूटस्ट्रैप घटकों के रंगों में से कुछ बदल रहे हैं।
तो यह वास्तव में ग्रे का एक अलग छाया है।
यह नीले रंग की छाया है और नव पट्टी कुछ अलग रंग है।
तो मैं आपको दिखा सकता हूँ कि कैसे है कि सब करने के लिए इससे पहले कि हम किसी भी कोड लिखने शुरू हो जाओ।
सिर्फ इस तथ्य है कि अधिकांश भाग के लिए इन छवियों को एक वेब साइट पर एक महान संसाधन स्पलैश बुलाया से कर रहे हैं बाहर बात करने के लिए एक क्षण ले जाना चाहता हूँ।
तो छप सुंदर उच्च रेज तस्वीरें कि आप जो कुछ भी आप के साथ चाहते हैं कर सकते हैं की एक गुच्छा प्रदान करता है।
आप लाइसेंस यहाँ पढ़ सकते हैं, लेकिन यह बहुत ज्यादा हैं जो आप चाहते हैं।
यह एक क्रिएटिव कॉमन्स लाइसेंस ब्ला ब्ला ब्ला मैं मैं वास्तव में नहीं है कि देखभाल के बारे में यकीन है, लेकिन वास्तव में तस्वीरें कमाल कर रहे हैं और मैं उनमें से इन आठ साल की एक बहुत का उपयोग कर रहा हूँ।
हमारे गैलरी में वास्तव में।
और कहा कि एक छवि है जो यहीं है कि मैं वास्तव में खुद ले लिया एक फोटोग्राफी वर्ग ले लिया है और यह पहली बात मैं ले लिया है कि आधे से अच्छा लग रहा है पर यह एक है छोड़ देता है।
मैं भले ही इन लोगों की तुलना में इतना गर्म नहीं रहा लगता है।
वैसे भी आप इन सटीक एक ही चित्र है जो महत्वपूर्ण नहीं है का उपयोग करना चाहते हैं।
इस सब पर किसी भी छवियों के साथ काम करेंगे।
लेकिन अगर आप सही ही लोगों को चाहते हैं मैं इस फाइल गैलरी M.D में लिंक है कि इस वीडियो के साथ अपलोड कर दिया है और यह भी दो रंग है कि हम गहरे नीले और हल्के भूरे रंग का उपयोग करने के लिए जा रहे हैं को शामिल किया है की सभी को शामिल किया है।
ठीक।
है कि सभी के साथ तो रास्ते से बाहर है अब इस परियोजना पर शुरू हो जाओ।
तो मैं एक खाली फ़ाइल गैलरी है।
एच एम एल।
मैं यहाँ मेरी एच डी एम एल कंकाल में जोड़ देंगे और हम सिर्फ इस छवि गैलरी और पहली बात यह है कि हम क्या करने की जरूरत बूटस्ट्रैप शामिल है फोन करता हूँ।
और मैं बस कॉपी करने के लिए खत्म सीडी एक पुराने परियोजना से समाप्त हो जाती है तो मैं ऐसा करूँगा अभी जा रहा हूँ।
ये रहा।
मैं बूटस्ट्रैप समन्वय को जोड़ने के लिए कर रहा हूँ।
और जब मैं यहाँ हूँ मैं भी bootstraps CSSA और जे queery शहर हड़पने के लिए और है कि हम नव पट्टी पाठ में किया था और नीचे उन यहां डाल दिया तो यह है कि जब हम नव पट्टी को जोड़ने के हम शिकार जाने की जरूरत नहीं है में होगा इन फ़ाइलों के लिए या स्क्रिप्ट टैग के लिए।
तो एक बचाने के लिए और पहली बात यह है कि हम क्या कर सकते हैं हमारे Jumbotron में जोड़ने के लिए है।
यही कारण है कि अच्छा और आसान है।
इसलिए हम एक div होगा और उस वर्ग के लिए किया जाएगा Jumbotron बराबर होती है।
और फिर Jumbotron अंदर एक H1 कि सिर्फ छवि गैलरी का कहना है के साथ शुरू होगा।
हम वहाँ जाते हैं और हम बचाने के लिए और के यकीन है कि यह काम करता है सुनिश्चित दूँगा।
तो यह इस फाइल खुल जाएगा।
इसलिए हम Boucek शामिल है।
हम फ़ॉन्ट परिवर्तन देख रहे हैं।
हम Jumbotron से इस ग्रे देख रहे हैं।
चलो अब यकीन है कि यह एक कंटेनर के अंदर बनाने की तरह इसे यहाँ हम क्या जहां यह सिर्फ स्क्रीन भर में सभी तरह से चला जाता है के बजाय है चलो।
तो हम उस div वर्ग कंटेनर के बराबर होती है क्या करेंगे।
हम वहाँ जाते हैं और हम यह अच्छी तरह से करते हैं और ताज़ा है और हम वापस जाना होगा।
ठीक है तो हम Jumbotron है, लेकिन इस पैरा में जोड़ें।
अब हम वापस आते हैं और आइकन नहीं है, लेकिन है कि एच -1 के नीचे सिर्फ एक पैराग्राफ टैग हम बचा लेंगे है जाएगा।
तुम वहाँ चाहते हैं और हम अब के लिए Jumbotron साथ कर रहे हैं जो कुछ भी पाठ डाल करने के लिए स्वतंत्र महसूस हो रहा है।
तो चलो वापस जाओ और चलो अब नव पट्टी करते हैं और मैं दो कारणों के लिए खरोंच से पर्याप्त बार टाइप करने के लिए नहीं जा रहा हूँ करते हैं।
एक यह है कि यह काफी कोड का एक सा है।
इसके लिए काफी समय लगेगा।
और इस वीडियो।
लेकिन दो तथ्य यह है कि मैं लगभग खरोंच से Ackbar में टाइप नहीं है।
मैं नासकार वीडियो समय के अधिकांश में उल्लेख किया है मेरे कार्यप्रवाह है कि मैं बूटस्ट्रैप साइट या पिछले एक साइट है कि मैं एक नव पट्टी के साथ कर दिया करने के लिए जाना है और मुझे लगता है कि नकल है।
और मैं सिर्फ यह जाँच की है और मैं टुकड़ों है कि मैं नहीं चाहता हूँ से छुटकारा मिलेगा।
मैं में कुछ नए टुकड़े जोड़ें।
तो यह है कि जहां मैं यहाँ क्या करने जा रहा हूँ।
मैं पहले से ही पर्याप्त हिस्सा है कि मैं नव पट्टी में किया था प्रत्येक HTML आवेदन में कहा गया है।
यह ठीक है यहाँ है और मैं बस कॉपी करने के लिए कि में जा रहा हूँ और फिर हम यह थोड़ा tweak हूँ।
तो चलो इसे में कॉपी है और मैं वापस जाना होगा और हम सिर्फ बस ऐसे ही फ़ाइल के ऊपर से ही इस डाल देता हूँ।
और चलो देखते हैं कि हम क्या प्राप्त ताजा कर रहे हैं और हम नव पट्टी करते हैं।
बंद है।
हम यहाँ ब्रांड बदलना चाहते हैं।
हम भी रंग अंत में बदलना चाहते हैं और हमें यकीन है कि यह शीर्ष करने के लिए तय है जो अभी यह नहीं है बनाना चाहते हैं, लेकिन हम वहाँ मिल जाएगा।
चलो वापस जाना और सिर्फ ब्रांड को बदल दें।
तो कॉफी के बजाय मैं मेरा छवियों कहा जाता है कि आप इस आप जो चाहते हैं कॉल कर सकते हैं।
बेशक यकीन है कि यह ठीक काम करता है।
अगले बात मैं आपको दिखाता हूँ एक त्वरित बदलाव हम रंग जहां झपकी या डिफ़ॉल्ट के बजाय दिखाई परिवर्तन करने के लिए कर सकते हैं।
अब हम कविता में यदि बार कर सकते हैं और मैं तुम्हें दिखाता हूँ कि तरह लग रहा है।
हम या अब के लिए अब एक काले रंग मिल उलटा कर दिया है जहां पाठ प्रकाश है और हम एक काले रंग की पृष्ठभूमि मिलता है।
यह अभी भी नीले रंग है कि मैं यहाँ पर लिए जा रहा हूँ नहीं है।
और फॉन्ट भी सफेद नहीं है, लेकिन हम वापस आते हैं और कहा कि ठीक कर दूँगा।
यह अब के लिए काफी करीब है।
अब हम चाहते हैं कि ग्रिड पर वास्तविक छवि गैलरी पर यहाँ नीचे ध्यान केंद्रित कर सकते हैं।
और हम यह कैसे समाधान पर व्यवहार को देखकर शुरू करते हैं।
तो यह तीन छवियों के पार जाने के साथ शुरू होता है और उसके बाद के रूप में मैं आकार बदलने के लिए यह दो से नीचे चला जाता है और फिर इसे दो से नीचे और फिर छोटे आकार यह एक करने के लिए चला जाता है के रूप में आप यहाँ देख सकते हैं पर अंत में चला जाता है।
और हम एक छवि के पार जा रहा है।
चलो इस बड़े आकार जहां हम तीन के पार जा रहा है के लिए ग्रिड की स्थापना द्वारा शुरू करते हैं।
याद है हम 12 इकाइयों की कुल राशि।
तो अगर हम तीन जा रहा भर में हम चार इकाइयों के रूप में उनमें से प्रत्येक को नामित करने के लिए जा रहे हैं चाहते हैं।
तो चलो बस हमारे Jumbotron नीचे है कि सेट अप करते हैं।
फिर भी कंटेनर हालांकि हम सिर्फ div वर्ग करूँगा अंदर पंक्ति के बराबर होती है और फिर उस के अंदर हम div वर्ग के बराबर होती है और हम इसे चार इकाइयों होना चाहते हैं होगा।
इसलिए हम स्तंभ बड़े पानी का छींटा 4 करते हैं और मारा हूँ दर्ज करें और हम बस यहाँ कुछ पाठ डाल द्वारा शुरू कर सकते हैं और उसके बाद मुझे लगता है कि क्योंकि हम चाहते हैं उन लोगों में से तीन नकल करेंगे।
और मैं अभी तक खरोज फिक्सिंग क्योंकि हम सिर्फ एक पल में एक बड़ा परिवर्तन करने के लिए जा रहे हैं के बारे में चिंता नहीं होगी।
लेकिन ताज़ा है और हम उन तीन स्तंभों में जा मिलता है।
तो अगली बात यह है कि हम क्या करना चाहते हैं कुछ छवियों जा रहा है और सब शुरू है, लेकिन सिर्फ अपने गोल्डन गेट ब्रिज तस्वीर के एल ले रही है और हम पाठ के बजाय एक छवि टैग को जोड़ने के लिए जा रहे हैं मिलता है।
तो छवि स्रोत के बराबर होती है कि गोल्डन गेट ब्रिज आप बीमार हैं और मैं सिर्फ इतना है कि तीन बार पेस्ट और बचा लेंगे।
और अगर हम वापस जाने के लिए हम एक समस्या है जो कि उस छवि को बहुत बड़ा है फिर भी हम उन तीन स्तंभों किया है।
हमारी छवि के अंदर हमारे स्तंभ के नीचे यह सिकुड़ नहीं है नहीं रह गया है।
आप देख सकते हैं कि हम क्या यह एक छोटा सा और बूटस्ट्रैप जोड़ने जोड़ने के लिए है तय करने के लिए क्या करेंगे।
मैं तुम्हें अभी तक यह चारों ओर यह अच्छा सा सीमा बनाने के लिए दिखाया नहीं किया है और यह एक थंबनेल कहा जाता है।
हम सब करने की जरूरत बराबर वर्ग के साथ एक div थंबनेल के लिए और फिर जो भी छवि हम अंदर की यह स्तंभ के अंदर फिट करने के लिए नीचे पहुंचा दिया जाएगा डाल के बारे में है।
और यह भी यहाँ इस छोटे से सीमा हो जाता है जो मुझे लगता है कि बहुत अच्छा लग रहा है।
तो यह है कि मैं वास्तव में क्या हम उन अभी वापस करने के लिए एक एकल छवि जाने के लिए और एक div वर्ग में जोड़ने के लिए के साथ किया है से छुटकारा पाने के लिए जा रहा हूँ करने के लिए थंबनेल के बराबर होती है और ठीक से किया है।
और हम छवि के आसपास लपेटो कि और बचाने के लिए।
अब अगर हम ताज़ा करें।
अगर हम एक ही छवि है कि ग्रिड के अंदर जगह की उचित राशि लेता मिलता है तो आप देखेंगे।
यह स्तंभ है और यह यह चारों ओर एक छोटी सी सीमा है और छवि जो महान है विशाल नहीं है।
तो चलो यकीन है कि यह काम करता है अगर हम इस नकल बनाते हैं।
तो यह एक छवि के यह तीन बार नकली और देखते हैं कि क्या होता है ताज़ा है।
और वहाँ हम चले।
हम तीन छवियों है।
मुझे आगे जाना है और छह में अधिक जोड़ देंगे।
इसलिए हम कुल नौ जैसे हम यहाँ क्या करना है।
और हम वास्तव में अलग पंक्तियों को जोड़ने की जरूरत नहीं है।
हम सिर्फ उन सब को एक ही पंक्ति में डाल सकते हैं।
इसलिए सभी तीन बार हम करने के लिए अब तक क्या किया है और बचा है कि नकल।
यही कारण है कि हमें नौ छवियों दे देंगे।
और अगर मैं ताज़ा आपको लगता है कि वे स्वत: अगली पंक्ति में लपेट कर देखेंगे।
इसलिए हम केवल एक पंक्ति है और उन स्तंभों आप चिकित्सकीय ओपन स्कूल जानते में जोड़ने के लिए है।
हम प्रत्येक छवि चार इकाइयों को लेने के लिए चाहते हैं, तो यह है कि तीन पंक्ति प्रति मतलब है और फिर हम छवियों की तीन पंक्तियों की जरूरत है।
मैं वापस जाने के लिए और वीडियो के अंत में इन सभी छवि आप कल्पित बौने बदल देंगे।
मैं तुम्हें देखना है कि बनाने के लिए नहीं करना चाहती।
बहुत ही रोचक सिर्फ कॉपी करने और चिपकाने लेकिन इस ग्रिड के आराम पर ध्यान केंद्रित करते हैं।
इसलिए अभी के रूप में जल्द ही एक हिट माध्यम के रूप में यह एक छवि को जाता है, जो भर में हम क्या चाहते हैं क्या हम देख रहे हैं कि मध्यम ब्रेकप्वाइंट में भर दो छवियों है नहीं है।
और फिर मध्यम ब्रेक प्वाइंट है जो वहाँ है हम छोटे मारा है और हम अभी भी यह 2 पर रहने के लिए चाहते हैं के बाद।
इसलिए हमारा में ठीक करने के लिए है कि या तो इसे तुरंत बड़े ब्रेक प्वाइंट या मध्यम ब्रेकप्वाइंट और 1 पर तो छोटे और अतिरिक्त छोटे रहता है पर एक करने के लिए चला जाता है।
हम यहाँ में वापस जा सकते हैं और हम इन आप का चयन जानते सब बदल और हिट कमान घ उनके लिए बड़े कॉल के सभी उदाहरणों का चयन करें और फिर मैं छोड़ दिया है या सही तीर कर्सर ले जाने के लिए मारा हूँ करेंगे।
अब मैं उन्हें एक बार में सभी को संपादित कर सकते हैं।
और मैं स्तंभ मध्यम छह में जोड़ सकता है कि मुझे क्या करना चाहते हैं, क्योंकि हम Perrow करना चाहते हैं और है कि काम करेंगे।
और अगर मैं वापस जाने के लिए और ताज़ा आप वे पंक्ति प्रति 3 में रहने देखेंगे और फिर मैं मंझला ब्रेकप्वाइंट मारा और वे 2 के पास जाओ।
लेकिन तब मैं छोटी हिट और यह एक करने के लिए और हमारे लिए कूदता है जब हम छोटे समाधान 2 पर रहता मारा।
तो यह है कि स्तंभ छोटे से 6 के बजाय स्तंभ मध्यम छह कर की तुलना में हम क्या कर सकते ठीक करें और फिर इस संस्करण ताज़ा वापस जाने के लिए।
हम मध्यम मारा।
हम दो के पास जाओ।
हम छोटे मारा।
हम 2 पर रहने के लिए और फिर हम अतिरिक्त छोटा करने के लिए जाना है और हम पंक्ति प्रति 1 1 छवि पर रहे हैं।
उत्तम।
तो यह है कि हम सभी को ग्रिड के लिए क्या करना है और हम यहाँ कार्यक्षमता के अधिकांश के साथ कर रहे हैं।
कि पाने के लिए बहुत बहुत जल्दी ऊपर और चल रहा है।
क्या हम पर ध्यान केंद्रित करना चाहते हैं अब रंग और भी माउस के कुछ कर रहे हैं।
मैं आपको दिखा कर कैसे शुरू हम बूटस्ट्रैप का उपयोग कर प्रतीक जोड़ देंगे।
इतने पर बूटस्ट्रैप पाने के लिए अगर आप घटकों के लिए जाना वहाँ शीर्ष तक इन ग्लिफ़ प्रतीक हैं और उनमें से एक गुच्छा से लेने के लिए है।
और हम एक और एक है कि मैं का उपयोग कर रहा हूँ कि हम का उपयोग करना चाहते हैं मिलेगा।
के लिए मुझे लगता है कि यह कैमरा है मैं सिर्फ एक खोज कर देंगे।
तो क्या यहां इस कैमरे की और मुझे लगता है कि कैमरे का उपयोग नहीं कर रहा हूँ।
यह थोड़ा अलग है।
एक कि मैं उपयोग कर रहा हूँ अधिक रेट्रो कैमरा है और मैं आपको बताएंगे कि कैसे जोड़ है कि में करेंगे।
यह वास्तव में बूटस्ट्रैप का हिस्सा नहीं है लेकिन हम नियमित रूप से कैमरे कि बूटस्ट्रैप के साथ आता है के साथ शुरू करते हैं।
इसलिए हम क्लिफर्ड क्हान लिखने और फिर कॉन पानी का छींटा कैमरा के साथ चलते हैं।
और अगर आप आगे नीचे स्क्रॉल आप देख सकते हैं, जहां वे जहां एक वर्ग कोन के साथ के बराबर होता है कि यह कैसे उपयोग अंतराल बनाने के लिए और फिर इसे glyph ग्लिफ़ प्रतीक का नाम पानी का छींटा कर सकते हैं समझाओ।
तो चलो इस अवधि की नकल करते हैं और हम एच-1 के अंदर यह कर रहा है सिर्फ यह एच-1 के बहुत शुरुआत में डाल द्वारा शुरू करेंगे और हम एक त्वरित ए-कॉन पानी का छींटा कैमरा चाहते हैं और हम बचाने के लिए और ताज़ा करेंगे।
और बस की तरह है कि तुम वहाँ में एक कैमरा मिल सकता है।
और हम इसे गद्दी के माध्यम से कर सकते हैं या तो कर सकते हैं, तो हम अंतरिक्ष करना चाहते हैं या हम सिर्फ सही वहाँ एक अंतरिक्ष जोड़ सकते हैं।
और हम एक अंतरिक्ष हम नव पट्टी के लिए सटीक एक ही बात कर सकते हैं और मैं एक बुलाया जाता है कि फोटो डबल जाना यहाँ तक की जांच में इस्तेमाल किया।
आप फोटो चित्र के लिए इस पृष्ठ पर एक खोज कर सकते हैं।
वो रहा।
यह अगर यह तस्वीर है पानी का छींटा कर सकते हैं जा सकते हैं।
तो हम यहीं नव पट्टी ब्रांड के लिए ऊपर जाना होगा और हम फिर से उस अवधि में पेस्ट करें।
और फिर अवधि के अंदर वर्ग तस्वीर पर क्लिक किया जाना चाहिए और हम एक जगह के रूप में अच्छी तरह से जोड़ देंगे।
हम वापस हमारी साइट पर जाना ताजा कर रहे हैं और अब हम एक छोटी सी तस्वीर वहाँ है।
और हम भी कैमरा है।
अगले है नव पट्टी से निपटने और हम इसे शीर्ष करने के लिए तय है ताकि आप अभी देख सकते हैं बनाकर शुरू करेंगे।
यही कारण है कि हमारे स्क्रॉल दूर झपकी।
लेकिन समाधान पर यह वहाँ रहता है।
और कहा कि यह एक एकल वर्ग हमारे नव पट्टी को जोड़ने के लिए है कि हम क्या करने के लिए।
तो यहीं हम नव पट्टी डैश डैश तय शीर्ष चाहते हैं और बचाने के लिए।
और अगर हम ताजा कर रहे हैं आप इसे शीर्ष करने के लिए तय है देखेंगे।
वहाँ एक छोटा सा मुद्दा है जो कि हमारे सामग्री में थोड़ा सा इसके पीछे अब है और हम इसे Jumbotron ऊपर है कि सामान्य रिक्ति है चाहता हूँ।
हम क्या करने की जरूरत है हमारे शरीर के लिए गद्दी का एक छोटा सा जोड़ने के लिए है और यह 70 पिक्सल होना होता है।
बूटस्ट्रैप डॉक्स आपको बता यदि आप कभी गद्दी के 70 पिक्सल भूल जाते हैं कि हम क्या चाहते है कि अब चार की चौड़ाई है कि।
इसलिए हम यहां से जाना होगा और हम अब एक स्टाइल शीट बना देंगे और मैं गैलरी Dotsie एसएस उसके बाद का चयन शरीर गद्दी शीर्ष अंदर 70 पिक्सल इसे कहते हैं और करेंगे और फिर हम उस जोड़ने के लिए है कि स्टाइल शीट जो गैलरी सीएस है से जुड़े जरूरत एस
अब हम सुनिश्चित करें कि काम कर रहा है बनाते हैं।
हम वहाँ चलें।