1
00:00:00,240 --> 00:00:04,170
यह सबक हम अपने शिविर पर काम जारी रखने के लिए जा रहे हैं में वापस स्वागत है।

2
00:00:04,170 --> 00:00:06,070
हम पहले से ही प्रारंभिक सेट अप किया है।

3
00:00:06,180 --> 00:00:13,990
हम कुछ बुनियादी लेख और पाद बाहर रखना जोड़ा Parshall है हम बूटस्ट्रैप जोड़ा गया है और हम नए कैंप बनाने की कार्यक्षमता जोड़ा किया है।

4
00:00:14,010 --> 00:00:17,550
अब हम कैंप पेज बूटस्ट्रैप का उपयोग करने में शैली में जाने के लिए जा रहे हैं।

5
00:00:17,550 --> 00:00:18,600
तो चलो शुरू हो जाओ।

6
00:00:18,600 --> 00:00:21,230
बहुत पहले की बात मैं करता हूँ यकीन है कि मेरे सर्वर चल रहे हैं बनाने के लिए है।

7
00:00:22,000 --> 00:00:25,260
और बस अब हम क्या है पर एक नज़र रखना।

8
00:00:25,350 --> 00:00:26,740
निश्चित रूप से थोड़ा underwhelming।

9
00:00:26,850 --> 00:00:28,110
तो मैं दो मुख्य लक्ष्य है।

10
00:00:28,170 --> 00:00:34,150
पहले एक है कि हम यहाँ शीर्षक में एक बेहतर हैडर चाहते हैं तो यह अच्छे लग रहे चाहिए।

11
00:00:34,170 --> 00:00:43,000
हम का उपयोग करने के लिए क्या बूटस्ट्रैप में एक jumbotron कहा जाता है और उसके बाद भी कैंप कैंप की सूची नहीं है, बस खड़ी इस तरह प्रदर्शित करना चाहिए जा रहे हैं।

12
00:00:43,020 --> 00:00:48,200
इसके बजाय हम चाहते छोटे छवियों का एक ग्रिड के पार जा रहा है और कहा कि ग्रिड उत्तरदायी होना चाहिए।

13
00:00:48,480 --> 00:00:52,850
के पहले एक है जो इस शीर्षक पाठ में एक छोटा सा अच्छे लग रहे करने के लिए हो रही है के साथ शुरू करते हैं।

14
00:00:53,100 --> 00:00:58,440
तो मैंने कैंप कि हाँ मैं बस यहाँ में काम करने के लिए जा रहा हूँ को खोलने के लिए जा रहा हूँ।

15
00:00:58,590 --> 00:01:06,390
इसलिए मुझे लगता है क्योंकि हम काफी HD मेल का एक सा लेखन करने जा रहे हैं यह एक छोटा सा आकार बदलने के लिए जा रहा हूँ और हम सब पर एक टर्मिनल के साथ कुछ भी करने के लिए नहीं जा रहे हैं।

16
00:01:06,440 --> 00:01:12,510
तो हैडर हम एक शीर्षक टैग है जो हम पहले नहीं देखा है का उपयोग करने के लिए जा रहे हैं पर काम करने के लिए।

17
00:01:12,510 --> 00:01:15,740
कार्यात्मक यह एक div तरह से कुछ के रूप में ठीक उसी तरह से काम करता है।

18
00:01:15,780 --> 00:01:20,080
फर्क सिर्फ इतना है कि यह यह करने के लिए अर्थ अर्थ का एक छोटा सा है।

19
00:01:20,400 --> 00:01:25,850
शीर्षक का उपयोग बजाय सिर्फ एक मनमाना div से, लेकिन यह वास्तव में यह सिर्फ एक कंटेनर है कोई फर्क नहीं पड़ता।

20
00:01:26,010 --> 00:01:42,540
और हम इसे jumbotron के एक वर्ग को देने के लिए जा रहे हैं और फिर हम में जोड़ने के लिए अच्छी तरह से सिर्फ वास्तव में इस एच -1 कॉपी और हम सिर्फ उस पर छोड़ दें और Frigo बचाने के लिए और हमारे पेज को ताज़ा कर देंगे करने के लिए जा रहे हैं इसके बारे में अंदर।

21
00:01:42,570 --> 00:01:44,890
अब हम क्या Jumbotron कहा जाता है।

22
00:01:45,130 --> 00:01:46,280
यह अभी भी बहुत अच्छा नहीं है।

23
00:01:46,290 --> 00:01:50,720
अगली बात हमें क्या करना चाहिए एक बूटस्ट्रैप कंटेनर के अंदर सब कुछ कर रहा है।

24
00:01:51,030 --> 00:02:01,260
इतना सब कुछ है कि हम यहाँ यह है कि मैं इंडेंट करने के लिए जा रहा हूँ और मैं वर्ग के साथ एक div जोड़ने के लिए जा रहा हूँ के सभी देख बस ऐसे ही कंटेनर के बराबर होती है।

25
00:02:01,460 --> 00:02:07,670
और फिर हम उस के अंदर सब कुछ रहना होगा और इस पक्षों पर हमारे लिए कुछ speccing जोड़ देगा।

26
00:02:07,830 --> 00:02:08,710
ताज़ा करें।

27
00:02:08,880 --> 00:02:13,800
आप देख सकते हैं हम अब सही बाईं ओर यहां के खिलाफ बातें हैं।

28
00:02:13,830 --> 00:02:20,330
हम कुछ जगह है और हमारे jumbotron थोड़ा करीब लग रही है और अंत में एक Naff बार दिखाई पड़ेगा।

29
00:02:20,520 --> 00:02:22,890
इसलिए इस के साथ ही अच्छे है एक छोटा सा दिखेगा।

30
00:02:22,890 --> 00:02:25,530
अभी के लिए हम सिर्फ Jumbotron है।

31
00:02:25,590 --> 00:02:27,570
अब चलो पाठ ही बदल सकते हैं।

32
00:02:27,600 --> 00:02:34,530
तो बजाय यह है कैंप पेज के शिविर के लिए एक स्वागत संदेश में आपका स्वागत है डाल दिया।

33
00:02:34,710 --> 00:02:56,550
जो कुछ भी आप चाहते हैं सामग्री डाल करने के लिए स्वतंत्र महसूस हो रहा है और मैं भी मैं टैगलाइन का सिर्फ एक छोटा सा तरह जोड़ देंगे पैराग्राफ में एक पैराग्राफ में जोड़ देंगे और मैं सिर्फ हमारे हाथ देख सकते हैं और दुनिया भर से कैंप लेने कहूँगा।

34
00:02:56,670 --> 00:02:58,940
कुछ इस तरह वास्तव में कोई फर्क नहीं है।

35
00:02:58,950 --> 00:03:00,850
हम ताज़ा बचा लेंगे।

36
00:03:01,170 --> 00:03:06,650
ठीक है तो अब हम एक छोटे टैग लाइन है और आखिरी बात हम करना चाहते हैं इस लिंक का ख्याल रखना है।

37
00:03:06,690 --> 00:03:08,280
नई कैम्प का ग्राउंड लिंक जोड़ें।

38
00:03:08,580 --> 00:03:12,640
इसलिए मुझे लगता है कि कॉपी और भी Jumbotron अंदर डाल करने के लिए जा रहा हूँ।

39
00:03:12,650 --> 00:03:15,070
हालांकि मैं इसे एक बटन में बनाने के लिए जा रहा हूँ।

40
00:03:15,150 --> 00:03:24,780
बूटस्ट्रैप बटनों में से एक तो यह है कि ऐसा करने के लिए या पहले एक पैरा जोड़ने के लिए और फिर उस के अंदर लंगर टैग डाल दिया।

41
00:03:24,780 --> 00:03:26,680
और मैं कर रहा हूँ कि सिर्फ रिक्ति के लिए।

42
00:03:26,730 --> 00:03:43,320
आप यह है कि यह अपने आप ही लाइन पर होना चाहते हैं और फिर मैं रंग के लिए और पानी का छींटा है कि जैसे बड़े और बचत होगी बीच PTEN ETN प्राथमिक के बटन वर्ग कई वर्गों देने के लिए जा रहा हूँ।

43
00:03:43,330 --> 00:03:45,420
अब हम एक नई कैम्प का ग्राउंड बटन पड़ा है।

44
00:03:45,510 --> 00:03:49,930
हम उस पर क्लिक करें और यह रूप है कि पूरी तरह से स्टाइल है करने के लिए हमें ले जाता है।

45
00:03:50,220 --> 00:03:54,050
एक छोटी सी बात यह है कि अगर मैं इस विंडो का आकार बदलने के यहां है।

46
00:03:55,320 --> 00:04:01,740
सूचना कैसे हमारे पाठ सही Jumbotron के किनारे जो महान नहीं है के खिलाफ चला जाता है।

47
00:04:01,860 --> 00:04:24,330
हम कुछ रिक्ति यहाँ है और वे कहते हैं कि हम क्या करने रिक्ति सिर्फ Jumbotron के अंदर एक और कंटेनर जोड़ने की आवश्यकता होगी क्या रखना चाहते हैं इसलिए div वर्ग के समापन div पर अंत से पहले यहाँ नीचे Jumbotron अंदर कंटेनर के बराबर होती है और फिर और फिर बस मांगपत्र सब कुछ।

48
00:04:24,420 --> 00:04:26,040
और अब अगर हम ताज़ा करें।

49
00:04:26,210 --> 00:04:30,860
वह एक ही लग रहा है लेकिन जब हम इसे नीचे हटना अब हम कुछ जगह नहीं है।

50
00:04:31,230 --> 00:04:33,790
ठीक है, ताकि हैडर हिस्सा है।

51
00:04:33,840 --> 00:04:37,680
अब हम छवियों की कि ग्रिड पर काम करना चाहते हैं और मैं आप के साथ सामने हो जाएगा।

52
00:04:37,680 --> 00:04:39,770
यह निश्चित रूप से एक छोटा सा और काम है।

53
00:04:40,020 --> 00:04:53,520
ठीक है कि ग्रिड पर शुरू हो और हम एक पंक्ति बनाने के द्वारा शुरू करने के लिए इतना div वर्ग बस ऐसे ही पंक्ति के बराबर होती है जा रहे हैं और मैं सिर्फ एक छोटे से यहाँ संदेश के साथ शुरू करने जा रहा हूँ।

54
00:04:53,580 --> 00:05:15,790
इसलिए हम एक div वर्ग को जोड़ने के लिए जा रहे हैं बराबर होती है और मैं बनाने के लिए यह सिर्फ पूरी चौड़ाई को लेने के लिए जा रहा हूँ और हम बस यहाँ संदेश के लिए जा रहे हैं और एच 3 कहता है कि हमारी सबसे लोकप्रिय साइटों कैंप आप जानते हैं बहुत पसंद नहीं लगेगा।

55
00:05:15,790 --> 00:05:25,470
अभी के लिए की पीठ पर चलें और के div वर्ग पंक्ति जो हम एक पंक्ति में हमारे ग्रेड स्कूल में सब कुछ की जरूरत है जोड़कर शुरू करते हैं।

56
00:05:25,560 --> 00:05:28,820
यह एक div वर्ग बस ऐसे ही पंक्ति बराबर होती है।

57
00:05:28,970 --> 00:05:43,380
और अब हम एक पाश के लिए इस बारे में बात करने के लिए क्या हम वास्तव में क्या करना चाहते हैं प्रत्येक कैम्प का ग्राउंड हम एक div एक स्तंभ वर्ग और बूटस्ट्रैप ग्रिड का उपयोग कर के साथ एक स्तंभ है कि यह सुनिश्चित करना चाहते हैं के लिए पंक्ति के अंदर हमारे ग्रिड के बजाय है, क्योंकि लोगों की है।

58
00:05:43,420 --> 00:05:53,580
इसलिए मुझे लगता है कि ऐसा करने के लिए जहां अब मैं प्रत्येक पाश बस ऐसे ही दांतेदार बना लिए जाने के लिए इस कोड के सभी डाल करने के लिए जा रहा हूँ जा रहा हूँ।

59
00:05:53,830 --> 00:05:57,180
और फिर हम यहाँ हमारे समापन div टैग की जरूरत है।

60
00:05:57,490 --> 00:06:01,500
तो इस शास्त्रीय पंक्ति के लिए है और इस कंटेनर के लिए है।

61
00:06:02,020 --> 00:06:02,470
ठीक।

62
00:06:02,730 --> 00:06:28,270
तो ative वर्ग पंक्ति और नहीं बल्कि सिर्फ एक छवि के लिए एक एच के साथ यह div और यहाँ के रूप में यह सामग्री छोड़ने हम अभी भी एक छवि है, लेकिन हम यह तो div यह स्तंभ छोटे में स्तंभ मध्यम तीन में से एक वर्ग है कि बदलने के लिए जा रहे हैं की तुलना में 6 और वह सिर्फ इतना है कि हम कुछ बड़ा छवियों जब स्क्रीन आकार बड़ा है इसे पाने के लिए उत्तरदायी बनाने के लिए है।

63
00:06:28,300 --> 00:06:36,400
और फिर जब हम इसे नीचे हटना यह पंक्ति प्रति सिर्फ दो छवियों के लिए नीचे जाना होगा और फिर इसे पंक्ति प्रति सिर्फ एक छवि के लिए नीचे और आगे भी हटना होगा।

64
00:06:36,610 --> 00:06:56,560
तो अंदर है कि हम वास्तव में एक और div में जोड़ने के लिए जा रहे हैं और इस div थंबनेल वर्ग है जो एक बूटस्ट्रैप वर्ग है जो हमें थोड़ा कार्ड के अंदर है कि थम्बनेल जोड़ देगा यह एक छोटे से ग्रिड आइटम बनाना होगा बनाने में मदद मिलेगी है किया जा रहा है छवि बस इस तरह से शुरू करने के लिए।

65
00:06:56,680 --> 00:07:02,210
हम कैम्प का ग्राउंड आप आर एल के बराबर की छवि सेवाओं है और हम सिर्फ उस पर छोड़ देंगे।

66
00:07:02,230 --> 00:07:08,580
और हम अब के लिए इस से छुटकारा पाने के लिए और बस को बचाने और देखते हैं कि हम क्या मिल सकता है अगर हम ताजा कर रहे हैं जा रहे हैं।

67
00:07:09,280 --> 00:07:09,820
ठीक है।

68
00:07:09,910 --> 00:07:11,850
तो क्या अब हम छवियों का एक ग्रिड है।

69
00:07:11,890 --> 00:07:14,860
वहाँ केवल तीन है, लेकिन हम इस ग्रिड हो रही है।

70
00:07:15,220 --> 00:07:18,580
और मैं तुम्हें दिखाता हूँ कि मैं क्या यह संवेदनशील बनाने से क्या मतलब।

71
00:07:18,580 --> 00:07:25,270
तो जैसा कि एक सूचना इन कैसे यह दो वर्गों या स्क्रीन भर में दो मदों में परिवर्तन हटना।

72
00:07:25,280 --> 00:07:26,910
याद रखें कि वहाँ 12 इकाइयों है कि।

73
00:07:27,040 --> 00:07:44,190
तो क्या हम पहली बार था कि हम चार टुकड़ों में विभाजित कर रहे हैं, जहां वे प्रत्येक तीन इकाइयों से बाहर ले गया और फिर जब ग्रिड छोटा हो जाता है यहीं वे प्रत्येक छह इकाइयों लेने के लिए और भी छोटे यह स्वचालित रूप से एक करने के लिए चला जाता है।

74
00:07:44,350 --> 00:07:49,130
और हम हैं कि क्योंकि अतिरिक्त छोटे डिफ़ॉल्ट 12 इकाइयों का उपयोग करने के लिए है लिखने के लिए नहीं था।

75
00:07:49,180 --> 00:07:52,050
इसलिए हम चाहते हैं कि निर्दिष्ट करने के लिए नहीं था।

76
00:07:52,090 --> 00:08:07,550
अब हम एक एक nother बूटस्ट्रैप वर्ग एक div वर्ग बस ऐसे ही शीर्षक के बराबर होती है क्या करने के लिए सिर्फ एक साल की उम्र की तुलना में इस कैम्प का ग्राउंड नाम में वापस नहीं बल्कि शीर्षक मिलता है।

77
00:08:07,780 --> 00:08:13,080
और फिर अंदर वहाँ कैम्प का ग्राउंड नाम के लिए एक एच डाल देंगे।

78
00:08:14,070 --> 00:08:18,670
ठीक है बचाने देखते हैं क्या ऐसा लग रहा है चलो।

79
00:08:18,670 --> 00:08:19,270
हम वहाँ चलें।

80
00:08:19,300 --> 00:08:21,030
हम इन अच्छा सा कार्ड मिलता है।

81
00:08:21,040 --> 00:08:23,700
इस थम्बनेल हमारे लिए कर रही है कि वर्ग है।

82
00:08:23,840 --> 00:08:25,030
हम अपने चित्र है।

83
00:08:25,210 --> 00:08:30,480
और हम सिर्फ यह देखना है कि क्या यह की तरह यदि हम वस्तुओं के एक झुंड में जा रहा छवियों का एक गुच्छा है दिखता है।

84
00:08:30,760 --> 00:08:34,160
तो आप ऐसा करने की जरूरत नहीं है, लेकिन मैं यहाँ में इस पेस्ट करने जा रहा हूँ।

85
00:08:34,600 --> 00:08:36,860
बस हमें कुछ और जानकारी दे।

86
00:08:36,880 --> 00:08:38,800
यह डुप्लिकेट डेटा हो जाएगा, लेकिन वह ठीक है।

87
00:08:38,940 --> 00:08:46,250
और फिर हम और यकीन है कि हम सही अल्पविराम जोड़ने बनाने की जरूरत है तो वहाँ अल्पविराम और वहाँ आने के लिए।

88
00:08:46,300 --> 00:08:49,840
अब अगर हम ओह ताज़ा हम सर्वर को पुनः आरंभ करने की जरूरत है।

89
00:08:50,170 --> 00:08:52,060
और एप्लिकेशन के साथ हर बार हम गंदगी।

90
00:08:52,120 --> 00:08:53,330
हाँ।

91
00:08:53,590 --> 00:08:58,070
और अब अगर हम ताज़ा वह हम एक छोटी सी समस्या है देखेंगे।

92
00:08:58,120 --> 00:09:00,040
हमारे ग्रिड में एक छोटा सा गड़बड़ है।

93
00:09:00,170 --> 00:09:03,810
और क्या हो रहा है कि हम छवियों कि अलग ऊंचाइयों की रहे है।

94
00:09:04,090 --> 00:09:07,940
इसलिए इस सामन क्रीक इनमें से एक की तुलना में अलग है।

95
00:09:08,410 --> 00:09:10,710
यहाँ तक कि चौड़ाई हालांकि इस मामले में वही कर रहे हैं।

96
00:09:10,930 --> 00:09:16,210
और कहा कि इस ग्रिड से दूर फेंक रहे है और वहाँ एक आसान तरीका है, हालांकि यह एक छोटा सा wonky है यह तय करने के लिए है।

97
00:09:16,270 --> 00:09:19,130
और मैं आपको बताएंगे कि कैसे हम हैं कि हमारे कैम्प का ग्राउंड के बजाय करना।

98
00:09:19,270 --> 00:09:19,960
हाँ।

99
00:09:20,320 --> 00:09:26,980
कक्षा पंक्ति के दिन मैं एक शैली विशेषता में जोड़ने के लिए जा रहा हूँ और मैं सिर्फ इस अस्थायी रूप से करने जा रहा हूँ।

100
00:09:27,010 --> 00:09:32,530
हम एक बाहरी स्टाइलशीट को यह चलती हो जाएगा, लेकिन मैं सिर्फ लाइन में यह करने के लिए यह आसान के लिए आप को देखने के लिए बनाने के लिए जा रहा हूँ।

101
00:09:32,530 --> 00:09:37,360
इसलिए हम शैली की चादर के होने का फ्लेक्स और फ्लेक्स की चादर के प्रदर्शित होने को तैयार।

102
00:09:37,480 --> 00:09:39,900
और उन दो गुण है कि हमारे ग्रिड की मदद से बाहर करने के लिए जा रहे हैं।

103
00:09:39,910 --> 00:09:44,810
तो अगर मैं ताजा थे अब हम ग्रिड के साथ खत्म होता है, जहां यह अधिक लचीला है।

104
00:09:44,860 --> 00:09:53,400
यह बात नहीं है कि हम कुछ अलग ऊंचाइयों है कि अब ग्रिड तो वहाँ adapts इन दोनों के बीच अधिक स्थान और वहाँ यह यहाँ है क्योंकि।

105
00:09:53,470 --> 00:10:02,750
असल में यह आवश्यक है जहाँ हम सब कुछ अपने आप ही लाइन पर एक साथ होना हम सब कुछ पूरी तरह से गठबंधन किया है सकते हैं, जहां हो सकता है अंतरिक्ष की न्यूनतम राशि बाहर के आंकड़े।

106
00:10:02,800 --> 00:10:13,370
और वहाँ एक अन्य परिवर्तन हम कर सकते हैं वापस जाओ और पाठ का केंद्र है जो हमारे लिए एक बूटस्ट्रैप जो हमारे पाठ सही वहाँ केंद्रित कर देगा में जोड़ने के लिए है जो है।

107
00:10:13,540 --> 00:10:15,410
और मुझे लगता है कि थोड़ा बेहतर लग रहा है।

108
00:10:15,490 --> 00:10:20,500
इसके अलावा व्यक्तिगत पसंद की बात है और अब हम कुछ समय के लिए कैम्प का ग्राउंड पृष्ठ के साथ कर रहे हैं।

109
00:10:20,620 --> 00:10:27,550
उम्मीद है कि पता चलता है कि आप कैसे बूटस्ट्रैप वास्तव में हमारी मदद कर सकते हैं बातें बहुत विशेष रूप से आसान खरोंच से इस काम को करने के लिए की तुलना कर सकते हैं।

110
00:10:27,550 --> 00:10:31,900
और मुझे सिर्फ तुम हो कि हम अपने अच्छा संवेदनशील ग्रिड दिखाते हैं।

111
00:10:31,900 --> 00:10:33,260
तो इस मोबाइल पर है।

112
00:10:33,310 --> 00:10:38,890
हम चार छवियों के लिए यह अच्छा लेआउट सभी तरह के पार जा मिलता है।

113
00:10:39,160 --> 00:10:41,140
ठीक है तो मैं यह कैसे लगता है के साथ बहुत खुश हूँ।