हमने इस अध्याय में वापस आ गया और बूटस्ट्रैप ग्रिड प्रणाली का प्रदर्शन और ग्रिड प्रणाली शायद नंबर एक कारण यह है कि लोगों रूपों झपकी घंटे बूटस्ट्रैप इस्तेमाल होता है जाएगा।
बटन अच्छा शैलीगत परिवर्तन हम बूटस्ट्रैप के साथ कर सकते हैं, लेकिन बूटस्ट्रैप ग्रिड प्रणाली हमारे पूरे आवेदन के कंकाल के रूप में कार्य करेगा।
यह हमें हमारे आवेदन करने के लिए संरचना को जोड़ने और बिछाने के लिए बाहर के लिए एक बहुत ही आसान तरीका है।
तो मुझे आप आप ग्रिड प्रणाली के साथ क्या कर सकते हैं के कुछ उदाहरण दिखाते हैं।
मैं बूटस्ट्रैप पूर्व प्रेमी से खुला पहले एक यहाँ एक पानी के घड़े के लिए एक उत्पाद का पेज है और नीचे स्क्रॉल कुछ साइटों है।
सूचना है यहाँ बाहर करना।
हम कंधे से तीन आइटम पक्ष है और फिर भी वे यहाँ आकार बदलने के रूप में वे नीचे पैमाने पर और फिर जब मैं गोली आकार मारा वे एक दूसरे के शीर्ष पर ढेर नोटिस।
तो यह है कि काम पर बूटस्ट्रैप ग्रिड प्रणाली जहां हम एक और समान प्रभाव के रूप में इस यहीं है।
वे पैमाने और फिर वे टैबलेट और मोबाइल के आकार पर हो चुकी है।
यहाँ एक और उदाहरण है।
इस आइसलैंडिक संगीतकार और ओलाफुर Arnolds है और यह इस साइट पर नीचे स्क्रॉल है।
हम कुछ सामग्री है कि यहाँ आप इसी तरह लेआउट देख सकते हैं कि ग्रिड प्रणाली के साथ बनाया गया है है, लेकिन यह सिर्फ इतना है कि इस के रूप में अच्छी तरह से एक ग्रिड प्रणाली के साथ बनाया गया है नहीं है।
यह यहां यह सामग्री।
ये टूर यहां तारीखें।
असल में ग्रिड प्रणाली का उपयोग करते हुए हम कह सकते हैं कि हम कुछ सामग्री तो हम भी इसे उपयोग कर सकते हैं कहते हैं कि हम इनमें से हर एक को चाहते हैं जब तक हम हिट स्क्रीन की चौड़ाई का 25 प्रतिशत तक ले करने के लिए स्क्रीन के 100 प्रतिशत तक ले जाना चाहता हूँ मोबाइल पक्ष या प्रत्येक के लिए गोली का आकार अब 50 तक ले और फिर जब हम मोबाइल मारा वे एक 100 प्रतिशत तक ले।
एक ही बात यहाँ किया।
यह हमें टुकड़ों में विभाजित स्क्रीन के साथ कि और पिकअप हम कितने टुकड़े चाहते हैं।
हमारे अपने तत्वों के प्रत्येक takeup और यहां पिछले एक हम पहले से ही देखा है करने के लिए।
यह रचनात्मक टिम रेगिस्तान यहाँ नीचे स्क्रॉल इसी तरह की सामग्री कहा जाता है।
यहाँ ग्रिड प्रणाली और यहाँ के रूप में अच्छी तरह से है।
तो यह सब ग्रिड प्रणाली के साथ किया जाता है।
यह तो वास्तव में महत्वपूर्ण बहुत रोमांचक सामान सब के सब।
यह हमें हम बूटस्ट्रैप के बिना करना होगा क्या की तुलना में इतनी आसानी से बातें बाहर रखना मदद करता है।
इसलिए हम bootstraps ग्रिड प्रणाली और बहुत ज्यादा हर आवेदन हम बूटस्ट्रैप का उपयोग कर बनाने का उपयोग कर सकता हूँ।
और मुझे तुम उनमें से एक दिखाते हैं।
यह हमारे यो शिविर आवेदन और सूचना है कि हम भर के लिए कैंप का एक ग्रिड है।
और मैं स्क्रीन सूचना है कि वे पैमाने आकार और फिर हम पार और फिर मोबाइल के लिए नीचे दो के लिए जाने के रूप में।
हम भर में एक के पास जाकर यह मोबाइल लेआउट का उपयोग करने के लिए एक बहुत अच्छा आसान है।
तो यह है कि सिर्फ एक जगह है जहां हम एक ग्रिड प्रणाली का उपयोग करेंगे।
अब हम कुछ ग्रिड प्रणाली इतनी पूर्ण स्क्रीन इस विंडो का उपयोग कर कोड लिखने में शुरू हो जाओ और मूल्यांकन टैब के अंतर्गत बूटस्ट्रैप डॉटकॉम पाने के लिए वापस जाओ।
आप ग्रिड प्रणाली पर क्लिक कर सकते हैं।
वहाँ काफी ग्रिड प्रणाली के लिए एक सा है, लेकिन मैं यहाँ सिर्फ 12 एक ही नंबर ओर इशारा करते हुए शुरू करने के लिए जा रहा हूँ।
यह वास्तव में कैसे काम करता है ग्रिड प्रणाली के लिए महत्वपूर्ण है।
तो हर कंटेनर और बूटस्ट्रैप 12 विभिन्न स्तंभों में विभाजित किया जा सकता है और फिर ग्रिड प्रणाली हम उन 12 इकाइयों प्रत्येक तत्व लेना चाहिए की कितने चुन सकते हैं का उपयोग कर।
तो इस मामले में ऐसा लगता है कि वे कुछ 12 इकाइयों के बारे में 10 छुड़ा ले रही है।
और फिर यहाँ दो से अधिक 12 इकाइयों से बाहर या नौ और 3 हो सकता है, लेकिन वे कुछ अनुपात जहां वे सही पक्ष पर बाईं तरफ उन 12 में से अधिक है और फिर 12 में से एक छोटा सा अंश किया है।
तो अगर हम शिविर के लिए वापस जाना यह हमारे कंटेनर यहीं है।
और इनमें से प्रत्येक एक 12 इकाइयों के बाहर हर एक को तीन इकाइयों तक ले जाता है।
इसलिए हम चार बराबर कॉलम के साथ खत्म होता है और फिर हम इसे यहीं नीचे हटना।
अब वे प्रत्येक 12 में से छह इकाइयों ले।
तो फिर उस नंबर 12 बहुत महत्वपूर्ण है।
अब हम सही में चलते हैं।
हमारे बहुत पहले ग्रिड।
तो मैं एक फ़ाइल बना दिया है ग्रिड एच टी एम एल करता है यह bootstraps एसएस फ़ाइल के लिए छोड़कर खाली है और शुरू करने के लिए हम एक कंटेनर को परिभाषित करने की जरूरत है।
जब भी हम एक Boucek ग्रिड यह एक कंटेनर के अंदर होने की जरूरत का उपयोग करें।
तो वर्ग कंटेनर के बराबर होती है।
और पहली बात यह है कि हम क्या करने की जरूरत प्रत्येक पंक्ति के बजाय पंक्ति के बराबर वर्ग के साथ एक और div मिल रहा है।
हम 12 इकाइयों से लेने जाना है।
तो क्या हम ऐसा करने से शुरू करने जा रहे हैं सिर्फ एक 50 से 50 विभाजन कर रही है कि हम 1 div और फिर एक और div है कि 12 में से 6 तक ले जाता है कि 12 में से 6 तक ले जाता होगा।
तो चलो कि अब करते हैं।
हम एक div जोड़ देंगे और उसके बाद मैं भी अपने दूसरे विभाजन जोड़ देंगे और अभी यह सिर्फ दो उपकरणों खाली कर रहे हैं।
आप काम करने के लिए नहीं जा रहे हैं।
लेकिन मैं क्या करूँगा पहले एक के लिए एक वर्ग को जोड़ने और यह एक छोटा सा अजीब स्तंभ एक बड़ा छह दिखेगा और हम यहाँ एक ही बात करूँगा है।
कक्षा स्तंभ बड़े छह बराबर होती है।
तो फिर हम यहाँ में कुछ सामग्री जोड़ देंगे।
वे सिर्फ स्तंभ बड़े छह कहेंगे।
इधर भी ऐसा ही है।
और जैसा कि मैं क्या बचा है और हम वास्तव में बहुत ज्यादा नहीं देखेंगे हम ग्रिड में ही नहीं दिख रहा है।
तो यह है कि मैं एक स्पष्ट शैली टैग की बजाय यहां एक वर्ग को परिभाषित करेंगे बनाने के लिए।
मैं क्या करूँगा एक वर्ग को परिभाषित है।
मैं सिर्फ यह गुलाबी फोन करता हूँ और मैं या दो divs करने के लिए इस वर्ग को लागू कर देंगे तो हम उन्हें देख सकते हैं।
इसलिए अभी वे सिर्फ सफेद कर रहे हैं।
कोई सीमा नहीं।
बस पाठ का एक छोटा सा।
लेकिन हम में इस जोड़ सकते हैं।
तो गुलाबी।
और फिर हम पृष्ठभूमि गुलाबी होना चाहते हैं और हम एक बैंगनी सीमा एक पिक्सेल ठोस बैंगनी करूँगा और फिर हम इन दो divs के लिए गुलाबी वर्ग लागू कर देंगे।
हर एक को छह इकाइयों तक ले जाता है।
अब हम वापस जाने के लिए और ताज़ा करें।
हम वहाँ चलें।
आप हम दो divs कि कंटेनर की ठीक आधी हाथ में ले लिया है देख सकते हैं।
कंटेनर यहाँ और यहाँ शुरू होता है।
और हम दो भागों में विभाजित कर दिया है।
तो अब हम वापस जाने के लिए और एक छोटा सा और आसपास खेलते हैं और एक के तीसरे स्तंभ में जोड़ने की कोशिश कर सकते हैं।
और इस बार मध्य स्तम्भ आठ इकाइयों और फिर बाईं कर देगा और सही दो हो जाएगा।
तो खत्म होती है और मैं यहाँ इन नंबरों को बदल देंगे।
हम वहाँ चलें।
हम बीच में एक अच्छा केंद्रित स्तंभ के साथ खत्म हो जाएगा और फिर छोड़ दिया और सही है कि हम एक साइड बार या कुछ के लिए इस्तेमाल कर सकते हैं पर दो छोटे कॉलम।
तो यह है कि एक बहुत ही बुनियादी अवधारणा बूटस्ट्रैप ग्रिड प्रणाली के सभी अंतर्निहित है।
हम 12 इकाइयों जो कुछ भी कंटेनर के अंदर हम काम कर रहे हैं के पार जा रहा है और हम किसी भी तरह से है कि हम चाहते हैं में उन 12 इकाइयों को नामित कर सकते हैं।
इसलिए हम 12 अलग-अलग कॉलम हर एक स्तंभ बड़े एक कर सकता है और हम चाहते हैं कि 12 सिर्फ इस तरह के समय कर सकता है।
यकीन है कि मैं गिनती खोना नहीं करते हैं।
हम वहाँ चलें।
और फिर हम अब के लिए इन दोनों में से छुटकारा मिल जाएगा।
और अगर मैं ताजा थे आप एक पंक्ति में देखेंगे हम 12 कॉलम बराबर आकार की है।
हर एक को एक इकाई के ऊपर ले जाता है और फिर मैं भी आप के लिए हम अन्य पंक्तियों में जोड़ सकते हैं दिखाता हूँ।
तो चलो कि अब div वर्ग पंक्ति के बराबर होती है करते हैं और यह सिर्फ यह पहली पंक्ति है कि हम नीचे जाना होगा।
तो यह एक के अंदर की div करते हैं।
कक्षा स्तंभ Dasch बड़े बराबर होती है और चार से करते हैं।
इसलिए हम इसे तीन बराबर आकार वाले इकाइयों को बाँट लेंगे।
तो उसके लिए स्तंभ ARGE बस ऐसे ही चलते हैं।
और चलो अब एक बार देख ले चलते हैं और आप देख सकते हैं कि हम गुलाबी वर्ग लागू नहीं किया था, लेकिन हम तीन स्तंभों कि 12 कॉलम बराबर आकार वाले से नीचे गिर बनाया गया था बराबर आकार की है।
इसलिए हम गुलाबी वर्ग में जोड़ने के लिए सिर्फ यह आसान देखने के लिए क्या हो रहा है बनाने के लिए कर सकता है।
और वहाँ हम चले।
तो यह सिर्फ एक सरल उदाहरण है।
आप वास्तव में हमारी साइट पर इन गुलाबी बक्से सबसे अधिक संभावना नहीं होता।
लेकिन आप यहाँ देख सकते हैं के रूप में हम एक ग्रिड जहां हम पंक्तियों किया है और प्रत्येक पंक्ति चार स्तंभों के पार जा रहा है।
हर एक को तीन इकाइयों विस्तृत या यहाँ इस रचनात्मक टिम साइट पर है।
हम हर एक के पार जा रहा तीन कॉलम है चार इकाइयों चौड़ा है।
इधर भी ऐसा ही है।
तीन स्तंभों यहाँ के पार जा रहा है।
हम चार कॉलम है।
हर एक को तीन इकाइयों चौड़ा है।
तो यह है कि अगले वीडियो में ग्रिड की बहुत बहुत मूल है।
हम कैसे ग्रिड उत्तरदायी बनाने के लिए और विभिन्न आकारों में विभिन्न लेआउट करने के बारे में बात करेंगे।
अभी हम स्तंभ बड़े से एक साथ काम कर रहा है।
मैं एक बड़े साधन के साथ समझा दिया है और वहाँ तीन अन्य आकार रहे हैं और हम अगले वीडियो में उन देखेंगे और हम यह भी देखेंगे कि हम कैसे नेस्टेड ग्रिड के बारे में कुछ हम इन स्तंभों और विभाजन से किसी के अंदर एक और पंक्ति जोड़ सकते हैं, जहां कि आगे 12 टुकड़ों में।