यह सबक हम विशेष रूप से बूटस्ट्रैप ग्रिड के साथ काम कर रहे हैं वहाँ दो मुख्य विशेषताएं मैं उजागर करना चाहते हैं जारी रखेंगे में वापस स्वागत है।
पहला यह है कि मैं चार अलग अलग आकार है कि मैं संक्षेप में उल्लेख किया है पता करना चाहते है।
हम स्तंभ Elgie के साथ काम कर रहा है कि क्या मतलब है के बारे में बात नहीं की है और वहाँ तीन अन्य आकारों इस के साथ काम कर रहे हैं।
उन्होंने यह भी बताएंगे कि कैसे हम अन्य ग्रिड के अंदर घोंसला ग्रिड आगे उन 12 इकाइयों को छोटे टुकड़ों में विभाजित करने के लिए कर सकते हैं।
लेकिन चार आकारों मैं वापस ब्राउज़र करने के लिए जा रहा है और डेमो है कि हम पिछले सबक में बनाया पर एक नज़र लेने के द्वारा शुरू करने के लिए जा रहा हूँ के बारे में बात करके हालांकि शुरू करते हैं।
इसलिए हम दो पंक्तियों में से एक है कि 12 कॉलम एक से तीन के पार जा रहा है और घड़ी के रूप में मैं खिड़की बातें बस ठीक पैमाने आकार बदलने क्या होता है है और फिर हम एक ब्रेक प्वाइंट यहीं मारा जहां प्रत्येक स्तंभ में सब कुछ बदल जाता है।
अब एक पूर्ण 12 इकाइयों के पार जा रहा लेता है और वे एक दूसरे के शीर्ष पर ढेर और के रूप में वे आकार बदलने रखने के लिए आप किसी भी परिवर्तन वास्तव में नोटिस नहीं होगा।
वे सभी 12 इकाइयों लेने के लिए और एक दूसरे के शीर्ष पर ढेर करने के लिए जारी है।
लेकिन वहाँ वास्तव में चार अलग अलग आकार है कि हम तो हम चार अलग अलग लेआउट हो सकता है निर्दिष्ट कर सकते हैं।
अभी यह एक मोबाइल लेआउट जो अतिरिक्त छोटे पहुँच है।
तो फिर हम बहुत छोटा है जो की तरह एक गोली माध्यम है जो यहीं है बाहर करना और उसके बाद मिलता है।
यह एक लैपटॉप या एक छोटे ब्राउज़र विंडो और फिर बड़े हम यहीं है, जिस पर होगा।
तो यह यहीं छोड़कर एक फर्क इतना है की तरह जब हम यहां तक ​​कि बड़े होने के बीच जाना नहीं लगती है।
लेकिन वहाँ चार आकारों हैं और हम उन आकारों में से हर एक के लिए अनुपात और अनुपात में निर्दिष्ट कर सकते हैं।
इसलिए ग्रिड विकल्प के तहत बूटस्ट्रैप नाव यहां ग्रिड प्रणाली आप देख सकते हैं पर एक मेज वहाँ है और यह हमें चार अलग अलग आकार से पता चलता है।
तो वहाँ छोटे उपकरणों जो गोली मध्यम उपकरणों रहे हैं की तुलना में फोन जैसे छोटे उपकरणों के अतिरिक्त बड़ी उपकरणों या बड़ा डेस्कटॉप कि अधिक से अधिक बारह सौ पिक्सल चौड़ा कर रहे हैं डेस्कटॉप और वे एक एक उपसर्ग है कि हम इतने कॉलम का उपयोग वास्तव में छोटा है का उपयोग कर सकते है।
एस.एम. छोटे एमडी माध्यम है और एलजी जो कि हम क्या उपयोग किया गया है बड़ी है।
तो हम कहते हैं कि मैं अपने लेआउट बड़े ब्रेकप्वाइंट में ही रहना चाहते हैं कि चलो।
और फिर जब हम यहीं मध्यम करने के लिए स्विच मैं इन 12 कॉलम है कि प्रत्येक एक इकाई को ले जाना चाहता हूँ।
मैं उन्हें एक के बजाय दो इकाइयों को लेना चाहते हैं।
इसलिए हम छह के पार जाने के साथ समाप्त होगा।
और फिर एक और 6 नीचे।
तो चलो उस पर ध्यान केंद्रित करने और चीजों को आसान बनाने के लिए करते हैं।
मैं वास्तव में अब के लिए हमारी दूसरी पंक्ति से छुटकारा मिल जाएगा।
इतना सब है कि हम यहाँ यह सही है।
तो जब हम सही वहाँ इस माध्यम ब्रेकप्वाइंट मारा मैं ऐसा नहीं करना चाहता हूँ।
इसके बजाय मैं चाहता हूँ छह कॉलम के पार जा रहा है कि क्या करना है।
मैं सिर्फ एक वर्ग में जोड़ें।
इसलिए मैं हर एक के लिए है कि क्या करेंगे और यह स्तंभ मध्यम होने जा रहा है।
तो जब यह ग्रिड मध्यम आकार सेट कर दिया जाता है कि हम उन्हें एक दो इकाइयों को लेने के लिए चाहते हैं और हम बचा लेंगे।
अब चलते हैं और ताज़ा करते हैं।
यह पूर्ण आकार बनाते हैं।
कुछ भी नहीं बदलता क्योंकि हम बड़े आकार पर रहे हैं।
लेकिन अब जब मैं यहीं मध्यम करने के लिए स्विच।
सूचना है कि वे प्रत्येक अब दो इकाइयों लेने के लिए और हम छह भर में जा मिलता है।
और अगर मैं इसे नीचे रख सिकुड़ हम तो छोटे ब्रेकप्वाइंट मारा और कहा कि जहां यह स्विच जहां प्रत्येक स्तंभ अब पूरे 12 इकाइयों भर में सभी तरह से चला जाता है और वे एक दूसरे के शीर्ष पर ढेर है।
तो चलो वापस जाओ और के हमारे उदात्त करने के लिए वापस जाने के लिए और हमारे पुराने ग्रिड को पुनर्जीवित करते हैं पढ़ें।
तो हम इस एक से छुटकारा मिल जाएगा क्योंकि यह है कि आम नहीं है के लिए वास्तव में 12 विभिन्न घटकों के पार जा रहा है।
आम तौर पर आप तीन या चार कभी कभी छह लेकिन 12 अलग-अलग कॉलम के साथ काम कर रहे हैं बहुत दुर्लभ है।
तो चलो इस एक के लिए वापस जाओ और हम क्या करेंगे कोशिश करते हैं और बहलाना कि ग्रिड यहाँ ओलाफुर अर्नोल्ड के दौरे के समय से बाहर खेलने के लिए है।
तो यह चार बजे शुरू होता है के पार जा रहा है।
तो फिर हम नीचे हटना।
एक मध्यम ब्रेक प्वाइंट नहीं है और हम अभी भी चार पर रहे और फिर हम छोटा सा ब्रेक बात पर आते हैं और हम भर में दो के पास जाओ।
और फिर मोबाइल एक्स या छोटे से एक है।
तो यह है कि हम क्या करने की कोशिश और सामग्री सिर्फ संरचना नहीं बहलाना करेंगे।
इसलिए हम यहाँ वापस जाना होगा।
और हम चार के पार जाने के साथ शुरू करना चाहते हैं।
इसका मतलब है कि हर एक को तीन इकाइयों तक ले जाता है और फिर हम पाठ यहाँ बदल सकते हैं।
और हम सिर्फ यह करने के लिए या तारीख का कहना है चलो।
तो अगर हम ताजा थे हम चार स्तंभों जा रहा है जो भर में हम जो वास्तव में है क्या यह चार के रूप में बाहर शुरू होता है के पार जा कर देना चाहिए था।
और फर्क सिर्फ वास्तव में वास्तविक सामग्री है।
इसलिए प्रत्येक स्तंभ के बजाय हम सिर्फ एक एच तीन एक पैरा एक बटन और अन्य जो भी सामग्री हम एक छोटे से एचआर ऐसा लग रहा है की जरूरत जोड़ना होगा और हम अभी भी एक ही अंतर मिलता था।
ठीक है।
तो अगली ब्रेक प्वाइंट जब हम मध्यम करने के लिए मिलता है।
यह चार पर रहता है।
तो क्या आप सोच सकते हैं कि हम इतने मध्यम ब्रेक प्वाइंट को निर्दिष्ट करने की ज़रूरत है जब हम इस हिट वे अभी भी एक तीन इकाइयों को लेना चाहिए।
हम वापस उदात्त लिए जा सकते हैं और उस जोड़ने के लिए और फिर उन्हें मध्यम तीन कॉल और बचाने के लिए और वे प्रत्येक तीन इकाइयों हम मध्यम हिट पर शुरू और वे तीन इकाइयों पर रहने के लिए और फिर हम छोटे सिर और अब वे 12 इकाइयों को फिर से कर रहे हैं।
और क्या हम इस के बाद के लिए चाहते हैं कि जब हम छोटे आकार मारा वे अब प्रत्येक को छह इकाइयों ले तो हम यहाँ में जाने के लिए और जोड़ने के उस स्तंभ छोटे 6 में कर सकते हैं।
इसलिए बड़े आकार इनमें से हर एक को 25 प्रतिशत 12 में से तीन इकाइयों मध्यम आकार पर ले जाता है।
वही चीज।
वे 25 प्रतिशत तक ले और फिर छोटे आकार जो गोलियों के लिए है पर वे एक तो 50 प्रतिशत ले।
इसलिए हम एक ताज़ा तीन मिनट के लिए और फिर तीन इकाइयों को ले तो हम छोटे मारा।
और अब वे एक छह इकाइयों को लेने के लिए और फिर हम अतिरिक्त छोटे था।
तब वे स्वत: पूर्ण 12 इकाइयों को ले जो कि हम क्या चाहते हैं।
आप देख सकते हैं कि जब हम छोटे मारा हम उन्हें भर में जा रहा एक इकाई को लेना चाहते हैं।
ठीक है।
इसलिए हम चाहते हैं कि वहाँ नीचे एक छोटा सा परिवर्तन है, अगर हम उदात्त करने के लिए वापस जाने के लिए हम कर सकते हैं।
आप देखेंगे कि हम बड़े और मध्यम के लिए इस तीन इकाइयों निर्दिष्ट कर रहे दो बार देखेंगे।
हम वास्तव में बड़े स्तंभ तीन से छुटकारा मिल सकता है और सिर्फ वहाँ में मध्यम डाल दिया है और बूटस्ट्रैप कि क्योंकि हम मध्यम स्थापित कर रहे तीन होने का पता चल जाएगा और हम स्पष्ट रूप से यह सिर्फ बड़े लगेगा कि हम क्या माध्यम के लिए सेट और लागू की स्थापना नहीं कर रहे हैं बड़ा करने के लिए यह।
तो यह उसी तरह काम करता है।
कुछ भी नहीं बदला।
मैं पहले से ही ताजा समान दिखता है हमारे मध्यम ब्रेकप्वाइंट अभी भी वहाँ है और हमारे छोटे से काम करता है।
इसलिए हम चाहते हैं कि दो बार निर्दिष्ट करने के लिए नहीं है।
तो बस मुझे N.Z. आते हैं हम उस से छुटकारा मिल गया है और यह ठीक उसी तरह काम करता है।
और वास्तव में अगर हम एक नजर हम वेब साइट पर जाने से लेते हैं।
मुझे यकीन है कि अगर हम इनमें से प्रत्येक का निरीक्षण तुम वहाँ हम चले देखेंगे।
कॉलम छोटे छह स्तंभ मध्यम तीन।
वास्तव में क्या हम अब है कि हम उन चार अलग अलग आकार को कवर किया है था।
उम्मीद है कि आप देख सकते हैं कि बहुमुखी और उपयोगी ग्रिड प्रणाली हो सकता है।
चलिये वापस चलते हैं।
और अब मैं घोंसले के शिकार ग्रिड को संबोधित करेंगे।
चलो लगता है कि यह पहला स्तंभ के बजाय यहां मैं यह आधे में विभाजित है और उस की बाईं ओर कुछ और सही पक्ष पर कुछ करना चाहते हैं।
मैं वास्तव में जाना है और वहाँ के अंदर एक और पंक्ति में जोड़ सकते हैं।
तो वर्ग पंक्ति के बराबर होती है।
और फिर उस पंक्ति के अंदर मैं एक div में स्तंभ और सब सिर्फ बहुत बड़ी के बराबर वर्ग के साथ अब स्तंभ बड़े छह के लिए जोड़ सकते हैं और एक दूसरे के कॉलम बड़े 6 और मैं बस कुछ पाठ यहाँ आधे रास्ते और दूसरे आधे लिख देंगे सकते हैं।
चलो यह पहली छमाही और दूसरे आधे को बदलने के लिए है और हम बचाने के लिए और उन्हें एक क्लासिक गुलाबी दे देंगे।
तो क्या अब हम किया है कि हम तीन या चार अभी भी पार जा भर में जा रहा होगा।
एक दो तीन चार और पहले एक में हम में एक और पंक्ति जोड़ने और हम कुछ कहने के पहले छह का उपयोग कर रहे हैं और हम कुछ और बचाने के लिए या ताज़ा कहने के लिए दूसरे छह उपयोग कर रहे हैं द्वारा एक और 12 इकाइयों में विभाजित किया है ।
वहाँ तुम जाओ और यह और भी अधिक स्पष्ट करते हैं।
मुझे उनके एक अन्य वर्ग देते हैं।
चलो यह नारंगी कहते हैं।
अभी तक मौजूद नहीं है।
और यह नारंगी दिखाई परिभाषित किया है और यह पृष्ठभूमि नारंगी होगा और हम एक पिक्सेल ठोस लाल और फिर वास्तव में दश्त ठीक कर में जोड़ देंगे।
ताज़ा करे जैसा कि आप देख सकते हैं अब हम अभी भी इन चार बातों के पार जा रहा है।
हर एक को तीन इकाइयों तक ले जाता है, लेकिन हम में उस पंक्ति जोड़कर छह इकाइयों और छह इकाइयों में पहली बार एक विभाजित है और आप पंक्ति जोड़ने के लिए है।
तुम बस यह कर शुरू नहीं कर सकते हैं, जहां आप एक स्तंभ के बजाय एक स्तंभ है।
वहाँ एक पंक्ति में होना चाहिए।
और हम एक और करते हैं।
के अंदर छह छोटे टुकड़ों में यहीं यह पिछले एक डाल दिया।
इसलिए हम अंदर एक पंक्ति जोड़ने के लिए की है कि div वर्ग पंक्ति के बजाय बराबर होती है वहाँ की जरूरत है।
हम एक और div की जरूरत है और हम इनमें से छह होगा जहां हम स्तंभ बड़े दो प्रत्येक दो 12 इकाइयों से बाहर ले जा रहा है।
और हम छह चाहते हैं और फिर हम हर एक पर जाने के लिए और है कि नारंगी वर्ग में जोड़ने के लिए सिर्फ इतना है कि हम उन्हें देख सकते हैं दूँगा।
ठीक।
इसलिए हम चार बड़े स्तंभों पहले हम आधे में विभाजित के पार जा रहा है।
पिछले एक हम छह टुकड़ों में विभाजित है और आप वास्तव में कुछ भी नहीं देख सकते हैं तो हम वहाँ में किसी भी पाठ नहीं डाली।
तो चलो करते चलते हैं।
या नहीं बल्कि यह वास्तव में सिर्फ एक या वर्ग नारंगी ऊंचाई के साथ दे रहा है।
चलो उन्हें प्रत्येक 50 पिक्सल कर दूं।
और अगर मैं ताज़ा आप देखते हैं कि अब सब कुछ नारंगी कि वर्ग नारंगी ऊंचाई में 50 पिक्सल तक ले जाता है।
इसलिए हम इन चार समान रूप से विभाजित शीर्ष स्तर कॉलम के अंदर हमारे दो समान रूप से विभाजित कॉलम और फिर हमारे छह समान रूप से विभाजित कॉलम है।
तो यह है कि ग्रिड प्रणाली के महत्वपूर्ण टुकड़ों में से सभी के लिए है।
संक्षेप में हम हर पंक्ति में 12 इकाइयों है।
आप उन्हें अलग फिर भी आप की तरह।
वहाँ चार आकार रहे हैं बड़ा मध्यम छोटा अतिरिक्त छोटे और आप उन चार ब्रेक प्वाइंट उन चार अलग-अलग आकारों में से किसी पर उन 12 इकाइयों को पुन: असाइन कर सकते हैं।
और है कि कैसे आप इन अच्छा उत्तरदायी लेआउट और आम तौर पर पैटर्न आप देखते हैं कि वह यह है कि मोबाइल साइटों पर के साथ खत्म होता है।
तो अतिरिक्त छोटे आकार पर सबसे साइटों से अपनी सामग्री को सिर्फ एक दूसरे की तरह हम यहाँ होगा की शीर्ष पर ढेर है, तो मैं यह नीचे हटना होगा।
इस मोबाइल जहाँ आप एक ही पंक्ति में सामग्री के कई टुकड़े की जरूरत नहीं है पर आम लेआउट है।
ठीक।
के उदात्त करने के लिए वापस जाओ।
यकीन है कि मैं तीन मुख्य उद्देश्यों के बारे में बात करें।
इसलिए हम उद्देश्य ग्रिड प्रणाली के बिंदु हमें चीजों को बाहर करना मदद करता है के बारे में बात की थी।
यह विस्मयकारी है।
चार अलग-अलग आकारों को समझे।
उन बड़े मध्यम छोटी सी अतिरिक्त छोटे और फिर सही नेस्टेड ग्रिड रहे हैं।
और कहा कि हम यहाँ क्या कर रहे हैं जहां हम एक स्तंभ के बजाय एक पंक्ति जोड़ने और फिर हम अगले वीडियो में आगे और उप कॉलम के साथ उस पंक्ति को भरने कर सकते हैं।