1
00:00:00,390 --> 00:00:07,550
यह सबक हम विशेष रूप से बूटस्ट्रैप ग्रिड के साथ काम कर रहे हैं वहाँ दो मुख्य विशेषताएं मैं उजागर करना चाहते हैं जारी रखेंगे में वापस स्वागत है।

2
00:00:07,590 --> 00:00:12,070
पहला यह है कि मैं चार अलग अलग आकार है कि मैं संक्षेप में उल्लेख किया है पता करना चाहते है।

3
00:00:12,150 --> 00:00:18,530
हम स्तंभ Elgie के साथ काम कर रहा है कि क्या मतलब है के बारे में बात नहीं की है और वहाँ तीन अन्य आकारों इस के साथ काम कर रहे हैं।

4
00:00:18,600 --> 00:00:25,820
उन्होंने यह भी बताएंगे कि कैसे हम अन्य ग्रिड के अंदर घोंसला ग्रिड आगे उन 12 इकाइयों को छोटे टुकड़ों में विभाजित करने के लिए कर सकते हैं।

5
00:00:26,250 --> 00:00:34,100
लेकिन चार आकारों मैं वापस ब्राउज़र करने के लिए जा रहा है और डेमो है कि हम पिछले सबक में बनाया पर एक नज़र लेने के द्वारा शुरू करने के लिए जा रहा हूँ के बारे में बात करके हालांकि शुरू करते हैं।

6
00:00:34,290 --> 00:00:50,810
इसलिए हम दो पंक्तियों में से एक है कि 12 कॉलम एक से तीन के पार जा रहा है और घड़ी के रूप में मैं खिड़की बातें बस ठीक पैमाने आकार बदलने क्या होता है है और फिर हम एक ब्रेक प्वाइंट यहीं मारा जहां प्रत्येक स्तंभ में सब कुछ बदल जाता है।

7
00:00:50,850 --> 00:00:59,400
अब एक पूर्ण 12 इकाइयों के पार जा रहा लेता है और वे एक दूसरे के शीर्ष पर ढेर और के रूप में वे आकार बदलने रखने के लिए आप किसी भी परिवर्तन वास्तव में नोटिस नहीं होगा।

8
00:00:59,460 --> 00:01:03,140
वे सभी 12 इकाइयों लेने के लिए और एक दूसरे के शीर्ष पर ढेर करने के लिए जारी है।

9
00:01:03,330 --> 00:01:08,980
लेकिन वहाँ वास्तव में चार अलग अलग आकार है कि हम तो हम चार अलग अलग लेआउट हो सकता है निर्दिष्ट कर सकते हैं।

10
00:01:09,030 --> 00:01:13,850
अभी यह एक मोबाइल लेआउट जो अतिरिक्त छोटे पहुँच है।

11
00:01:14,040 --> 00:01:20,730
तो फिर हम बहुत छोटा है जो की तरह एक गोली माध्यम है जो यहीं है बाहर करना और उसके बाद मिलता है।

12
00:01:20,730 --> 00:01:26,590
यह एक लैपटॉप या एक छोटे ब्राउज़र विंडो और फिर बड़े हम यहीं है, जिस पर होगा।

13
00:01:26,940 --> 00:01:31,870
तो यह यहीं छोड़कर एक फर्क इतना है की तरह जब हम यहां तक ​​कि बड़े होने के बीच जाना नहीं लगती है।

14
00:01:31,980 --> 00:01:38,330
लेकिन वहाँ चार आकारों हैं और हम उन आकारों में से हर एक के लिए अनुपात और अनुपात में निर्दिष्ट कर सकते हैं।

15
00:01:38,460 --> 00:01:46,900
इसलिए ग्रिड विकल्प के तहत बूटस्ट्रैप नाव यहां ग्रिड प्रणाली आप देख सकते हैं पर एक मेज वहाँ है और यह हमें चार अलग अलग आकार से पता चलता है।

16
00:01:47,130 --> 00:02:02,940
तो वहाँ छोटे उपकरणों जो गोली मध्यम उपकरणों रहे हैं की तुलना में फोन जैसे छोटे उपकरणों के अतिरिक्त बड़ी उपकरणों या बड़ा डेस्कटॉप कि अधिक से अधिक बारह सौ पिक्सल चौड़ा कर रहे हैं डेस्कटॉप और वे एक एक उपसर्ग है कि हम इतने कॉलम का उपयोग वास्तव में छोटा है का उपयोग कर सकते है।

17
00:02:03,000 --> 00:02:08,630
एस.एम. छोटे एमडी माध्यम है और एलजी जो कि हम क्या उपयोग किया गया है बड़ी है।

18
00:02:09,030 --> 00:02:14,170
तो हम कहते हैं कि मैं अपने लेआउट बड़े ब्रेकप्वाइंट में ही रहना चाहते हैं कि चलो।

19
00:02:14,340 --> 00:02:22,410
और फिर जब हम यहीं मध्यम करने के लिए स्विच मैं इन 12 कॉलम है कि प्रत्येक एक इकाई को ले जाना चाहता हूँ।

20
00:02:22,800 --> 00:02:25,320
मैं उन्हें एक के बजाय दो इकाइयों को लेना चाहते हैं।

21
00:02:25,320 --> 00:02:27,670
इसलिए हम छह के पार जाने के साथ समाप्त होगा।

22
00:02:27,690 --> 00:02:29,510
और फिर एक और 6 नीचे।

23
00:02:29,820 --> 00:02:32,880
तो चलो उस पर ध्यान केंद्रित करने और चीजों को आसान बनाने के लिए करते हैं।

24
00:02:33,100 --> 00:02:36,360
मैं वास्तव में अब के लिए हमारी दूसरी पंक्ति से छुटकारा मिल जाएगा।

25
00:02:36,600 --> 00:02:39,170
इतना सब है कि हम यहाँ यह सही है।

26
00:02:39,210 --> 00:02:43,730
तो जब हम सही वहाँ इस माध्यम ब्रेकप्वाइंट मारा मैं ऐसा नहीं करना चाहता हूँ।

27
00:02:43,740 --> 00:02:48,510
इसके बजाय मैं चाहता हूँ छह कॉलम के पार जा रहा है कि क्या करना है।

28
00:02:48,510 --> 00:02:50,740
मैं सिर्फ एक वर्ग में जोड़ें।

29
00:02:50,940 --> 00:02:58,120
इसलिए मैं हर एक के लिए है कि क्या करेंगे और यह स्तंभ मध्यम होने जा रहा है।

30
00:02:58,200 --> 00:03:05,600
तो जब यह ग्रिड मध्यम आकार सेट कर दिया जाता है कि हम उन्हें एक दो इकाइयों को लेने के लिए चाहते हैं और हम बचा लेंगे।

31
00:03:05,640 --> 00:03:07,200
अब चलते हैं और ताज़ा करते हैं।

32
00:03:07,380 --> 00:03:09,120
यह पूर्ण आकार बनाते हैं।

33
00:03:09,120 --> 00:03:12,380
कुछ भी नहीं बदलता क्योंकि हम बड़े आकार पर रहे हैं।

34
00:03:12,570 --> 00:03:16,190
लेकिन अब जब मैं यहीं मध्यम करने के लिए स्विच।

35
00:03:16,200 --> 00:03:21,380
सूचना है कि वे प्रत्येक अब दो इकाइयों लेने के लिए और हम छह भर में जा मिलता है।

36
00:03:21,630 --> 00:03:33,480
और अगर मैं इसे नीचे रख सिकुड़ हम तो छोटे ब्रेकप्वाइंट मारा और कहा कि जहां यह स्विच जहां प्रत्येक स्तंभ अब पूरे 12 इकाइयों भर में सभी तरह से चला जाता है और वे एक दूसरे के शीर्ष पर ढेर है।

37
00:03:33,900 --> 00:03:41,040
तो चलो वापस जाओ और के हमारे उदात्त करने के लिए वापस जाने के लिए और हमारे पुराने ग्रिड को पुनर्जीवित करते हैं पढ़ें।

38
00:03:41,130 --> 00:03:47,160
तो हम इस एक से छुटकारा मिल जाएगा क्योंकि यह है कि आम नहीं है के लिए वास्तव में 12 विभिन्न घटकों के पार जा रहा है।

39
00:03:47,160 --> 00:03:53,300
आम तौर पर आप तीन या चार कभी कभी छह लेकिन 12 अलग-अलग कॉलम के साथ काम कर रहे हैं बहुत दुर्लभ है।

40
00:03:53,400 --> 00:04:01,250
तो चलो इस एक के लिए वापस जाओ और हम क्या करेंगे कोशिश करते हैं और बहलाना कि ग्रिड यहाँ ओलाफुर अर्नोल्ड के दौरे के समय से बाहर खेलने के लिए है।

41
00:04:01,590 --> 00:04:04,200
तो यह चार बजे शुरू होता है के पार जा रहा है।

42
00:04:04,200 --> 00:04:05,400
तो फिर हम नीचे हटना।

43
00:04:05,550 --> 00:04:13,100
एक मध्यम ब्रेक प्वाइंट नहीं है और हम अभी भी चार पर रहे और फिर हम छोटा सा ब्रेक बात पर आते हैं और हम भर में दो के पास जाओ।

44
00:04:13,140 --> 00:04:15,580
और फिर मोबाइल एक्स या छोटे से एक है।

45
00:04:15,990 --> 00:04:20,530
तो यह है कि हम क्या करने की कोशिश और सामग्री सिर्फ संरचना नहीं बहलाना करेंगे।

46
00:04:20,790 --> 00:04:22,080
इसलिए हम यहाँ वापस जाना होगा।

47
00:04:22,650 --> 00:04:25,740
और हम चार के पार जाने के साथ शुरू करना चाहते हैं।

48
00:04:25,740 --> 00:04:31,860
इसका मतलब है कि हर एक को तीन इकाइयों तक ले जाता है और फिर हम पाठ यहाँ बदल सकते हैं।

49
00:04:31,860 --> 00:04:35,510
और हम सिर्फ यह करने के लिए या तारीख का कहना है चलो।

50
00:04:35,610 --> 00:04:46,320
तो अगर हम ताजा थे हम चार स्तंभों जा रहा है जो भर में हम जो वास्तव में है क्या यह चार के रूप में बाहर शुरू होता है के पार जा कर देना चाहिए था।

51
00:04:46,320 --> 00:04:48,720
और फर्क सिर्फ वास्तव में वास्तविक सामग्री है।

52
00:04:48,720 --> 00:05:00,190
इसलिए प्रत्येक स्तंभ के बजाय हम सिर्फ एक एच तीन एक पैरा एक बटन और अन्य जो भी सामग्री हम एक छोटे से एचआर ऐसा लग रहा है की जरूरत जोड़ना होगा और हम अभी भी एक ही अंतर मिलता था।

53
00:05:00,600 --> 00:05:01,200
ठीक है।

54
00:05:01,200 --> 00:05:03,790
तो अगली ब्रेक प्वाइंट जब हम मध्यम करने के लिए मिलता है।

55
00:05:03,960 --> 00:05:05,840
यह चार पर रहता है।

56
00:05:06,300 --> 00:05:15,440
तो क्या आप सोच सकते हैं कि हम इतने मध्यम ब्रेक प्वाइंट को निर्दिष्ट करने की ज़रूरत है जब हम इस हिट वे अभी भी एक तीन इकाइयों को लेना चाहिए।

57
00:05:15,600 --> 00:05:34,190
हम वापस उदात्त लिए जा सकते हैं और उस जोड़ने के लिए और फिर उन्हें मध्यम तीन कॉल और बचाने के लिए और वे प्रत्येक तीन इकाइयों हम मध्यम हिट पर शुरू और वे तीन इकाइयों पर रहने के लिए और फिर हम छोटे सिर और अब वे 12 इकाइयों को फिर से कर रहे हैं।

58
00:05:34,310 --> 00:05:49,140
और क्या हम इस के बाद के लिए चाहते हैं कि जब हम छोटे आकार मारा वे अब प्रत्येक को छह इकाइयों ले तो हम यहाँ में जाने के लिए और जोड़ने के उस स्तंभ छोटे 6 में कर सकते हैं।

59
00:05:49,400 --> 00:05:57,070
इसलिए बड़े आकार इनमें से हर एक को 25 प्रतिशत 12 में से तीन इकाइयों मध्यम आकार पर ले जाता है।

60
00:05:57,120 --> 00:05:57,920
वही चीज।

61
00:05:58,010 --> 00:06:05,480
वे 25 प्रतिशत तक ले और फिर छोटे आकार जो गोलियों के लिए है पर वे एक तो 50 प्रतिशत ले।

62
00:06:05,480 --> 00:06:12,980
इसलिए हम एक ताज़ा तीन मिनट के लिए और फिर तीन इकाइयों को ले तो हम छोटे मारा।

63
00:06:13,040 --> 00:06:17,880
और अब वे एक छह इकाइयों को लेने के लिए और फिर हम अतिरिक्त छोटे था।

64
00:06:17,940 --> 00:06:21,620
तब वे स्वत: पूर्ण 12 इकाइयों को ले जो कि हम क्या चाहते हैं।

65
00:06:21,810 --> 00:06:27,350
आप देख सकते हैं कि जब हम छोटे मारा हम उन्हें भर में जा रहा एक इकाई को लेना चाहते हैं।

66
00:06:27,380 --> 00:06:28,010
ठीक है।

67
00:06:28,010 --> 00:06:33,240
इसलिए हम चाहते हैं कि वहाँ नीचे एक छोटा सा परिवर्तन है, अगर हम उदात्त करने के लिए वापस जाने के लिए हम कर सकते हैं।

68
00:06:33,770 --> 00:06:39,560
आप देखेंगे कि हम बड़े और मध्यम के लिए इस तीन इकाइयों निर्दिष्ट कर रहे दो बार देखेंगे।

69
00:06:39,560 --> 00:06:54,320
हम वास्तव में बड़े स्तंभ तीन से छुटकारा मिल सकता है और सिर्फ वहाँ में मध्यम डाल दिया है और बूटस्ट्रैप कि क्योंकि हम मध्यम स्थापित कर रहे तीन होने का पता चल जाएगा और हम स्पष्ट रूप से यह सिर्फ बड़े लगेगा कि हम क्या माध्यम के लिए सेट और लागू की स्थापना नहीं कर रहे हैं बड़ा करने के लिए यह।

70
00:06:54,440 --> 00:06:55,880
तो यह उसी तरह काम करता है।

71
00:06:55,880 --> 00:06:56,650
कुछ भी नहीं बदला।

72
00:06:56,660 --> 00:07:02,420
मैं पहले से ही ताजा समान दिखता है हमारे मध्यम ब्रेकप्वाइंट अभी भी वहाँ है और हमारे छोटे से काम करता है।

73
00:07:02,420 --> 00:07:04,800
इसलिए हम चाहते हैं कि दो बार निर्दिष्ट करने के लिए नहीं है।

74
00:07:05,300 --> 00:07:10,460
तो बस मुझे N.Z. आते हैं हम उस से छुटकारा मिल गया है और यह ठीक उसी तरह काम करता है।

75
00:07:10,520 --> 00:07:14,990
और वास्तव में अगर हम एक नजर हम वेब साइट पर जाने से लेते हैं।

76
00:07:15,000 --> 00:07:19,770
मुझे यकीन है कि अगर हम इनमें से प्रत्येक का निरीक्षण तुम वहाँ हम चले देखेंगे।

77
00:07:19,780 --> 00:07:22,590
कॉलम छोटे छह स्तंभ मध्यम तीन।

78
00:07:22,790 --> 00:07:26,990
वास्तव में क्या हम अब है कि हम उन चार अलग अलग आकार को कवर किया है था।

79
00:07:27,070 --> 00:07:30,710
उम्मीद है कि आप देख सकते हैं कि बहुमुखी और उपयोगी ग्रिड प्रणाली हो सकता है।

80
00:07:30,750 --> 00:07:31,520
चलिये वापस चलते हैं।

81
00:07:31,740 --> 00:07:33,960
और अब मैं घोंसले के शिकार ग्रिड को संबोधित करेंगे।

82
00:07:34,310 --> 00:07:42,710
चलो लगता है कि यह पहला स्तंभ के बजाय यहां मैं यह आधे में विभाजित है और उस की बाईं ओर कुछ और सही पक्ष पर कुछ करना चाहते हैं।

83
00:07:42,800 --> 00:07:47,340
मैं वास्तव में जाना है और वहाँ के अंदर एक और पंक्ति में जोड़ सकते हैं।

84
00:07:47,370 --> 00:07:49,230
तो वर्ग पंक्ति के बराबर होती है।

85
00:07:49,740 --> 00:08:09,100
और फिर उस पंक्ति के अंदर मैं एक div में स्तंभ और सब सिर्फ बहुत बड़ी के बराबर वर्ग के साथ अब स्तंभ बड़े छह के लिए जोड़ सकते हैं और एक दूसरे के कॉलम बड़े 6 और मैं बस कुछ पाठ यहाँ आधे रास्ते और दूसरे आधे लिख देंगे सकते हैं।

86
00:08:09,360 --> 00:08:18,170
चलो यह पहली छमाही और दूसरे आधे को बदलने के लिए है और हम बचाने के लिए और उन्हें एक क्लासिक गुलाबी दे देंगे।

87
00:08:18,200 --> 00:08:24,000
तो क्या अब हम किया है कि हम तीन या चार अभी भी पार जा भर में जा रहा होगा।

88
00:08:24,000 --> 00:08:38,530
एक दो तीन चार और पहले एक में हम में एक और पंक्ति जोड़ने और हम कुछ कहने के पहले छह का उपयोग कर रहे हैं और हम कुछ और बचाने के लिए या ताज़ा कहने के लिए दूसरे छह उपयोग कर रहे हैं द्वारा एक और 12 इकाइयों में विभाजित किया है ।

89
00:08:38,960 --> 00:08:41,770
वहाँ तुम जाओ और यह और भी अधिक स्पष्ट करते हैं।

90
00:08:41,780 --> 00:08:43,280
मुझे उनके एक अन्य वर्ग देते हैं।

91
00:08:43,400 --> 00:08:45,170
चलो यह नारंगी कहते हैं।

92
00:08:45,370 --> 00:08:46,940
अभी तक मौजूद नहीं है।

93
00:08:46,940 --> 00:09:04,870
और यह नारंगी दिखाई परिभाषित किया है और यह पृष्ठभूमि नारंगी होगा और हम एक पिक्सेल ठोस लाल और फिर वास्तव में दश्त ठीक कर में जोड़ देंगे।

94
00:09:05,540 --> 00:09:10,530
ताज़ा करे जैसा कि आप देख सकते हैं अब हम अभी भी इन चार बातों के पार जा रहा है।

95
00:09:10,520 --> 00:09:19,160
हर एक को तीन इकाइयों तक ले जाता है, लेकिन हम में उस पंक्ति जोड़कर छह इकाइयों और छह इकाइयों में पहली बार एक विभाजित है और आप पंक्ति जोड़ने के लिए है।

96
00:09:19,160 --> 00:09:22,520
तुम बस यह कर शुरू नहीं कर सकते हैं, जहां आप एक स्तंभ के बजाय एक स्तंभ है।

97
00:09:22,520 --> 00:09:23,980
वहाँ एक पंक्ति में होना चाहिए।

98
00:09:24,260 --> 00:09:25,520
और हम एक और करते हैं।

99
00:09:25,910 --> 00:09:31,090
के अंदर छह छोटे टुकड़ों में यहीं यह पिछले एक डाल दिया।

100
00:09:31,500 --> 00:09:39,770
इसलिए हम अंदर एक पंक्ति जोड़ने के लिए की है कि div वर्ग पंक्ति के बजाय बराबर होती है वहाँ की जरूरत है।

101
00:09:39,770 --> 00:09:50,310
हम एक और div की जरूरत है और हम इनमें से छह होगा जहां हम स्तंभ बड़े दो प्रत्येक दो 12 इकाइयों से बाहर ले जा रहा है।

102
00:09:50,310 --> 00:09:59,370
और हम छह चाहते हैं और फिर हम हर एक पर जाने के लिए और है कि नारंगी वर्ग में जोड़ने के लिए सिर्फ इतना है कि हम उन्हें देख सकते हैं दूँगा।

103
00:10:00,440 --> 00:10:01,150
ठीक।

104
00:10:01,640 --> 00:10:06,540
इसलिए हम चार बड़े स्तंभों पहले हम आधे में विभाजित के पार जा रहा है।

105
00:10:06,650 --> 00:10:12,710
पिछले एक हम छह टुकड़ों में विभाजित है और आप वास्तव में कुछ भी नहीं देख सकते हैं तो हम वहाँ में किसी भी पाठ नहीं डाली।

106
00:10:12,920 --> 00:10:14,200
तो चलो करते चलते हैं।

107
00:10:14,270 --> 00:10:20,100
या नहीं बल्कि यह वास्तव में सिर्फ एक या वर्ग नारंगी ऊंचाई के साथ दे रहा है।

108
00:10:20,100 --> 00:10:22,950
चलो उन्हें प्रत्येक 50 पिक्सल कर दूं।

109
00:10:22,940 --> 00:10:29,960
और अगर मैं ताज़ा आप देखते हैं कि अब सब कुछ नारंगी कि वर्ग नारंगी ऊंचाई में 50 पिक्सल तक ले जाता है।

110
00:10:30,260 --> 00:10:40,880
इसलिए हम इन चार समान रूप से विभाजित शीर्ष स्तर कॉलम के अंदर हमारे दो समान रूप से विभाजित कॉलम और फिर हमारे छह समान रूप से विभाजित कॉलम है।

111
00:10:40,880 --> 00:10:43,700
तो यह है कि ग्रिड प्रणाली के महत्वपूर्ण टुकड़ों में से सभी के लिए है।

112
00:10:43,860 --> 00:10:46,420
संक्षेप में हम हर पंक्ति में 12 इकाइयों है।

113
00:10:46,560 --> 00:10:48,300
आप उन्हें अलग फिर भी आप की तरह।

114
00:10:48,360 --> 00:10:58,900
वहाँ चार आकार रहे हैं बड़ा मध्यम छोटा अतिरिक्त छोटे और आप उन चार ब्रेक प्वाइंट उन चार अलग-अलग आकारों में से किसी पर उन 12 इकाइयों को पुन: असाइन कर सकते हैं।

115
00:10:59,000 --> 00:11:04,870
और है कि कैसे आप इन अच्छा उत्तरदायी लेआउट और आम तौर पर पैटर्न आप देखते हैं कि वह यह है कि मोबाइल साइटों पर के साथ खत्म होता है।

116
00:11:04,880 --> 00:11:12,830
तो अतिरिक्त छोटे आकार पर सबसे साइटों से अपनी सामग्री को सिर्फ एक दूसरे की तरह हम यहाँ होगा की शीर्ष पर ढेर है, तो मैं यह नीचे हटना होगा।

117
00:11:12,840 --> 00:11:18,630
इस मोबाइल जहाँ आप एक ही पंक्ति में सामग्री के कई टुकड़े की जरूरत नहीं है पर आम लेआउट है।

118
00:11:19,080 --> 00:11:19,540
ठीक।

119
00:11:19,700 --> 00:11:20,990
के उदात्त करने के लिए वापस जाओ।

120
00:11:21,090 --> 00:11:23,290
यकीन है कि मैं तीन मुख्य उद्देश्यों के बारे में बात करें।

121
00:11:23,610 --> 00:11:28,160
इसलिए हम उद्देश्य ग्रिड प्रणाली के बिंदु हमें चीजों को बाहर करना मदद करता है के बारे में बात की थी।

122
00:11:28,160 --> 00:11:29,270
यह विस्मयकारी है।

123
00:11:29,660 --> 00:11:31,690
चार अलग-अलग आकारों को समझे।

124
00:11:31,700 --> 00:11:36,740
उन बड़े मध्यम छोटी सी अतिरिक्त छोटे और फिर सही नेस्टेड ग्रिड रहे हैं।

125
00:11:37,040 --> 00:11:45,790
और कहा कि हम यहाँ क्या कर रहे हैं जहां हम एक स्तंभ के बजाय एक पंक्ति जोड़ने और फिर हम अगले वीडियो में आगे और उप कॉलम के साथ उस पंक्ति को भरने कर सकते हैं।