Tip:
Highlight text to annotate it
X
>> नील मेहता: तो नमस्ते करने के लिए यहां देख रहा है जो हर किसी के,
या ऑनलाइन देख रहा है, या दूर।
मेरा नाम नील है, इस CS50 है।
और आज की संगोष्ठी उत्तरदायी है बूटस्ट्रैप के साथ वेब डिजाइन।
ऐसा लगता है कि एक विषय है मेरे दिल के बहुत करीब है।
उम्मीद है, यह हो जाएगा अपने दिल के करीब
के रूप में अच्छी तरह से आज के सेमिनार के अंत तक।
इसलिए बूटस्ट्रैप।
आप में से कितने किया है किसी भी वेब विकास की तरह से पहले?
एक अच्छी रकम?
थोड़ा सा।
>> इसलिए बूटस्ट्रैप दुनिया की सबसे अधिक है लोकप्रिय, सामने के अंत ढांचा।
मैं चुन लिया है by-- यह प्रयोग किया जाता है एक यादृच्छिक websites-- की जोड़ी
Lyft, न्यूजवीक, और शोहरत।
यह वेबसाइटों की एक संख्या से प्रयोग किया जाता है।
यह एक वेब डिजाइन ढांचा है कि आप अपनी वेबसाइट बनाने दूँगी
सुंदर और संवेदनशील दोनों।
और मैं इन पर जायेंगे यहां दोनों अवधारणाओं।
खूबसूरत।
तो अगर आप पर सामान्य वेबसाइट है बस HTML द्वारा किया जाता है, जो छोड़ दिया,।
आप कक्षा में HTML सीखा है और लंबाई में अनुभाग में।
बूटस्ट्रैप बनाने के लिए एक रास्ता है अपनी वेबसाइटों सुंदर।
आप पर क्या ले जा सकते हैं अपनी स्क्रीन के बाईं ओर
और पर क्या है में बदल जाते हैं बहुत साथ अपनी स्क्रीन के दाईं ओर,
बहुत, बहुत कम कोड।
>> आप अच्छा नीले बटन मिलता है, तुम मिल फैंसी, स्क्रीन पर गोल किनारों
आप सूची दृश्य मिलता है, तुम मिल कार्ड, और ऐसा बहुत कम कोड के साथ पर।
कोई सीएसएस वास्तव में नहीं है कि आप अपने आप से लिखना है।
इसलिए बूटस्ट्रैप करने के लिए आपको अनुमति देता है इन पूर्व निर्मित सीएसएस है
आप रख सकते हैं घटकों अपने वेब पेज के अंदर
इसके बिना सुंदर लग रही बनाने के लिए अपने दम पर बहुत ज्यादा काम करते हैं।
यह वास्तव में एक बूटस्ट्रैप है, एक प्रारंभिक बिंदु,
अपने वेब विकास रोमांच के लिए।
और इसलिए तुम सिर्फ कर रहे हैं जब एक वेबसाइट मजाक
यह आरंभ करने के लिए एक बहुत अच्छी जगह है।
आप एक अच्छी लग रही वेबसाइट प्राप्त कर सकते हैं बहुत, बहुत कम काम के साथ।
और वास्तव में, हम जा रहे हैं यह अपने आप क्या करने के लिए
जैसे पाँच के पाठ्यक्रम में minutes-- 10 मिनट के भीतर।
तो यह बहुत आसान है कुछ महान वेबसाइट बनाने के।
तो यह है कि पहली बार हिस्सा है।
>> दूसरी part-- उत्तरदायी।
लोग, आजकल, न सिर्फ करना अपने लैपटॉप पर वेब का उपयोग।
वास्तव में, 2014 के रूप में, और अधिक लोगों को मोबाइल उपकरणों के माध्यम से वेब का उपयोग,
फोन, या गोलियों, या जैसे सेवाओं, या इतने पर वेबसाइटों की तुलना में।
और वेबसाइटों के पारंपरिक रूप से किया गया है लैपटॉप या डेस्कटॉप के साथ बनाया गया
दिमाग में।
और हां वेबसाइटों अक्सर नहीं हैं बहुत अच्छी तरह से अपने फोन के लिए उपयुक्त है।
आप कभी भी दौरा किया तो अपने फोन पर harvard.edu,
यह एक कष्टप्रद की तरह है अनुभव, है ना?
यह संवेदनशील नहीं है क्योंकि यही है।
हम बनाने की कोशिश कर रहे हैं उत्तरदायी हैं कि वेबसाइटों,
कि लोगों के स्क्रीन आकार का जवाब।
>> यह एक फोन है तो, अगर यह बात है फोन पर जाने के लिए जा रहा है।
यह एक गोली है, यह है टैबलेट पर जाने के लिए जा रहा है।
यह मैच समायोजित कर देता है इस्तेमाल किया जा रहा है कि स्क्रीन।
और इसलिए बूटस्ट्रैप भी कुछ प्रदान करता है उस के लिए बहुत, बहुत उपयोगी उपयोगिताओं।
और हम के रूप में अच्छी तरह से उस पर चर्चा करने जा रहे हैं।
तो फिर, दो भागों में देखते हैं सुंदर और जिम्मेदार Bootstrap--।
हम उन लोगों के बारे में बात करने जा रहे हैं।
सबसे पहले, सुंदर।
और फिर से उत्तरदायी।
>> हम कर रहे हैं कि इतना सब कोड today-- के बारे में बात करने जा रहा
हम उदाहरण के एक बहुत कुछ है करने के लिए जा रहे हैं, चुनौतियों का एक बहुत कुछ है, और इसलिए यह on--
सब यहाँ इस वेबसाइट पर रहता है।
इस स्लाइड हम बाहर भेज दिया है।
आप यहाँ कर रहे हैं, तो आप महसूस कर सकते हैं मुक्त कि नीचे लिखने के लिए नहीं करने के लिए।
आप दूर से देख रहे हैं, लग रहा है अपने कंप्यूटर पर इस को खींचने के लिए नि: शुल्क
भी।
तुम्हें शायद दौरान इसे की आवश्यकता होगी इस संगोष्ठी का कोर्स।
>> तो हम एक का उपयोग करने के लिए जा रहे हैं CodePen बुलाया वेबसाइट,
जो एक सहयोगी कोडिंग है इस संगोष्ठी के दौरान पर्यावरण,।
और CodePen-- और मैं हूँ वास्तविक fast-- यहां तुम्हें दिखाने
यह आप लिखने के लिए अनुमति देता है एचटीएमएल सहयोग से।
मैं मैं करने के लिए भेज सकते हैं, यह लिख सकते हैं आप दोस्तों, आप लोग इसे संपादित कर सकते हैं।
आप दूरस्थ रहे हैं, भले ही आप अभी भी यह है कि जिस तरह से उपयोग कर सकते हैं।
आपको कम से एचटीएमएल कोड टाइप कर सकते हैं शीर्ष और यह स्वचालित हूँ
में परिवर्तित हो तल पर वेब पेज।
तो यह आप के लिए एक रास्ता है जल्दी कोड बाहर की कोशिश करने के लिए
सामान की किसी भी तरह करने के लिए बिना अपने आईडीई, या अपनी खुद की वेबसाइट पर,
जो कुछ भी।
>> तो आगे चलते हैं और यह अपने आप को रोकना वेबसाइट, आप दूरस्थ कर रहे हैं
या तुम यहाँ कर रहे हैं, खासकर जब आप दूरस्थ रहे हैं।
is.gd/cs50boostrap।
नहीं, टोपियां, कोई अंडरस्कोर, कोई कुछ नहीं।
कौन हैं आप उन लोगों के तो यहाँ, बस मुझे एक अंगूठे दे
आप खींच लिया है जब तक कि वेब पेज।
अच्छा?
>> दर्शकों: हाँ।
>> नील मेहता: तो हम मिलेगा बस एक पल में है कि करने के लिए।
तो पहले, हम करने के लिए ले जा रहे हैं, कैसे आप अपने वेबसाइटों खूबसूरत बनाते हैं?
हम उबाऊ लेने के लिए सीखने के लिए जा रहे हैं पुराने एचटीएमएल, मैं तुम्हें पहले से पता चला है की तरह,
और में है कि बारी वास्तव में अच्छा घटकों,
अच्छा विगेट्स की तरह, अच्छा, रंगीन बटन, और लेबल, और टेबल,
और सभी, बूटस्ट्रैप का उपयोग।
इसलिए हम सभी के लिए खत्म हो जाना सकता है आप बस को खींच लिया कि CodePen।
यह इस तरह एक छोटा सा दिखना चाहिए।
यह हर किसी के लिए इस तरह दिखता है?
>> दर्शकों: हाँ।
>> नील मेहता: आप दूरस्थ रहे हैं, यह साथ ही इस तरह दिखना चाहिए।
यदि नहीं, तो मैं जल्द ही आपको बताएंगे कि कैसे आप इसे इस तरह से देखना प्राप्त कर सकते हैं
वीडियो के भविष्य के हिस्से में।
यहाँ तो हम लिखा है एक बहुत ही बुनियादी एचटीएमएल,
तरह तरह आप है कक्षा में उपयोग किया गया।
यह बहुत ही बुनियादी है।
कोई तामझाम नहीं।
और हम कुछ सामान है।
हम एक बहुत ही तैयार की है बहुत ही बुनियादी ऊपर से शुरू
Yalp फोन! जिसके साथ आप कर सकते हैं क्षेत्र में रेस्तरां मिल जाए,
और समीक्षा लगता है और उन सभी पर दिशाओं।
यह एक बहुत अच्छा विचार है।
यह पहले कभी नहीं किया है।
यह भी एक बहुत ही अनोखी नाम है।
>> तो क्या हम कोशिश करने के लिए जा रहे हैं मालिक की मदद के लिए क्या करना
Yalp की! उसकी वेबसाइट बनाने के वास्तव में, वास्तव में अच्छा लग रही हो।
तो, के साथ के मालिक शुरू करने के लिए Yalp! एक छोटे से खोज कर दिया गया है
बॉक्स, और एक छोटा सा बटन, और फिर शायद एक छोटे से
एक के लिए प्रकाश डाला क्षेत्र प्रकाश डाला रेस्तरां, और उसके बाद
अन्य रेस्तरां की एक सूची क्षेत्र में हैं।
तो हम बस के माध्यम से जा सकते हैं एचटीएमएल कोड असली तेजी से।
आप HTML के साथ लोगों को कैसे आराम कर रहे हैं?
हम एक छोटा सा किया है अनुभाग और भी कक्षा में।
सभ्य?
>> तो बस एक संक्षिप्त रूप में, एचटीएमएल होने के बारे में सब है
बताओ कि टैग या तत्वों कंप्यूटर कैसे वेब पेज को बाहर करना।
तो यह एच 1 आपका स्वागत है, H1 शुरू here-- Yalp करने के लिए !, कंप्यूटर बताता h1-- अंत,
एक बड़े शीर्षक आकर्षित यह Yalp में आपका स्वागत है, कहते हैं!
वहाँ अंदर।
हम यह भी रूपों है।
हम इस तरह आदानों कर सकते हैं, पाठ आदानों, पाठ बक्से के रूप में प्रस्तुत करना होगा जो
आप में लिखें।
तुम भी बटन है।
आप एक अच्छा, क्लिक करने योग्य बटन मिलता है।
यह सही कुछ भी नहीं है अब, लेकिन आप एक बटन मिलता है।
आप divs, या डिवाइडर, करने के लिए हो सकता है विभिन्न समूहों में अपने पेज को तोड़ने।
>> तुम्हें पता है, पैराग्राफ हो सकता है आप बटन है।
तुम तो पैराग्राफ है, तो आप, उल unordered सूची है
और कहा कि ली के अंदर सूची।
तो ये बहुत ही बुनियादी रहे हैं एक वेब पेज का निर्माण ब्लॉकों।
और वास्तव में, बहुत ज्यादा जैसा कि आप देख हर वेबसाइट
बनाया जा रहा है ये एक ही उपकरण का उपयोग कर।
बेशक, वे नहीं सभी करते हैं हम कर रहे हैं, क्योंकि यह बुरा लग
एक छोटा सा यह मसाला करने के लिए जा रहा है।
तो चलो इस बोरिंग पुराने एचटीएमएल और शुरू करते हैं सुंदर स्थल में बदलने
कि हम सिर्फ एक दो मिनट पहले देखा था।
>> तो चलो बहुत सरल बंद शुरू करते हैं।
तो हम यहाँ इस बटन है।
जैसा कि हमने देखा बूटस्ट्रैप में, हम कर सकते हैं एक अच्छी, खूबसूरत, नीला बटन है।
और कहा कि कस्टम सीएसएस कर रही द्वारा नहीं किया है।
यहाँ कोई कस्टम सीएसएस नहीं है।
यही कारण है कि वर्गों को जोड़ने के द्वारा किया गया है अपने HTML तत्वों के लिए।
आप कक्षाएं, या hrefs, की कोशिश की है या एंकर, या प्रकार = inputs-- के लिए "पाठ"
HTML तत्वों इन विशेषताओं हो सकता है।
वे अतिरिक्त जानकारी हो सकती है आप उन्हें दे सकता है।
>> और हां, इस मामले में, कक्षाओं के गुण हैं।
आप लिखना चाहते हैं तो, बटन वर्ग = तार के अंदर कुछ।
और कहा कि विशेषता बता देंगे कंप्यूटर, यह किसी भी, पुराने बटन नहीं है।
यह है कि एक बटन है बटन के इस वर्ग।
और इसलिए बूटस्ट्रैप, यदि आप इसे देना अपने तत्व पर एक खास शैली,
यह एक खास तरह से आकर्षित करेगा।
इसलिए मैं BTN-प्राथमिक Btn "लिखें।
BTN बटन के लिए एक संक्षिप्त नाम किया जा रहा है।
अब आप ध्यान देंगे कि मेरी बदसूरत बटन को निष्क्रिय
एक अच्छी, खूबसूरत, नीला बटन में।
हम इसे क्लिक करते हैं तो यह बहुत अच्छा लग रहा है।
>> और तो हमारे पास क्या होता है BTN वर्ग और BTN-प्राइमरी क्लास
हमारे तत्व पर।
और बूटस्ट्रैप मैं, ठीक है, में जाना है और कहना होगा इन दो वर्गों रहे हैं कि पता है।
इन दो है कि किसी भी तत्व कक्षाओं में इस तरह तैयार किया जाना चाहिए।
तो यह है कि आप संलग्न कैसे के मूल में है बूटस्ट्रैप में तत्वों के लिए शैलियों।
तुम सिर्फ उन्हें करने के लिए कक्षाएं देते हैं और इसे फिट देखता है के रूप में इसे बाहर वजन होगा।
तो यहाँ एक और उदाहरण है।
इनपुट में, हम जोड़ सकते हैं एक वर्ग = "फार्म-नियंत्रण"।
जहां आप और मैं जल्द ही दिखाता हूँ क्या कक्षाएं पता कर सकते हैं
तत्व के प्रत्येक प्रकार के लिए उपलब्ध हैं।
लेकिन वर्ग है कि हम सिर्फ दिसंबर, अच्छा, गोल कोनों है
वह यह है, अच्छा padding है यह एक अच्छा है, नीले रंग की चमक।
>> हम भी इस रूप में जा सकते हैं।
और वर्ग = "फार्म-इनलाइन", जो कर देगा हमारे फार्म, आप कल्पना कर सकते हैं, इनलाइन।
तो यह लग रहा है थोड़ा और अधिक हम पहले से ही पहले क्या था की तरह।
हम में से बाकी शैली के लिए पर जाने से पहले तो पृष्ठ के बारे में कोई सवाल है हम
किया था?
हम सिर्फ संलग्न कक्षाएं हमारे विभिन्न तत्वों के लिए।
और मैं बाद में तुम्हें दिखाता हूँ कैसे आप कर सकते हैं कक्षाएं उपलब्ध हैं पता लगाने की क्या।
हम कक्षाओं संलग्न कि कुछ शैली है।
और कहा कि ब्राउज़र बताता है का उपयोग कर पेज लेआउट करने के लिए कैसे
बूटस्ट्रैप के प्रदान की शैलियों।
दर्शकों से कोई सवाल?
>> अच्छा रहा अब तक?
कूल।
चुनौतियों का एक बहुत बूटस्ट्रैप है बस के साथ
घटक हैं जानने के क्या उपलब्ध है और आप उन्हें कैसे उपयोग करें।
और यह सब सीखा है यह भी अनुभव और साथ
प्रलेखन पढ़ने के माध्यम से, जो हम जल्द ही इस बारे में बात करेंगे।
इसलिए हम इस div है।
यह सिर्फ एक उबाऊ, पुरानी बात है।
हम किसी भी तरह से यह जोर देना चाहते हैं।
बूटस्ट्रैप में तो, देखते हैं एक उपलब्ध घटकों के बहुत।
और इस getbootstrap.com है।
यह एक बहुत ही उपयोगी संदर्भ है।
यह बातें शामिल like-- यहाँ आप एक बटन कैसे करते हैं।
और अगर आप एनएवी सलाखों कर सकते हैं, आप कर सकते हैं लेबल, आप सलाखों प्रगति कर सकते हैं,
आप सूची समूहों कर सकते हैं।
असल में, यह सभी प्रकार है आप एक वेब पेज देख सकते हैं।
>> यहाँ हम अभी से कोशिश करता हूँ कि एक है।
यह पैनल कहा जाता है।
क्या आपने कभी गूगल का उपयोग करते हैं अब, वे कार्ड है।
या किसी भी एंड्रॉयड डिवाइस कार्ड है।
वे छोटे सफेद बक्से है कि इसके अंदर का सामान है।
और इसलिए हम कोशिश करते हैं और क्या करने जा रहे हैं अपने आप को यहाँ एक बात का उपयोग कर कि
एक पैनल का आह्वान किया।
इसलिए हम वर्ग देते हैं = "पैनल हमारे बाहरी div करने के लिए पैनल-डिफ़ॉल्ट "
फिर हम = एक div वर्ग देते हैं - चलो सिर्फ इस दस्तावेज की जांच।
div class = "पैनल शीर्षक" और तो div class = "पैनलों-शरीर"।
फिर, के बारे में चिंता मत करो इस कोड को याद रखना।
यह ऑनलाइन उपलब्ध हो जाएगा।
>> तो क्या अब हम हमारे बोरिंग इस किया था और, पुराना div यह अच्छा है, थोड़ा कार्ड में बदल गया।
यह अच्छा padding है, यह सीमा है, इसे बाहर खड़ा
पेज के बाकी हिस्सों से, जो बहुत अच्छा है।
तो चलो में चलते हैं और इस जाओ बदल बटन दिशाओं अच्छी लग रही है।
दर्शकों में कौन बताना चाहता है मुझे मैं बटन करने के लिए क्या कर सकते हैं
यह बूटस्ट्रैप का उपयोग अच्छी लग रही बनाने के लिए?
हाँ?
>> दर्शकों: हम एक वर्ग जोड़ सकते हैं।
और हम = "Btn BTN-प्राथमिक" वर्ग कर सकता है।
नील मेहता: हाँ।
अन्य की एक गुच्छा है buttons-- के लिए उपलब्ध रंग
या उस बात के लिए कुछ भी, के लिए।
हम BTN-खतरा नहीं है और यह लाल कर सकते हैं।
हम वहाँ चलें।
हम यह हरे रंग बनाने के लिए BTN-सफलता कर सकते हैं।
एक गुच्छा है BTN-info-- हम क्या कर सकते हैं आप के लिए उपलब्ध हैं कि चीजों की।
तो अब मैं आप के लिए थोड़ा चुनौती है।
तो वहाँ एक और बात है मुझे छोड़ दिया है कि संयुक्त राष्ट्र के स्टाइल।
इस शीर्ष रेस्टोरेंट।
>> और हम एक बात का उपयोग करना चाहते हैं यह शैली की एक सूची समूह कहा जाता है।
तो आप को मेरी चुनौती है getbootstrap.com-- पर जाने के लिए
मैं इसे यहाँ तक खींच लेंगे।
getboostrap.com।
मिल जाए, getbootstrap.com करने के लिए जाओ वे सूची समूहों खत्म हो जाना जहां अनुभाग।
और तुम यहाँ एक देखेंगे उदाहरण और सही कक्षाएं
तुम बनाने के लिए उपयोग कर सकते हैं कि आपके इन अच्छी सूची समूहों में सूचियों।
इन उदाहरणों से बाहर काम कर रहे हैं कोड उदाहरणों में से क्या
कोड आप, क्या एचटीएमएल कोड का उपयोग आप का उपयोग करें, और है कि आउटपुट क्या।
>> तो मेरी चुनौती you-- को getbootstrap.com पर जाना है,
कि क्या आप यहाँ या घर पर हैं, और कोशिश करते हैं और इस उल करने के लिए शैलियों को जोड़ने के लिए
यह अच्छा लग बनाने के लिए।
और एक सूची समूह शैली का उपयोग करें।
तुम्हें पता है, एक दो मिनट ले जाना चाहता हूँ और, प्रलेखन खोज
इस अपने आप कोशिश की?
आप वेब विकास कर रहे हैं, क्योंकि यदि आप अपने काम का एक बहुत महसूस करेंगे
पढ़ने जा रहा है इस दस्तावेज़।
इसलिए मुझे लगता है कि यह परिचित पाने के लिए अच्छा है प्रलेखन पढ़ने के लिए के साथ
कैसे जहां क्या है यह पता लगाने के लिए, क्या कोड आप उपयोग कर सकते हैं उदाहरण हैं,
आप का लाभ उठाने कर सकते हैं।
>> तो फिर, getbootstrap.com, अवयव टैब पर जाएँ,
और फिर समूह सूची के लिए नीचे स्क्रॉल।
और आप कोड के उदाहरण देखेंगे कि आप अपने HTML कि फिट बनाने के लिए उपयोग कर सकते हैं।
तो मिनट की एक जोड़ी लेने और कोशिश करते हैं और यह अपने आप का पता लगाने,
आप यहाँ या घर पर कर रहे हैं या नहीं।
आप घर पर कर रहे हैं, तो वीडियो को थामने, शायद, और अपने आप को बाहर की कोशिश करो।
अगर आप के पास जाओ, अगर आप कर रहे हैं यहाँ हमारे website-- आप पेज को ताज़ा करते हैं,
तुम वहाँ पर इस देखेंगे।
यह बहुत ही कोड सिर्फ है सही वहाँ नई शैली जोड़ने।
तो कुछ मिनट लग।
मुझे आप अच्छा महसूस कर रहे हैं जब पता करते हैं यह या के बारे में जब आप पूरी तरह से खो रहे हैं।
अच्छा प्रतीत होता है?
कूल।
त्वरित तरफ आप उन लोगों के लिए घर में, हम इंतजार कर रहे हैं, जबकि,
आप GitHub साइट पर जाने के लिए यदि कि मैं एक दो स्लाइड पहले लगाई
वीडियो की शुरुआत की दिशा में, मैं एक GitHub रेपो, भंडार है
इस बात के लिए।
हम हो जाएगा कि इन सभी कोड उदाहरण यहीं जमा हो जाती है के बारे में बात कर रही है।
तो अगर आप इस-1.html चुनौती देने के लिए जाना है, तो हम अभी है कि सभी कोड है
हमारे CodePen पर।
तो आप बस आगे जाना है, और कॉपी कर सकते हैं यह, और अपने खुद के CodePen में चिपकाएं।
और इस तरह, आप रख सकते हैं हम यहाँ क्या कर रहे हैं के साथ।
तो खुले इस पेज की है और साथ ही हम संगोष्ठी के बाकी के माध्यम से जाना।
फिर, आप इसे आप क्या तरह देखना चाहता हूँ अपनी स्क्रीन के तल पर नीचे देखना
क्या आप वहां मौजूद हैं।
अच्छा लग रहा है?
ठोस।
के लिए हर किसी के लिए इंतजार करना चाहिए वे क्या कर रहे हैं के साथ खत्म।
>> हाँ?
>> दर्शकों: मैं चाहता था कि मान लीजिए home-- में बूटस्ट्रैप का उपयोग करने के लिए
नील मेहता: हाँ।
दर्शकों: मैं, वेबसाइट पर देखते हैं, पेज शुरू हो रही है।
उन्होंने मुझे विकल्प देने बूटस्ट्रैप, स्रोत कोड, या सास।
मैं इनमें से कौन सा करना चाहते हैं?
>> नील मेहता: हाँ।
तो सवाल है, आप कैसे प्राप्त करते हैं खुद के द्वारा बूटस्ट्रैप का उपयोग शुरू कर दिया?
यह बस के लिए होता है जादुई यहीं काम करते हैं।
हम समय में तो अगर संगोष्ठी के अंत में,
मैं कैसे कर सकते हैं तुम्हें दिखाता हूँ अपने स्वयं के वेब पेज पर यह मिलता है।
यहाँ की तरह, मैं वास्तव में है कुछ सेटिंग्स में डाल दिया है कि
यह स्वचालित रूप से होगा भरी हुई है, लेकिन मैं हूँ
आप से यह करने के लिए दिखाने अपने स्वयं के वेब पन्नों पर खरोंच।
>> दर्शकों: धन्यवाद।
>> नील मेहता: हाँ।
अच्छा प्रश्न।
अच्छा लग रहा है?
अच्छा लग रहा है?
कूल।
तो जो मुझे वे कैसे बनाया बताना चाहता है इस बात को अच्छी और Boostrappy लग रही हो?
हम उल में जोड़ने के लिए प्रथम श्रेणी क्या है?
दर्शकों: वर्ग = "सूची-समूह"।
नील मेहता: हाँ। सूची-समूह।
और हम फूल को क्या देते हैं तो?
कोई और?
दर्शकों: और फिर, के बाद कि, वर्ग = "सूची-समूह-आइटम"।
>> नील मेहता: हाँ।
>> दर्शकों: और यह है अगले एक के लिए एक ही है।
>> नील मेहता: ली वर्ग = "सूची-समूह-आइटम"।
तुम वहाँ जाओ।
हम हमारी अच्छी सूची समूह है, हम उम्मीद थी, बस की तरह।
तो यह तूम गए वहाँ।
10 मिनट में, हम बना दिया है इस उबाऊ, पुराने Yalp! पृष्ठ
अच्छा और पेशेवर लग रही है।
और यह सिर्फ शुरुआत है।
तो अब आपको लगता है कि उस बारे में अच्छा है, चलो
बस आगे बढ़ो और के बारे में बात एक जोड़े को और अधिक घटकों कि
आप के रूप में काम में आ सकता है अपने साहसिक भर में जाना।
>> बेशक, यहाँ एक बहुत लोगों को नहीं है।
और अब आप सीखा है कि सूची समूहों कैसे करना है,
तुम बहुत ज्यादा सिखा सकते हैं अपने आप को कैसे इनमें से कोई भी कार्य करने के लिए।
लेकिन जाहिर है, चलो बस की कोशिश करते हैं और, और अधिक खुद को एक जोड़ी है
आप के लिए एक महसूस हो तो बस इतना आप उन्हें कैसे उपयोग हो सकता है।
मैं बस जाने के लिए जा रहा हूँ यहाँ इस उदाहरण के लिए।
फिर, कोड मैं सिर्फ चिपकाया है कि यहाँ यहीं में उपलब्ध है।
तो यह ऊपर खींचने के लिए स्वतंत्र महसूस।
>> इसलिए हम पहले से ही के माध्यम से चला गया है इन उदाहरणों में से एक जोड़े।
इसलिए हम बटन है, जो हम पहले से ही कैसे करना है देखा है।
हम बटन बड़ा कर सकते हैं।
बटन class-- तक यह चला जाता है BTN-एलजी Btn और BTN-डिफ़ॉल्ट यह सफेद बनाता है।
तो यह हमारे बटन बड़ा बना देता है की तुलना में यह अन्यथा हो सकता है।
अगर आपके पास यह काम में आ सकता है बड़े बटन या कुछ और सबमिट करें।
हम सूची समूह उदाहरण देखा हम फार्म उदाहरण देखा।
>> एक बहुत ही महत्वपूर्ण एक प्रतीक है।
और माउस को आप को जोड़ने के लिए एक तरह से कर रहे हैं चेक की तरह दिलचस्प बातें,
निशान, या pluses, या दोस्त प्रतीक, या पुनः आरंभ चिह्न,
अपने वेब ऐप्लिकेशन पर या जो भी हो।
तो फिर, यहाँ में, अगर हम घटकों, Glyphicons,
बूटस्ट्रैप के लिए उपलब्ध प्रतीक हैं।
एक संपूर्ण नहीं है यहां सभी लोगों की सूची।
तो बस एक उदाहरण के रूप में, की कोशिश करते हैं और एक जोड़ दें।
>> तो फेसबुक की तरह, हम कोशिश कर रहा हो एक ऐड मित्र के बटन है।
के पहले कुछ शैली जोड़ दें।
बटन वर्ग = "BTN-सफलता Btn"।
और वहाँ हम चले।
चलो यहाँ एक आइकन जोड़ दें।
क्या आइकन है, तो आप क्या लगता है यहाँ डाल करने के लिए अर्थ हो सकता है?
तुम्हें शायद पर देखा है कुछ वेब पृष्ठों या जो कुछ भी,
लेकिन एक आइकन का एक उदाहरण है कि क्या इस बटन के अंदर अच्छी तरह से जाना हो सकता है?
इस दृश्य ब्राउज़ करने के लिए स्वतंत्र महसूस आप किसी भी प्रेरणा की जरूरत है।
उपयोगी की एक बहुत कुछ है यहां उपलब्ध हैं।
हाँ?
>> दर्शकों: शायद Glyphicon उपयोगकर्ता एक?
नील मेहता: ठीक है।
यह वाला.
वो काफ़ी अच्छा है।
हाँ।
फेसबुक पर, मुझे लगता है कि इस तरह एक सा लग रही होगी।
यहाँ तो हम कैसे जाने के बारे में है हमारे पृष्ठों के लिए माउस को जोड़ने।
हम सिर्फ एक span-- अवधि एक है कुछ के लिए तटस्थ कंटेनर।
एक div कुछ के लिए एक कंटेनर है, एक अवधि एक और कंटेनर है।
divs लाइन टूट जाता है उन्हें चारों ओर, फैला नहीं है।
इसलिए अलग-अलग तरीके है सामान्य कंटेनरों कर रही है।
यह मतलब नहीं है की तरह इसे लगाने के लिए एक पैरा या कुछ भी के अंदर।
हम इसे लगाने के लिए मिल गया है हालांकि कुछ अंदर,
तो हम सिर्फ एक अवधि के अंदर डाल दिया।
इसलिए अवधि वर्ग = Glyphicon Glyphicon-उपयोगकर्ता "करीब काल।
और अब हम बटन अंदर आइकन।
>> तो यह पूरी तरह से विपरीत नहीं लगती है आप facebook.com पर क्या देख सकते हैं।
और तो यह है कि इन कर सकते हैं कि अच्छा है वास्तव में कहीं भी रखा जो आप चाहते हो।
अपने शीर्षक सलाखों में अपनी सूची समूहों में।
जो कुछ।
यह होना जरूरी नहीं है एक बटन के अंदर।
एक उदाहरण के रूप में, मैं कर सकता हूँ तो यहां एक ही कक्षा में डाल दिया।
"Glyphicon Glyphicon-उपयोगकर्ता"।
और यह सिर्फ एक ही प्रकट होता है।
तो ये आप अवधि का उपयोग कर सकते icons-- वर्ग = "Glyphicon Glyphicon-जो कुछ भी"।
और कहा कि आप जोड़ देंगे जहाँ आप चाहते हैं प्रतीक।
और माउस के एक बहुत ही महत्वपूर्ण हैं एक वेबसाइट देखो बनाने का हिस्सा
पेशेवर और अच्छी तरह से किया।
इसलिए यह ज्यादा है, लेकिन यह नहीं है अक्सर एक अच्छी बात को जानते हैं।
>> पैनलों, फिर से।
मैं सिर्फ एक संक्षिप्त रूप में फिर से इस करूँगा वे एक तरह से शामिल रहे हैं।
तुम में है कि नोटिस देंगे अपने सामान्य HTML मोड़
बूटस्ट्रैप-afied एक में साइट साइट, तुम होगा
वेबसाइट के लिए अतिरिक्त संरचना जोड़ने के लिए।
उदाहरण के लिए, हम अतिरिक्त राशि यहां divs सिर्फ उन क्योंकि
एक पैनल बनाने के लिए आवश्यक हैं।
तो बस मन में रखना है कि कि आप अतिरिक्त संरचना के लिए होगा।
तो "पैनल पैनल डिफ़ॉल्ट"।
हो सकता है कि यह पैनल शीर्षक है।
मैं यह पैनल-शीर्षक लगता है।
हाँ।
हम वहाँ चलें।
तो, फिर से, हमारे पैनल है।
>> एक और बात यह है कि हम , अभी तक टेबल कवर नहीं किया।
बदसूरत के तयशुदा नज़र तरह से टेबल्स,।
इस तरह।
लेकिन टेबल, ज़ाहिर है, कर रहे हैं एक बहुत ही महत्वपूर्ण हिस्सा
आप वेब विकास में क्या करेंगे की।
Pset7, उदाहरण के लिए, CS50 में जल्द ही बाहर आ जाएगा जो वित्त,
आप तालिकाओं का एक बहुत का उपयोग करेंगे।
और वेब देव का एक बहुत एक बहुत का उपयोग जानकारी प्रदर्शित करने के लिए टेबल की,
स्टॉक, या स्कोर, या जो भी पसंद है।
>> तो टेबल स्टाइल वास्तव में बहुत आसान है।
आप अपनी मेज पर तालिका वर्ग को जोड़ने।
और, मैं इसे बहुत अच्छा लग रहा है, कहने की हिम्मत।
आप अतिरिक्त बातें कर सकते हैं, जैसे "तालिका तालिका धारीदार"।
और तुम यहाँ परिणाम देखेंगे।
तुम मेज-bordered कर सकते हैं।
आप कर सकते हैं विकल्पों में से एक बहुत कुछ है।
लेकिन मूल रूप से, उनका कहना है एक मेज, टेबल वर्ग,
अपनी टेबल बहुत अच्छी लग रही होगी।
इसलिए इस बात का एक संक्षिप्त खड़ा होनेवाला है अधिक महत्वपूर्ण शैलियों में से कुछ
और घटकों तुम हूँ बूटस्ट्रैप के लिए उपयोग करने की जरूरत है।
इसलिए मैं लपेटता है कि लगता है हमारे सुंदर हिस्सा।
कैसे के बारे में अभी किसी भी सवाल अपनी वेबसाइटों को सुंदर बनाने के लिए?
आप इन का उपयोग कर सकते हैं कैसे अपने लाभ के लिए घटकों?
अच्छा लग रहा है?
हाँ?
दर्शकों: शायद यह एक मूर्खतापूर्ण सवाल है,
लेकिन आप विकिपीडिया पर बूटस्ट्रैप उपयोग कर सकते हैं?
आप एक विकिपीडिया पृष्ठ संपादन कर रहे हैं?
नील मेहता: हाँ।
सवाल था तो, मैं कर रहा हूँ एक विकिपीडिया पृष्ठ का संपादन,
मैं वहाँ में बूटस्ट्रैप शैलियों शामिल कर सकते हैं?
>> दर्शकों: हाँ।
>> नील मेहता: और इसलिए बूटस्ट्रैप है मूल रूप से एक बड़ा सीएसएस शैली पत्रक।
एक सीएसएस शैली पत्रक बस, जब भी कहते हैं मैं इस वर्ग है इन शैलियों देते हैं।
बूटस्ट्रैप के लिए सीएसएस शैली पत्रक तो .btn तरह कुछ होने जा रहा है,
बटन वर्ग, एक तरह से मिल जाएगा गोल कोने सीमा या जो भी हो।
तो बुनियादी तौर पर, बस एक यह बूटस्ट्रैप कक्षाओं का गुच्छा और शैलियों की एक गुच्छा
उन वर्गों के लिए निर्दिष्ट।
तो जब तक आपको लगता है कि सीएसएस के रूप में, अपने पेज में नियमों की इस सूची में,
आप बूटस्ट्रैप स्टाइल मिल जाएगा।
यही कारण है, ज़ाहिर है, पर आकस्मिक है अपने पेज में बूटस्ट्रैप शैलियों होने
शुरुआत के लिए।
>> और तो विकिपीडिया में, आप शायद नहीं कर सका
करना है कि विकिपीडिया की वजह उस में बूटस्ट्रैप नहीं है।
लेकिन यह बूटस्ट्रैप के लिए किया है, तो आप शायद ऐसा कर सकता है।
अगर तुम चाहते थे और, तुम सकता है यह भी शामिल है, लेकिन लगता है कि हो सकता है
पेज के मौजूदा लेआउट टूट गया।
लेकिन बहुत अच्छा सवाल है।
आप बूटस्ट्रैप उपयोग कर सकते हैं यह भी शामिल है, जहाँ कहीं भी
लेकिन यह डिफ़ॉल्ट रूप से में नहीं बनाया गया है।
>> दर्शकों: धन्यवाद।
>> नील मेहता: हाँ।
कोई और प्रश्न?
हाँ।
आप यहाँ या घर पर कर रहे हैं तो क्या, सिर्फ getboostrap.com-- फिर से याद है,
अपने दोस्त getboostrap.com-- है।
जब भी आप उपयोग कर रहे हैं बूटस्ट्रैप, यह तुम्हें दे देंगे
कैसे प्राप्त करने के बारे में निर्देश शुरू कर दिया, घटकों का उपयोग कैसे करें।
कुछ शांत जावास्क्रिप्ट नहीं है प्लग इन हम यहाँ पर नहीं जाना होगा कि,
लेकिन वे के रूप में अच्छी तरह से बाहर की जाँच के लायक हो।
तो यह अपने दोस्त है।
इसे पाने के लिए सिर्फ महत्वपूर्ण है इस का उपयोग करने के लिए कैसे करने के लिए प्रयोग किया जाता है।
>> तो चलो के बारे में एक सा चैट जाने संवेदनशील वेबसाइटों बना रही है।
जैसा कि मैंने पहले कहा तो, जैसा कि लोगों का इस्तेमाल किया उनके लैपटॉप, वे अपने फोन का उपयोग करें।
आप अच्छी तरह कल्पना कर सकते हैं और, यह है उस से भी एक बहुत अलग स्क्रीन आकार।
और इसलिए एक ही वेबसाइट कि मेरे फोन पर अच्छा लग रहा है
अच्छा देखने के लिए नहीं जा रहा है, जरूरी है, एक कंप्यूटर पर।
तो तुम्हें क्या करना है क्या है अपनी वेबसाइट के लिए अनुकूल हैं।
यह विभिन्न करने के लिए अनुकूल करने के लिए है स्क्रीन उस पर है कि आकार।
>> यह मैं एक से जानती हूँ, क्या कहना है कंप्यूटर, एक बड़ा लैपटॉप, मैं विस्तार करना चाहिए।
मैंने सोचा कि मैं एक फोन से जानती हूँ, मैं हटना चाहिए।
और इसलिए बूटस्ट्रैप कुछ प्रदान करता है बहुत, बहुत उपयोगी उपकरणों यह करने के लिए।
इसलिए बूटस्ट्रैप के आप तोड़ देना 12 कॉलम में एक वेबसाइट।
आप पंक्तियों बनाने के लिए और 12 कॉलम हो सकता है।
और अगर आप विभाजन कर सकते हैं उन लेकिन आप चाहते हैं।
तुम्हें पता है, एक है, बड़ी बात हो सकती है जो 12 कॉलम चौड़ा है।
आप दो बातें हो सकती है छह प्रत्येक रहे हैं।
तुम्हें पता है, चार एक बात है कि ऐसा कर सकते हैं दो है कि एक, या छह है कि एक।
आप तीन, तीन, तीन, तीन से कर सकते हैं।
आप क्या कर सकते हैं जो कुछ भी आप चाहते हैं कि टूटने।
>> इसलिए हो सकता है अपने वेब पेज एक की जरूरत है तीसरे एक चौड़ाई है कि बाएँ स्तंभ।
तो यह है कि चार स्तंभों होगा विस्तृत और पेज के बाकी
आठ कॉलम विस्तृत होगा।
तो यह एक उदाहरण है।
चलो एक और उदाहरण ऊपर खींच दें।
>> दर्शकों: हमेशा यह करता है एक भी विभाजित होना है?
यह एक सात, पांच विभाजन हो सकता है?
>> नील मेहता: हाँ।
यह सात, पांच हो सकता है।
हाँ।
जब तक यह 12 के लिए कहते हैं, यह ठीक है।
तो चलो यहाँ वापस जाओ।
फिर, कोड है कि यहां, यहां भी उपलब्ध है
उत्तरदायी उदाहरण के अंतर्गत।
तो मैं बस को खींच लिया कुछ यहाँ उदाहरण उत्तरदायी कोड।
तो आप का उपयोग करके ऐसा पंक्ति कहा जाता है एक बात है।
पंक्ति सिर्फ एक वर्ग है।
यह आप पर जोड़ने के लिए एक और शैली है आपके उन्हें अपने ही घटक बनाने के लिए divs।
>> तो अगर आप div कहते हैं, वर्ग = "पंक्ति", एक पंक्ति बनाने के लिए
अपने आप को अंतरिक्ष के 12 कॉलम देने के लिए।
और फिर आपको लगता है कि अंदर का कॉलम डाल दिया।
यहाँ तो हम सीओएल- -6 XS।
XS के बारे में चिंता मत करो।
हम एक सेकंड में के बारे में बात करेंगे।
लेकिन मूल रूप से, हम एक है विस्तृत छह है कि बात है।
हम इसे छोड़ दिया है कहते हैं।
और इतना है कि बाईं ओर बॉक्स में यहाँ है।
हम है कि एक बात है विस्तृत 12 कॉलम के छह।
और कहा कि एक सही पर है।
>> अच्छी तरह से सिर्फ बनाता देता है अपने div ग्रे इसे भरने के।
तो इतना है कि हम कर सकते हैं बस वे अलग हैं कि देखते हैं।
और इसलिए यह पहला उदाहरण है।
यह आप कैसे की एक बहुत ही सरल उदाहरण है यहाँ अपनी पंक्तियों और स्तंभों का प्रयोग करेंगे।
तुम वर्ग = "पंक्ति" का उपयोग कर एक पंक्ति को परिभाषित।
और फिर तुम वर्ग = "कर्नल-XS-6" करते हैं आधा, "कर्नल-XS-6" अन्य आधा करने के लिए।
यहाँ एक और अधिक जटिल उदाहरण है।
, टिनी पर नजर डालते हैं विशाल, बाकी है।
>> हम छोटे दो स्तंभों विस्तृत कर सकते हैं, हम विशाल छह कॉलम विस्तृत कर सकते हैं,
विस्तृत और बाकी चार स्तंभों।
यही कारण है कि 12 को कहते हैं।
और इसलिए इन फैले अंत पेज की चौड़ाई।
फिर, हम बाहर एक पंक्ति है।
तो फिर हम div class = "कर्नल-XS-2" है फिर 6, और फिर 4 और।
और कहा कि प्रदान करेगा हमारे लिए संरचना।
और इसलिए हम डाल सकते हैं जो कुछ भी बिल्ली हम यहाँ के अंदर चाहता हूँ।
इसके बजाय छोटे से, हम एक बटन डाल सकते हैं।
बटन वर्ग = "BTN-प्राथमिक Btn"।
और इतना है कि नोटिस हमारे बटन सभी चौड़ाई नहीं ले करता है,
लेकिन कम से कम यह सीमित है कि बहुत जगह के लिए।
>> तो यह है कि सब कुछ ठीक है और अच्छा है।
तो क्या अब हम हमारी वेब को तोड़ सकते हैं मात्रा में पेज, बुद्धिमान चौड़ाई।
हम एक छोड़ दिया है चाहता हूँ कह सकते हैं स्तंभ, और एक सही स्तंभ, और इतने पर।
लेकिन हम पर नहीं गए आप इसे उत्तरदायी बनाने के लिए कैसे।
और इसलिए बूटस्ट्रैप के रूप में अच्छी तरह से वैसा ही करेगा।
यह ब्रेकप्वाइंट बुलाया इन चीजों की है।
तो यह है कि क्या यह जानने का एक तरीका है आप एक गोली पर कर रहे हैं, एक लैपटॉप पर हैं
आप एक फोन क्षैतिज पर कर रहे हैं, या आप एक फोन पर खड़ी कर रहे हैं।
यह स्क्रीन आकार को जानता है।
और चार श्रेणियाँ-- में यह टूट जाता है आमतौर पर, लैपटॉप है, जो बड़े या एलजी,।
गोलियाँ है जो एमडी या मध्यम,।
एसएम, छोटा है।
या XS, छोटे अतिरिक्त।
और तो आपके द्वारा निर्दिष्ट जब एक स्तंभ है, आप कहते हैं,
यह छह कॉलम चौड़ा किया जाना चाहिए एक अतिरिक्त छोटे डिवाइस पर।
हम कर्नल-XS-6 में किया था यही कारण है कि।
हम यह चाहिए कह रहे हैं कि विस्तृत 12 कॉलम के छह होना
एक अतिरिक्त छोटे डिवाइस पर।
यह कुछ भी बड़ा है और, अगर हम सिर्फ हूँ अतिरिक्त छोटे आकार का उपयोग करने के लिए डिफ़ॉल्ट।
की तुलना में यह कुछ भी बड़ा है अतिरिक्त छोटे, यह छह विस्तृत हो जाएगा।
और इसलिए हम उत्तोलन कर सकते हैं ये हमारे स्तंभों की बनाने के लिए
के विभिन्न राशि ले स्क्रीन आकार के आधार स्तंभों।
चलो इस संवेदनशील आकार बदलने के लिए चलते हैं।
इसलिए हम अपने कॉलम है।
और यह "कर्नल-एलजी -6 कर्नल-XS-12", कहते हैं।
तो क्या आप जानते हैं कि क्या दिया अब तक, तुम क्या करते
जा रहा है एक बड़े परदे पर होता है?
खैर, यह एक तरह से है रास्ता दे दिया, लेकिन क्या करना
आप यह देखना होगा लगता है एक बड़े परदे पर पसंद है?
और यही वजह है कि?
>> दर्शकों: यह है कि एक बड़े परदे पर, यह है
केवल एक ले जा रहा पूर्ण अंतरिक्ष के हिस्से?
इसमें से आधा तरह, मुझे लगता है?
>> नील मेहता: हाँ।
>> दर्शकों: और छोटे पर स्क्रीन, यह जा रहा है
पूरे स्क्रीन, 12 को लेने के लिए।
नील मेहता: हाँ।
ठीक है।
एक उदाहरण के रूप में, चलो तो बस यहाँ नीचे देखो।
हाँ।
तो कुछ भी पर एलजी है कि या bigger-- तो मेरे कंप्यूटर होता है
क्योंकि यह lg किया जाना है सुंदर यह कर देगा wide--
की ओर से यह पक्ष यह कर्नल-एलजी -6 है क्योंकि।
यह बड़े पर है, क्योंकि यह बनाता है यह तो विस्तृत छह कॉलम और व्यापक छह कॉलम।
चलो मैं यदि देखो क्या होता है एक छोटे से एक में यह कर सकते हैं।
मैं सिर्फ संयुक्त राष्ट्र के पूर्ण स्क्रीन यह करने जा रहा हूँ।
और मैं स्क्रीन हटना करने के लिए जा रहा हूँ।
मैं स्क्रीन हटना करने के लिए जा रहा हूँ, तो यह मैं एक छोटे डिवाइस पर हूँ की तरह लग रहा है।
इसलिए मैं इसे इस तरह से हटना करने के लिए जा रहा हूँ।
>> और देखा।
अब यह खड़ी है अब हम चले गए हैं, क्योंकि
बड़े है-- से यह शायद है एक अतिरिक्त छोटे स्क्रीन आकार।
और अब तो यह ठीक है, हम नहीं कर रहे हैं, कहते हैं, बड़े में, हम अतिरिक्त छोटे देश में कर रहे हैं।
इसलिए हम प्रयोग करने जा रहे हैं अतिरिक्त छोटे आकार।
और हम XS-12, XS-12 के लिए जा रहे हैं।
तो यह खड़ी हो जा रहा है।
और अभी वहाँ है कि नोटिस एक बात यह है कि एक breakpoint बुलाया।
एक ब्रेकप्वाइंट जहां है आप परिवर्तन कर दिया
, छोटा करने के लिए अतिरिक्त छोटे से इतने पर बड़े, और करने के लिए छोटा है।
>> तो बस मैं इस स्लाइड के रूप में है कि नोटिस बाहर है, अंत में, आप इस बात के लिए मिल जाएगा
जहां वे कंधे से कंधा मिलाकर होना करने के लिए कूद जाएगा।
तुम वहाँ जाओ।
तो सही वहाँ ब्रेकप्वाइंट नहीं है।
इसलिए हम इसे और भी अधिक जटिल बना सकते हैं।
अब हम ये कह सकते हैं बातों के चार व्यापक होना चाहिए।
यही कारण है कि वे चाहिए, है एक तिहाई के बारे में ऊपर ले
बहुत बड़े उपकरणों पर भाषण की।
एक मध्यम डिवाइस पर, इसे ले जाना चाहिए आधा स्क्रीन को यह एमडी 6 क्योंकि।
एक बहुत छोटे से डिवाइस पर, यह 12 से ऊपर रखना चाहिए।
और इसलिए यह बहुत स्वाभाविक लगता है।
चलो बस खुद के लिए बाहर की कोशिश करते हैं।
>> एक बड़े परदे पर तो, वे चार विस्तृत कर रहे हैं।
यह एक छोटा सा हटना।
और वे अब छह चौड़े हैं।
तो यह छह, छह, छह है।
यह और भी अधिक है और फिर हटना वे पूरी तरह से खड़ी हो जाएगी।
यह इसलिए, उदाहरण के लिए, भावना, तो बनाता है आप खबर कार्ड की तरह कार्ड, कर रहे हैं
उदाहरण के लिए, जहां अगर यह एक बहुत ही बड़े परदे पर है
आप की ओर से कई पक्ष है, तो यह ठीक है वे सभी के लिए पर्याप्त कमरे में मिलता होगा।
लेकिन वे पर्याप्त जगह की जरूरत है।
एक छोटे परदे पर तो आप उन्हें देने के लिए चाहता हूँ
पेज के आनुपातिक अधिक कमरे,।
>> एक वास्तविक दुनिया उदाहरण के रूप में तो हम ट्विटर हम कहते हैं।
और हम तो, पाठ बॉक्स है आप पक्ष पर ट्वीट कर सकते हैं।
और हम ट्रेंडिंग की एक सूची है सही पक्ष पर विषयों।
तो एक बड़े परदे पर, हम चाहिए उन्हें कंधे से कंधा मिलाकर होना है,
इसलिए यदि आप एक गिलास में उन्हें देख सकते हैं।
लेकिन एक छोटे परदे पर, हम 12 और 12 को क्या करना चाहिए
इतना है कि ट्रेंडिंग टॉपिक्स कलरव क्षेत्र नीचे हैं।
कलरव क्षेत्र है, क्योंकि मुख्य बात यह है कि और एक छोटे परदे पर,
ट्रेंडिंग टॉपिक्स नहीं करते इस मामले में काफी के रूप में ज्यादा।
और इसलिए हम ऐसा है, तो सही उन्हें नीचे रख दिया वे दोनों के लिए पर्याप्त जगह मिल सकती है।
अब तक समझ बनाने के लिए?
>> दर्शकों: हाँ।
>> नील मेहता: ठोस।
कि सभी उदाहरण है, तो मैं यहाँ है।
की कोशिश करते हैं और एक चुनौती करते हैं।
तो फिर, इस चुनौती-2.html के लिए है घर पर साथ निम्नलिखित आप उन लोगों के।
तो मेरे दोस्त, मार्क ज़ुकेरबर्ग, दूसरे दिन मेरे पास आया।
और वह मेरे पास है, जैसे नील है वेब डिजाइन में बहुत अच्छा हो गया।
मैं HTML कर सकते हैं।
मैं इस छोटे बना दिया है फेसबुक पर नए संपादित करें।
मैं कैसे के लिए एक नया विचार है हम फेसबुक शैली चाहिए।
और यहाँ यह है।
यहीं।
यहाँ कुछ उदाहरण कोड है।
तो यह Fancybook कहा जाता है।
>> हम कुछ स्थिति अद्यतन है।
हम, निमो, माइक Kosowski है ***-- तीन स्थिति अद्यतन।
और फिर हम की एक सूची है सही यह नीचे ऑनलाइन दोस्तों।
तो वह अपने होमवर्क किया है।
उन्होंने कहा कि इस बारे में थोड़ा जानता है बूटस्ट्रैप, वह सूची दृश्य बना है,
वह एचटीएमएल का एक छोटा सा काम किया है।
इसलिए वह वेब पेज है।
लेकिन उन्होंने कहा, जैसे नील है, मैं नहीं सब पर उत्तरदायी डिजाइन को समझते हैं।
आप किसी भी विशेषज्ञों को जो करना मुझे उस के साथ मदद कर सकता है?
और सौभाग्य से, आप अब कर रहे हैं संवेदनशील डिजाइन में विशेषज्ञों।
>> वह मुझे वह यह थी कि बताया कि तो क्या हुआ Fancybook इस तरह से देखना चाहता है।
एक बहुत छोटे से डिवाइस पर, एक फोन, सब कुछ पसंद है
यहाँ की तरह, खड़ी की जानी चाहिए।
तो अगर आप समय है अग्रिम ऊपर, और उसके बाद
आप होना चाहिए तल पर बार चैट।
लेकिन एक गोली या एक माध्यम पर डिवाइस, यह आधा और आधा होना चाहिए
इस समय में के रूप में होना चाहिए आधा और चैटिंग की सूची
दूसरे आधे पर होना चाहिए।
>> फिर एक लैपटॉप पर, समय तीन चौथाई लेना चाहिए
और फिर चैट बचाव करना चाहिए एक और एक चौथाई तक ले।
और इसलिए वह जैसे नील है, मैं यह है कोड यहाँ है, लेकिन यह संवेदनशील नहीं है।
यह इस तरह से व्यवहार करने की जरूरत है।
ताकि आप के लिए मेरी चुनौती इस कोड दिया जाता है here--
आप ताज़ा करता है, तो अपने CodePens आप इस देखेंगे।
या आप बस कोड में पेस्ट यदि चुनौती-2 पर, आप इस देखेंगे।
>> इस उदाहरण कोड है।
आप कुछ xxxs देखेंगे।
मैं तुम्हें ऐसी है कि, xxxs को बदलना चाहते हैं समय और दोस्तों की सूची
यहां इन चश्मे के इस प्रकार है।
क्या है के बारे में चिंता मत करो अब के लिए समय के अंदर।
हम अगले चरण में है कि मिल जाएगा।
लेकिन अब के लिए, हम मिलता है तो चलो देखते हैं इन बातों को इस तरह से इसे अलग करने के लिए।
तो यह है कि समझ पड़ता है?
तो अगर आप घर पर कर रहे हैं, तो वीडियो को थामने के लिए और प्रयास
अपने वेब पेज बनाने के लिए इस तरह से संवेदनशील हैं।
आप यहाँ कर रहे हैं, तो ले लो दो, तीन मिनट की तरह।
एक पड़ोसी के साथ चैट करने के लिए स्वतंत्र महसूस और श्री ज़ुकेरबर्ग की कोशिश, और तय
संवेदनशील डिजाइन समस्या।
यदि आपके पास कोई प्रश्न हैं, मुझे यह बताने के लिए स्वतंत्र महसूस।
अच्छा लग रहा है?
क्या किया है?
अच्छा लगा।
>> दर्शकों: [अश्राव्य]।
नील मेहता: क्या?
>> दर्शकों: मैं अच्छा हूँ।
>> नील मेहता: ओह, अच्छा है।
अच्छा लगा।
दर्शकों: के बारे में बात 12, कि बूटस्ट्रैप यह है
12 के रूप में दिया स्क्रीन अंतरिक्ष व्यवहार करता है तो भर इकाइयों और है कि ऊपर बिताते हैं?
कैसे ठीक करता है इस के लिए काम proportioning?
>> नील मेहता: हाँ।
तो सवाल है, कैसे है proportioning करता है
ठीक है, बूटस्ट्रैप के लिए काम करते हैं?
>> दर्शकों: हाँ।
नील मेहता: तो जब भी आप एक div class = "पंक्ति" है,
कोई बात नहीं कितना बड़ा स्क्रीन है, बूटस्ट्रैप आप 12 इकाइयों दे देंगे
करने के लिए एक ही आकार के लगता है कि बहुत आकार ले।
तो कर्नल 1 में, यह 8.33% हमेशा स्क्रीन के आकार की,
कि इस व्यापक है कि क्या या कि विस्तृत यह है।
और हां, तो ज़ाहिर है, पर एक छोटे स्क्रीन, प्रत्येक स्तंभ छोटा होता है।
आप अभी भी 12 कॉलम है विस्तृत है, यह एक छोटी है।
तो यह आप पर निर्भर सुनिश्चित करने के लिए है चीजों को और अधिक स्तंभ ऊपर ले कि,
आनुपातिक, क्षतिपूर्ति करने के लिए अंतरिक्ष की कमी के लिए।
समझ आया?
>> दर्शकों: हाँ।
धन्यवाद।
नील मेहता: अच्छा सवाल है।
दर्शकों: एक बड़े पर स्क्रीन, तुम हो सकता है
इस समय तीन चौथाई तक ले?
>> नील मेहता: हाँ।
नील मेहता: कैसे लोग महसूस कर रहे हैं?
अच्छा?
कूल।
तो चलो वापस आते हैं।
और चलो कोशिश करते हैं और इस हिस्से को ठीक श्री जुकरबर्ग की वेबसाइट की।
इसलिए समय-सीमा में, यहां तक है शीर्ष, और दोस्तों की सूची
नीचे स्थित है।
और इसलिए हम सिर्फ आवंटित करने की जरूरत आनुपातिक नौकरशाही का आकार घटाने के साथ स्तंभों,
इनमें से प्रत्येक में।
तो यह पहली *** समय के लिए है।
क्या कक्षाएं हम यहाँ में डाल दिया है?
क्या आप एक आदमी में यहाँ डाल दिया?
तो एक बड़ी स्क्रीन पर, जरूरत है इसे याद रखना, चौड़ाई के तीन तिमाहियों को लेने के लिए।
और तो क्या आपको लगता है कि शैली देना होगा?
एक बड़ी स्क्रीन पर, तीन चौड़ाई की तिमाहियों।
हम वहाँ क्या वर्ग का उपयोग करते हैं?
दर्शकों: तो हम बस हो जा रहे हैं वर्ग की कि पहले उदाहरण संपादन।
नील मेहता: अभी के लिए।
हाँ।
>> दर्शकों: हम प्रत्येक संपादन नहीं कर रहे हैं समय के अलग अलग सुविधा?
नील मेहता: अभी नहीं, कम से कम।
इसलिए इस पूरे काम के एक ब्लॉक है।
हम सिर्फ बदल रहे हैं ब्लॉक की डिजाइनिंग।
यहाँ तो हम सीओएल- एलजी -9 करते है क्योंकि यह एक बड़े परदे पर 12 विस्तृत में से नौ।
और फिर एक मध्यम स्क्रीन पर, मैं कितने कॉलम मिलना चाहिए?
दर्शकों: यह माना जाता है आधा और आधा हो।
नील मेहता: ठीक है।
तो यह है कि कितने है?
>> दर्शकों: तो छह।
नील मेहता: छह।
और फिर अतिरिक्त छोटे अगर यह be-- चाहिए पंक्ति की पूरी चौड़ाई तक ले जाता है,
यह कितने होना चाहिए?
दर्शकों: 12।
नील मेहता: 12।
हाँ।
और अब हम करने के लिए मिल गया है यह अन्य लोगों को बदल सकते हैं,
इसलिए यह अंतरिक्ष के बाकी लेता है।
तो कर्नल-lg--
दर्शकों: यह जा रहा है पूरे स्क्रीन को ले?
नील मेहता: यह एक चौथाई तक ले जाता है एक बड़े डिवाइस पर स्क्रीन की,
हम यहाँ से पता चला है के रूप में।
>> दर्शकों: तीन।
>> नील मेहता: तीन।
और फिर कर्नल एमडी -6 लेने के लिए अंतरिक्ष के बाकी को।
कर्नल-XS-12।
तो अब हम समय है तीन तिमाहियों तक ले जा रही है
बड़े परदे में पेज की और फिर पक्ष पर एक चौथाई।
और फिर स्क्रीन नीचे आकार, तो यह उसी अनुसार आकार चाहिए।
तो यह अब खड़ी है एक बहुत ही छोटे परदे पर।
और हम एक छोटा सा यह आकार को अगर, वे वास्तव में आधा और आधा होना चाहिए।
इसलिए हम चाहते हैं कि इतनी दूर किया है।
बहुत ही शांत।
और इसलिए हम ऐसा नहीं करेंगे चुनौती के अन्य भाग।
तुम अपने आप ऐसा कर सकते हैं।
लेकिन मूल रूप से, आप के लिए है कोशिश करते हैं और इन उत्तरदायी बनाने
well-- समय बनाने के रूप में आइटम, खुद को, उत्तरदायी।
तो अब हम के माध्यम से चला गया है तुम्हें सिर्फ ज्ञान की आवश्यकता है
बूटस्ट्रैप के संवेदनशील पक्ष के बारे में।
संवेदनशील के बारे में किसी भी सवाल बूटस्ट्रैप के साथ डिजाइन
और कैसे आपको लगता है कि करने के बारे में जाना हो सकता है?
हाँ?
>> दर्शकों: यदि यह इसी तरह है हम एक एम्बेडेड वीडियो था
और हम नियंत्रित करना चाहता था पैमाने जो वीडियो was-- पर
वीडियो का आकार फोन करने के लिए लैपटॉप से जा रहा है।
नील मेहता: हाँ।
करीब करीब।
आप करने के लिए वीडियो बताने के लिए होता है यह दिया है के रूप में ज्यादा के रूप में कमरा ले,
जो कभी कभी थोड़ा गुस्सा आ रहा है।
लेकिन मूल विचार ही है।
किसी भी अन्य वस्तु की तरह एक वीडियो, पेज एक बटन या जो कुछ भी तरह,
जब तक आप उपयोग के रूप में स्तंभों और पंक्तियों,
आप इसे एक दे सकते हैं अंतरिक्ष की निश्चित राशि।
और तो यह है कि सम्मान के लिए एक हो रही है क्योंकि यूट्यूब की तरह अलग सवाल
एक निश्चित, वरीय आकार है embeds।
लेकिन सैद्धांतिक रूप में कम से कम, यह काम करेगा।
कूल?
>> दर्शकों: मैं तो लगता है एक छवि के लिए, वास्तव में आप क्या कर
के विभिन्न संस्करणों की आवश्यकता है विभिन्न आकारों में एक ही छवि
iPhone बनाम लैपटॉप के लिए?
हाँ सवाल है, तो हम करते हैं की जरूरत है के रूप में अच्छी तरह से उत्तरदायी हैं कि छवियों है।
और वास्तव में, यदि आप ऐसा कर सकते हैं।
मैं यह सीएसएस में लगता है।
लेकिन बूटस्ट्रैप की अनुमति देता है आप के रूप में अच्छी तरह से है कि क्या करना है।
आप उत्तरदायी छवियों हो सकता है।
आप अपनी छवियों का आकार हो सकता है पेज के आकार के अनुसार।
और एक बहुत ही नई बात नहीं है एचटीएमएल 5, एचटीएमएल के नवीनतम संस्करण,
और CSS3, नवीनतम सीएसएस के संस्करण, जो
आप अलग छवियों का अनुरोध करने देगा आप पर कर रहे हैं स्क्रीन आकार के आधार पर।
आमतौर पर, यह सिर्फ करने के लिए काफी अच्छा है अपनी छवि सिर्फ हटना या करने के लिए विकसित की है
हालांकि यह बड़ा होने की जरूरत है।
लेकिन अगर आप आप चाहते हैं, कर सकते हैं 32 से एक 32 के लिए है
बहुत छोटे परदे, और के लिए एक बड़ी स्क्रीन के लिए 64 से 64,
और फिर चुनिंदा उन लोगों की सेवा।
आप यह कर सकते हैं।
यह कुछ लोगों द्वारा किया जाता है।
यह अभी भी बहुत अत्याधुनिक है।
लेकिन कम जवाब, उत्तरदायी images-- बूटस्ट्रैप वहाँ दिन बचा सकता है।
कूल?
>> दर्शकों: धन्यवाद।
>> नील मेहता: तो चलो के बारे में कैसे असली तेजी से बात
अपने स्वयं के वेब पेज में इस पाने के लिए।
मान लीजिए कि आप अपने बनाने के लिए कहना चाहते हैं बूटस्ट्रैप का उपयोग स्वयं की वेबसाइट।
और तो बस अभी चलो यह एक साथ के माध्यम से चलते हैं।
मान लीजिए कि आप सिर्फ बनाने के कहने दो एक सामान्य HTML पृष्ठ।
में साथ पालन करने के लिए स्वतंत्र महसूस जो कुछ भी अपने पसंदीदा संपादक है।
तो हम बस कुछ HTML पृष्ठ है।
हम क्या कर सकते हैं! Doctype एचटीएमएल।
यह भी एचटीएमएल, हमारे पेज है।
कुछ नया नहीं।
हम पहले भी किया है।
यहाँ तो हम हमारे HTML है और हम यहाँ के अंदर सामान रख सकते हैं।
हम अपने बटन हो सकता है।
और जैसा कि मैंने पहले कहा था, यह जरूरी काम करने के लिए नहीं जा रहा है।
क्यों यह काम नहीं हो सकता है?
क्यों हम अपने लिए नहीं मिलेगा अच्छा, रंगीन बटन?
>> दर्शकों: हम यह लिंक नहीं था, क्योंकि बूटस्ट्रैप परियोजना या फाइल करने के लिए?
नील मेहता: हाँ।
सही है।
Bootstrap-- यह है क्योंकि सिर्फ एक फैंसी सीएसएस फ़ाइल।
यह शैलियों की एक श्रृंखला है कि अपने तत्वों से जुड़े होते हैं।
यहाँ हम हम है कि यह बता दिया है इन शैलियों का उपयोग करना चाहते हैं।
मैं आकार कि एक छोटा सा हूँ।
हम उपयोग करना चाहते हैं यह बता दिया है इन शैलियों, लेकिन हम कभी नहीं
शैलियों रहे हैं क्या यह बताया।
और कहा कि क्या आपके है पहले से सवाल किया गया था।
यही कारण है कि कि करने के लिए जवाब है।
हम शैलियों लाने के लिए एक रास्ता खोजने की जरूरत और किसी भी तरह हमारे पेज में उन्हें शामिल हैं।
और इसलिए बूटस्ट्रैप इच्छा कैसे करना है कि हमें पता चलता है।
>> तो अगर आप शीर्ष करने के लिए जाना है, तो यहां शुरू हो रही।
इसे डाउनलोड करने के लिए अलग अलग तरीके है।
यह जरूरी मतलब नहीं हो सकता है।
Bootstrap-- इस दूँगी आप सीएसएस ही फाइल को पकड़ो।
और अगर आप अपने खुद के पेज में यह भी शामिल है।
अगर आप चाहते हैं स्रोत कोड है अपने आप से उस पर हैक करने के लिए।
तुम सच में इस जरूरत नहीं है।
सास एक भाषा है कि सीएसएस में संकलित।
एक पूर्वप्रक्रमक के रूप में सोचो।
पीएचपी बहुत पसंद की एक पूर्वप्रक्रमक है एचटीएमएल, सास सीएसएस के लिए एक पूर्वप्रक्रमक है।
आप यह करना चाहते हैं तो इस तरह, आप ऐसा कर सकते हैं।
>> सबसे आसान तरीका है, एक समन्वय उपयोग कर रहा है या सामग्री के वितरण नेटवर्क।
यह एक वेबसाइट है कि बस बूटस्ट्रैप की एक प्रति में कार्य करता है
आप के लिए बहुत तेजी से अपने खुद के पेज में शामिल हैं।
यहाँ तो एक उदाहरण है।
यह आप इस लिंक तत्व दे दूँगा।
एक लिंक तत्व, अपने ब्राउज़र बताता है यहां जमा हो जाती है जो कुछ फ़ाइलें ले
और हमारे वेब पेज में शामिल हैं।
और इस मामले में, यह है बूटस्ट्रैप सीएसएस फ़ाइल।
तो हम उस यूआरएल को कॉपी, या बस देंगे कि पाठ, और हम इसे अंदर फेंक देंगे
हमारे सिर की।
>> और मैं इस के लिए पेज शुरू नहीं होगा, लेकिन आप यह काम करता है कि भरोसा कर सकते हैं।
लिंक आप सीएसएस मिल जाएगा।
यह में शामिल करें अपने पेज और फिर आप हो जाएगा
बूटस्ट्रैप के सभी का उपयोग करने में सक्षम क्या आप जानते हैं कि कक्षाओं और प्यार।
आप इसे स्थानीय रूप से रखना चाहते हैं और अपने खुद के फाइल सिस्टम पर है
बजाय करने के लिए जाने के लिए होने की इंटरनेट यह हड़पने के लिए,
जैसे यदि आप चाहते हैं साइट ऑफ़लाइन उपयोग करते हैं,
आप डाउनलोड विकल्प का उपयोग कर सकते हैं।
लेकिन सबसे अधिक भाग के लिए, का उपयोग समन्वय, उस तरह से क्योंकि बहुत जल्दी है
यह रूप में अच्छी तरह से आप के लिए अद्यतन रखा है।
आप मैन्युअल या तो इसे अद्यतन करने के लिए है।
सही बात?
>> इसलिए उपकरणों का एक बहुत कुछ इस का निर्माण किया जाएगा डिफ़ॉल्ट रूप से में। अपने Pset7 और Pset8 में,
मैं बूटस्ट्रैप का मानना है कि स्वचालित रूप से शामिल थे।
और CodePen में, के लिए उदाहरण के लिए, यह पहले से ही है
शामिल मैं क्योंकि कहा कि सेटिंग जोड़ें।
यदि आप कभी भी चारों ओर खेलना चाहते हैं तो इसके साथ, आप सिर्फ CodePen पर जा सकते हैं,
या अपने आईडी, या जो कुछ भी चले जाते हैं।
और आप करने में सक्षम हो सकता है वहाँ पहुँच बूटस्ट्रैप,
लेकिन यह हमेशा नहीं बनाया गया है में डिफ़ॉल्ट रूप से, वेब के लिए।
सही बात?
>> हाँ।
अभी हमारे पास एक recap-- के रूप में छोड़ दिया पाँच मिनट की तरह।
लेकिन एक संक्षिप्त रूप में, नई वेब पृष्ठों में, आप इस तरह से बूटस्ट्रैप शामिल कर सकते हैं।
तुम्हारे पास है और एक बार यह शामिल है, आप यहां सब मज़ा सामान कर सकते हैं।
आप पर जा सकते हैं, और तुम सिर्फ सोचना कर सकते हैं सीएसएस, आप कुछ शांत शैलियों में जोड़ सकते हैं,
आप घटक हो सकता है बटन की तरह,
और टेबल, और सूची हम उल्लेख किया है कि आइटम नहीं है।
कुछ शांत जावास्क्रिप्ट plugins रहे है, जो आप का पता लगाने के लिए चाहते हो सकता है।
वे कुछ शांत जोड़ने वेब पेज के लिए अन्तरक्रियाशीलता।
यह एक तरह एक मोडल संवाद बना देता है।
>> तो कुछ मज़ा सामान है आप बूटस्ट्रैप के साथ कर सकते हैं।
तो अपने आप को सलाह आगे जाना है और अपनी खुद की परियोजनाओं में उपयोग करते हैं,
निर्देशों का पालन करें हम बस, इसे पाने के लिए के रूप में कैसे किया
और सिर्फ बूटस्ट्रैप क्योंकि पढ़ा आप क्या करने के बारे में अधिक जानकारी देंगे।
और इसलिए हम चले गए हैं खत्म, आज, कैसे उपयोग करने के लिए
प्रलेखन, क्या इमारत ब्लॉक कर रहे हैं, और यह कैसे धारणात्मक है।
तो अब आप को मेरी चुनौती है बूटस्ट्रैप एक वेबसाइट का उपयोग कर सकते हैं।
डॉक्स में जाओ।
और हम है कि उपकरणों का उपयोग कोशिश करते हैं और उन्हें पार्स करने के लिए अब तक सीखा
और उन्हें समझते हैं।
और उन शैलियों और उपकरणों का उपयोग आप अपनी वेबसाइट में देखते हैं।
और यह सिर्फ एक बड़ा है प्रयोगात्मक प्रक्रिया।
>> एक खास शैली बाहर की कोशिश करो।
क्या यह काम करता है?
क्या नहीं है?
एक साथ सामान डालने की कोशिश करो।
देखो क्या होता है।
यह बहुत ज्यादा एक आत्म है निर्देशित, खोज की प्रक्रिया।
लेकिन आज, हम सीखा है बूटस्ट्रैप क्या है के बहुत मूल बातें?
क्यों यह काम करता है?
यह कैसे काम करता है?
हम का उपयोग शुरू कर कैसे यह पहली जगह में?
और अब तो आप कर रहे हैं कि कि कूबड़ पर, आप
ऐसा करने में सक्षम होना चाहिए बहुत आसानी से अपने आप से।
>> तो एक बार फिर से, सब हमने किया कोड यहाँ है।
यदि आप कभी भी चाहते हैं तो ऊपर पर एक ब्रश पाने के लिए,
जैसे, क्या एक त्वरित धोखा है शैलियों के सभी के लिए चादर?
आप यहाँ इस नमूने में जा सकते हैं।
हम यहाँ कुछ उदाहरण शैली है।
आप कोशिश करना चाहते हैं फिर अपने आप से चुनौतियों,
आप उन्हें यहाँ की कोशिश कर सकते हैं और समाधान की जाँच करें।
इसलिए इस कड़ी होगी स्लाइड, पर जिसमें शामिल
निश्चित रूप से आप के लिए बाहर भेजा जाएगा।
लेकिन इसे यहां भी है।
अगर आप चाहते हैं आप वीडियो को रोक सकते हैं।
आप सभी की जरूरत के बारे में जानकारी है इस साइट पर, सही यहाँ होने जा रहा।
किसी को भी किसी भी सवाल है, तो हम कर सकते हैं तो अगले कुछ मिनट के लिए उन्हें ले।
अन्यथा, आप सभी को धन्यवाद देखने के लिए बहुत ज्यादा।