1
00:00:00,410 --> 00:00:11,310
हमने इस अध्याय में वापस आ गया और बूटस्ट्रैप ग्रिड प्रणाली का प्रदर्शन और ग्रिड प्रणाली शायद नंबर एक कारण यह है कि लोगों रूपों झपकी घंटे बूटस्ट्रैप इस्तेमाल होता है जाएगा।

2
00:00:11,310 --> 00:00:19,290
बटन अच्छा शैलीगत परिवर्तन हम बूटस्ट्रैप के साथ कर सकते हैं, लेकिन बूटस्ट्रैप ग्रिड प्रणाली हमारे पूरे आवेदन के कंकाल के रूप में कार्य करेगा।

3
00:00:19,440 --> 00:00:23,980
यह हमें हमारे आवेदन करने के लिए संरचना को जोड़ने और बिछाने के लिए बाहर के लिए एक बहुत ही आसान तरीका है।

4
00:00:24,000 --> 00:00:27,480
तो मुझे आप आप ग्रिड प्रणाली के साथ क्या कर सकते हैं के कुछ उदाहरण दिखाते हैं।

5
00:00:27,480 --> 00:00:36,140
मैं बूटस्ट्रैप पूर्व प्रेमी से खुला पहले एक यहाँ एक पानी के घड़े के लिए एक उत्पाद का पेज है और नीचे स्क्रॉल कुछ साइटों है।

6
00:00:36,240 --> 00:00:37,530
सूचना है यहाँ बाहर करना।

7
00:00:37,560 --> 00:00:50,310
हम कंधे से तीन आइटम पक्ष है और फिर भी वे यहाँ आकार बदलने के रूप में वे नीचे पैमाने पर और फिर जब मैं गोली आकार मारा वे एक दूसरे के शीर्ष पर ढेर नोटिस।

8
00:00:51,090 --> 00:00:57,270
तो यह है कि काम पर बूटस्ट्रैप ग्रिड प्रणाली जहां हम एक और समान प्रभाव के रूप में इस यहीं है।

9
00:00:57,270 --> 00:01:02,100
वे पैमाने और फिर वे टैबलेट और मोबाइल के आकार पर हो चुकी है।

10
00:01:02,880 --> 00:01:04,110
यहाँ एक और उदाहरण है।

11
00:01:04,140 --> 00:01:10,440
इस आइसलैंडिक संगीतकार और ओलाफुर Arnolds है और यह इस साइट पर नीचे स्क्रॉल है।

12
00:01:10,560 --> 00:01:23,150
हम कुछ सामग्री है कि यहाँ आप इसी तरह लेआउट देख सकते हैं कि ग्रिड प्रणाली के साथ बनाया गया है है, लेकिन यह सिर्फ इतना है कि इस के रूप में अच्छी तरह से एक ग्रिड प्रणाली के साथ बनाया गया है नहीं है।

13
00:01:23,160 --> 00:01:25,210
यह यहां यह सामग्री।

14
00:01:26,100 --> 00:01:28,350
ये टूर यहां तारीखें।

15
00:01:28,350 --> 00:01:49,220
असल में ग्रिड प्रणाली का उपयोग करते हुए हम कह सकते हैं कि हम कुछ सामग्री तो हम भी इसे उपयोग कर सकते हैं कहते हैं कि हम इनमें से हर एक को चाहते हैं जब तक हम हिट स्क्रीन की चौड़ाई का 25 प्रतिशत तक ले करने के लिए स्क्रीन के 100 प्रतिशत तक ले जाना चाहता हूँ मोबाइल पक्ष या प्रत्येक के लिए गोली का आकार अब 50 तक ले और फिर जब हम मोबाइल मारा वे एक 100 प्रतिशत तक ले।

16
00:01:49,860 --> 00:01:50,850
एक ही बात यहाँ किया।

17
00:01:50,850 --> 00:01:56,660
यह हमें टुकड़ों में विभाजित स्क्रीन के साथ कि और पिकअप हम कितने टुकड़े चाहते हैं।

18
00:01:56,790 --> 00:02:00,660
हमारे अपने तत्वों के प्रत्येक takeup और यहां पिछले एक हम पहले से ही देखा है करने के लिए।

19
00:02:00,660 --> 00:02:05,670
यह रचनात्मक टिम रेगिस्तान यहाँ नीचे स्क्रॉल इसी तरह की सामग्री कहा जाता है।

20
00:02:05,680 --> 00:02:09,530
यहाँ ग्रिड प्रणाली और यहाँ के रूप में अच्छी तरह से है।

21
00:02:09,570 --> 00:02:11,430
तो यह सब ग्रिड प्रणाली के साथ किया जाता है।

22
00:02:11,430 --> 00:02:15,590
यह तो वास्तव में महत्वपूर्ण बहुत रोमांचक सामान सब के सब।

23
00:02:15,760 --> 00:02:20,640
यह हमें हम बूटस्ट्रैप के बिना करना होगा क्या की तुलना में इतनी आसानी से बातें बाहर रखना मदद करता है।

24
00:02:20,670 --> 00:02:25,660
इसलिए हम bootstraps ग्रिड प्रणाली और बहुत ज्यादा हर आवेदन हम बूटस्ट्रैप का उपयोग कर बनाने का उपयोग कर सकता हूँ।

25
00:02:25,890 --> 00:02:27,500
और मुझे तुम उनमें से एक दिखाते हैं।

26
00:02:27,540 --> 00:02:33,940
यह हमारे यो शिविर आवेदन और सूचना है कि हम भर के लिए कैंप का एक ग्रिड है।

27
00:02:33,960 --> 00:02:40,050
और मैं स्क्रीन सूचना है कि वे पैमाने आकार और फिर हम पार और फिर मोबाइल के लिए नीचे दो के लिए जाने के रूप में।

28
00:02:40,050 --> 00:02:44,480
हम भर में एक के पास जाकर यह मोबाइल लेआउट का उपयोग करने के लिए एक बहुत अच्छा आसान है।

29
00:02:44,760 --> 00:02:47,840
तो यह है कि सिर्फ एक जगह है जहां हम एक ग्रिड प्रणाली का उपयोग करेंगे।

30
00:02:47,850 --> 00:02:57,800
अब हम कुछ ग्रिड प्रणाली इतनी पूर्ण स्क्रीन इस विंडो का उपयोग कर कोड लिखने में शुरू हो जाओ और मूल्यांकन टैब के अंतर्गत बूटस्ट्रैप डॉटकॉम पाने के लिए वापस जाओ।

31
00:02:58,050 --> 00:03:00,850
आप ग्रिड प्रणाली पर क्लिक कर सकते हैं।

32
00:03:00,850 --> 00:03:07,300
वहाँ काफी ग्रिड प्रणाली के लिए एक सा है, लेकिन मैं यहाँ सिर्फ 12 एक ही नंबर ओर इशारा करते हुए शुरू करने के लिए जा रहा हूँ।

33
00:03:07,470 --> 00:03:09,890
यह वास्तव में कैसे काम करता है ग्रिड प्रणाली के लिए महत्वपूर्ण है।

34
00:03:09,900 --> 00:03:21,150
तो हर कंटेनर और बूटस्ट्रैप 12 विभिन्न स्तंभों में विभाजित किया जा सकता है और फिर ग्रिड प्रणाली हम उन 12 इकाइयों प्रत्येक तत्व लेना चाहिए की कितने चुन सकते हैं का उपयोग कर।

35
00:03:21,150 --> 00:03:27,050
तो इस मामले में ऐसा लगता है कि वे कुछ 12 इकाइयों के बारे में 10 छुड़ा ले रही है।

36
00:03:27,060 --> 00:03:40,320
और फिर यहाँ दो से अधिक 12 इकाइयों से बाहर या नौ और 3 हो सकता है, लेकिन वे कुछ अनुपात जहां वे सही पक्ष पर बाईं तरफ उन 12 में से अधिक है और फिर 12 में से एक छोटा सा अंश किया है।

37
00:03:40,770 --> 00:03:46,510
तो अगर हम शिविर के लिए वापस जाना यह हमारे कंटेनर यहीं है।

38
00:03:46,890 --> 00:03:51,670
और इनमें से प्रत्येक एक 12 इकाइयों के बाहर हर एक को तीन इकाइयों तक ले जाता है।

39
00:03:51,810 --> 00:03:56,850
इसलिए हम चार बराबर कॉलम के साथ खत्म होता है और फिर हम इसे यहीं नीचे हटना।

40
00:03:56,880 --> 00:04:00,040
अब वे प्रत्येक 12 में से छह इकाइयों ले।

41
00:04:00,240 --> 00:04:02,840
तो फिर उस नंबर 12 बहुत महत्वपूर्ण है।

42
00:04:02,850 --> 00:04:03,660
अब हम सही में चलते हैं।

43
00:04:03,660 --> 00:04:05,130
हमारे बहुत पहले ग्रिड।

44
00:04:05,250 --> 00:04:14,640
तो मैं एक फ़ाइल बना दिया है ग्रिड एच टी एम एल करता है यह bootstraps एसएस फ़ाइल के लिए छोड़कर खाली है और शुरू करने के लिए हम एक कंटेनर को परिभाषित करने की जरूरत है।

45
00:04:14,860 --> 00:04:18,180
जब भी हम एक Boucek ग्रिड यह एक कंटेनर के अंदर होने की जरूरत का उपयोग करें।

46
00:04:18,210 --> 00:04:22,230
तो वर्ग कंटेनर के बराबर होती है।

47
00:04:22,290 --> 00:04:29,190
और पहली बात यह है कि हम क्या करने की जरूरत प्रत्येक पंक्ति के बजाय पंक्ति के बराबर वर्ग के साथ एक और div मिल रहा है।

48
00:04:29,220 --> 00:04:31,100
हम 12 इकाइयों से लेने जाना है।

49
00:04:31,350 --> 00:04:40,730
तो क्या हम ऐसा करने से शुरू करने जा रहे हैं सिर्फ एक 50 से 50 विभाजन कर रही है कि हम 1 div और फिर एक और div है कि 12 में से 6 तक ले जाता है कि 12 में से 6 तक ले जाता होगा।

50
00:04:41,070 --> 00:04:42,050
तो चलो कि अब करते हैं।

51
00:04:42,120 --> 00:04:48,330
हम एक div जोड़ देंगे और उसके बाद मैं भी अपने दूसरे विभाजन जोड़ देंगे और अभी यह सिर्फ दो उपकरणों खाली कर रहे हैं।

52
00:04:48,330 --> 00:04:49,430
आप काम करने के लिए नहीं जा रहे हैं।

53
00:04:49,650 --> 00:05:00,300
लेकिन मैं क्या करूँगा पहले एक के लिए एक वर्ग को जोड़ने और यह एक छोटा सा अजीब स्तंभ एक बड़ा छह दिखेगा और हम यहाँ एक ही बात करूँगा है।

54
00:05:00,300 --> 00:05:03,520
कक्षा स्तंभ बड़े छह बराबर होती है।

55
00:05:03,630 --> 00:05:05,200
तो फिर हम यहाँ में कुछ सामग्री जोड़ देंगे।

56
00:05:05,210 --> 00:05:10,880
वे सिर्फ स्तंभ बड़े छह कहेंगे।

57
00:05:10,950 --> 00:05:12,140
इधर भी ऐसा ही है।

58
00:05:12,210 --> 00:05:18,950
और जैसा कि मैं क्या बचा है और हम वास्तव में बहुत ज्यादा नहीं देखेंगे हम ग्रिड में ही नहीं दिख रहा है।

59
00:05:19,020 --> 00:05:24,300
तो यह है कि मैं एक स्पष्ट शैली टैग की बजाय यहां एक वर्ग को परिभाषित करेंगे बनाने के लिए।

60
00:05:24,300 --> 00:05:26,670
मैं क्या करूँगा एक वर्ग को परिभाषित है।

61
00:05:26,730 --> 00:05:31,350
मैं सिर्फ यह गुलाबी फोन करता हूँ और मैं या दो divs करने के लिए इस वर्ग को लागू कर देंगे तो हम उन्हें देख सकते हैं।

62
00:05:31,490 --> 00:05:32,820
इसलिए अभी वे सिर्फ सफेद कर रहे हैं।

63
00:05:32,820 --> 00:05:33,660
कोई सीमा नहीं।

64
00:05:33,750 --> 00:05:34,840
बस पाठ का एक छोटा सा।

65
00:05:35,010 --> 00:05:36,050
लेकिन हम में इस जोड़ सकते हैं।

66
00:05:36,180 --> 00:05:37,010
तो गुलाबी।

67
00:05:37,140 --> 00:05:49,950
और फिर हम पृष्ठभूमि गुलाबी होना चाहते हैं और हम एक बैंगनी सीमा एक पिक्सेल ठोस बैंगनी करूँगा और फिर हम इन दो divs के लिए गुलाबी वर्ग लागू कर देंगे।

68
00:05:49,950 --> 00:05:52,660
हर एक को छह इकाइयों तक ले जाता है।

69
00:05:52,680 --> 00:05:54,570
अब हम वापस जाने के लिए और ताज़ा करें।

70
00:05:54,900 --> 00:05:55,580
हम वहाँ चलें।

71
00:05:55,800 --> 00:05:59,640
आप हम दो divs कि कंटेनर की ठीक आधी हाथ में ले लिया है देख सकते हैं।

72
00:05:59,670 --> 00:06:01,930
कंटेनर यहाँ और यहाँ शुरू होता है।

73
00:06:02,460 --> 00:06:04,530
और हम दो भागों में विभाजित कर दिया है।

74
00:06:04,620 --> 00:06:10,110
तो अब हम वापस जाने के लिए और एक छोटा सा और आसपास खेलते हैं और एक के तीसरे स्तंभ में जोड़ने की कोशिश कर सकते हैं।

75
00:06:10,410 --> 00:06:16,150
और इस बार मध्य स्तम्भ आठ इकाइयों और फिर बाईं कर देगा और सही दो हो जाएगा।

76
00:06:16,170 --> 00:06:21,270
तो खत्म होती है और मैं यहाँ इन नंबरों को बदल देंगे।

77
00:06:21,280 --> 00:06:22,200
हम वहाँ चलें।

78
00:06:22,200 --> 00:06:30,900
हम बीच में एक अच्छा केंद्रित स्तंभ के साथ खत्म हो जाएगा और फिर छोड़ दिया और सही है कि हम एक साइड बार या कुछ के लिए इस्तेमाल कर सकते हैं पर दो छोटे कॉलम।

79
00:06:30,900 --> 00:06:34,860
तो यह है कि एक बहुत ही बुनियादी अवधारणा बूटस्ट्रैप ग्रिड प्रणाली के सभी अंतर्निहित है।

80
00:06:34,920 --> 00:06:42,210
हम 12 इकाइयों जो कुछ भी कंटेनर के अंदर हम काम कर रहे हैं के पार जा रहा है और हम किसी भी तरह से है कि हम चाहते हैं में उन 12 इकाइयों को नामित कर सकते हैं।

81
00:06:42,240 --> 00:06:52,170
इसलिए हम 12 अलग-अलग कॉलम हर एक स्तंभ बड़े एक कर सकता है और हम चाहते हैं कि 12 सिर्फ इस तरह के समय कर सकता है।

82
00:06:52,290 --> 00:06:53,600
यकीन है कि मैं गिनती खोना नहीं करते हैं।

83
00:06:54,090 --> 00:06:54,670
हम वहाँ चलें।

84
00:06:54,690 --> 00:06:56,620
और फिर हम अब के लिए इन दोनों में से छुटकारा मिल जाएगा।

85
00:06:56,820 --> 00:07:01,630
और अगर मैं ताजा थे आप एक पंक्ति में देखेंगे हम 12 कॉलम बराबर आकार की है।

86
00:07:01,650 --> 00:07:07,570
हर एक को एक इकाई के ऊपर ले जाता है और फिर मैं भी आप के लिए हम अन्य पंक्तियों में जोड़ सकते हैं दिखाता हूँ।

87
00:07:07,740 --> 00:07:14,390
तो चलो कि अब div वर्ग पंक्ति के बराबर होती है करते हैं और यह सिर्फ यह पहली पंक्ति है कि हम नीचे जाना होगा।

88
00:07:14,730 --> 00:07:18,870
तो यह एक के अंदर की div करते हैं।

89
00:07:19,020 --> 00:07:23,350
कक्षा स्तंभ Dasch बड़े बराबर होती है और चार से करते हैं।

90
00:07:23,370 --> 00:07:27,280
इसलिए हम इसे तीन बराबर आकार वाले इकाइयों को बाँट लेंगे।

91
00:07:27,360 --> 00:07:36,260
तो उसके लिए स्तंभ ARGE बस ऐसे ही चलते हैं।

92
00:07:36,420 --> 00:07:49,260
और चलो अब एक बार देख ले चलते हैं और आप देख सकते हैं कि हम गुलाबी वर्ग लागू नहीं किया था, लेकिन हम तीन स्तंभों कि 12 कॉलम बराबर आकार वाले से नीचे गिर बनाया गया था बराबर आकार की है।

93
00:07:49,470 --> 00:07:53,240
इसलिए हम गुलाबी वर्ग में जोड़ने के लिए सिर्फ यह आसान देखने के लिए क्या हो रहा है बनाने के लिए कर सकता है।

94
00:07:53,940 --> 00:07:54,800
और वहाँ हम चले।

95
00:07:55,140 --> 00:07:57,350
तो यह सिर्फ एक सरल उदाहरण है।

96
00:07:57,420 --> 00:08:01,470
आप वास्तव में हमारी साइट पर इन गुलाबी बक्से सबसे अधिक संभावना नहीं होता।

97
00:08:01,710 --> 00:08:08,760
लेकिन आप यहाँ देख सकते हैं के रूप में हम एक ग्रिड जहां हम पंक्तियों किया है और प्रत्येक पंक्ति चार स्तंभों के पार जा रहा है।

98
00:08:08,760 --> 00:08:15,830
हर एक को तीन इकाइयों विस्तृत या यहाँ इस रचनात्मक टिम साइट पर है।

99
00:08:15,900 --> 00:08:19,830
हम हर एक के पार जा रहा तीन कॉलम है चार इकाइयों चौड़ा है।

100
00:08:20,070 --> 00:08:20,900
इधर भी ऐसा ही है।

101
00:08:20,900 --> 00:08:23,860
तीन स्तंभों यहाँ के पार जा रहा है।

102
00:08:23,910 --> 00:08:24,960
हम चार कॉलम है।

103
00:08:24,960 --> 00:08:26,840
हर एक को तीन इकाइयों चौड़ा है।

104
00:08:27,390 --> 00:08:30,650
तो यह है कि अगले वीडियो में ग्रिड की बहुत बहुत मूल है।

105
00:08:30,660 --> 00:08:35,850
हम कैसे ग्रिड उत्तरदायी बनाने के लिए और विभिन्न आकारों में विभिन्न लेआउट करने के बारे में बात करेंगे।

106
00:08:35,850 --> 00:08:38,230
अभी हम स्तंभ बड़े से एक साथ काम कर रहा है।

107
00:08:38,250 --> 00:08:52,290
मैं एक बड़े साधन के साथ समझा दिया है और वहाँ तीन अन्य आकार रहे हैं और हम अगले वीडियो में उन देखेंगे और हम यह भी देखेंगे कि हम कैसे नेस्टेड ग्रिड के बारे में कुछ हम इन स्तंभों और विभाजन से किसी के अंदर एक और पंक्ति जोड़ सकते हैं, जहां कि आगे 12 टुकड़ों में।