इस इकाई मैं तुम्हें jumbotron और बूटस्ट्रैप रूपों और आदानों सहित कुछ अन्य घटकों को दिखाने के लिए जा रहा हूँ में वापस स्वागत है।
लेकिन इससे पहले कि मैं कुछ है कि वास्तव में वास्तव में महत्वपूर्ण है जब हम इस तरह से बूटस्ट्रैप जैसे नए उपकरण सीख रहे संबोधित करने के लिए एक पल लेने के लिए चाहते हैं।
और शिक्षण लोगों के अपने अनुभव वेब डेवलपर्स बनने के लिए मैंने देखा है एक बूटस्ट्रैप पहली स्थानों पर जहां छात्रों में से कुछ असहज असहज महसूस करने के लिए शुरू की है और वे जैसे वे अगर वे कर रहे हैं पता है और फिर क्योंकि नहीं लग रहा है हम अचानक कोड किसी का एक गुच्छा भी शामिल कर रहे हैं और हमारे आवेदन में लिखा था।
लेकिन अगर आप यहाँ डॉक्स पर एक नज़र रखना है कि वे वास्तव में कर रहे देर तक वे व्यापक जो महान है रहे हैं, लेकिन वहाँ एक बहुत यहाँ है और मैं तुम्हें नहीं एक मैनुअल आप सब कुछ समझने के लिए पढ़ने के लिए है के रूप में इस फ्रेम करना चाहते हैं।
यह एक तरह नहीं है कि कैसे मार्गदर्शन करने के लिए आप इससे पहले कि हम बूटस्ट्रैप का उपयोग खत्म करने के लिए है।
यह एक संदर्भ जहां अगर आप का फैसला आप एक रूप है आप फार्म खंड को देखने की जरूरत है अगर आप एक मेज की जरूरत है।
आप तालिका अनुभाग मारा है, तो आप एक नव पट्टी की आवश्यकता होगी।
आप NFR खंड पर लग रही है लेकिन यह महत्वपूर्ण है कि आप डॉक्स की तरह है कि आप उन्हें का उपयोग किया जाएगा उनके कोड खंडों कुछ उदाहरण पढ़ने प्रदर्शनों मैं उपयोग कर लिए गए हैं बूटस्ट्रैप बाहर की जाँच को कॉपी कोड के यहां संदर्भित व्यक्ति बिट्स के लिए वापस आ रहा गैर रोक का इलाज इस बिंदु पर साल।
और मैं इसके बारे में सबसे बारे में बहुत अच्छा लग रहा है।
लेकिन मैं जब मैं बूटस्ट्रैप के साथ कुछ भी पर काम कर रहा हूँ डॉक्स खुला छोड़ दें।
मैं लगातार वास्तव में जल्दी वीडियो इस कोर्स में मैं कैसे एक वेब डेवलपर बनने के बारे में बात की एक में उदाहरण को संदर्भित कर रहा हूँ।
आप याद में और जानकारी के हर बिट जानने में एक विशेषज्ञ बनने नहीं कर रहे हैं।
हाँ आप चीजों को जानने की जरूरत है।
हाँ आप समझते हैं और कुछ चीजों को याद करने के लिए है, लेकिन आप एक विशेषज्ञ या memorization बनने नहीं कर रहे हैं।
आप जानकारी तक पहुँचने में एक विशेषज्ञ बन रहे हैं।
और उस जानकारी को आप याद होगा और यह एक बहुत की कुछ दस्तावेज या उदाहरण वीडियो किताबें संसाधनों के सभी प्रकार में ऑनलाइन होने जा रहा है।
ठीक है तो पूरे स्फूर्ति बात को योग करने के लिए।
असल में मैं तो बस आप ध्यान रखें कि bootstrap करने के लिए एक बहुत कुछ है, हाँ में रखना चाहते हैं और आप इसे का 20 से 30 प्रतिशत को देखने के लिए जा रहे हैं और वहाँ और अधिक वहाँ से बाहर एक बहुत कुछ है।
लेकिन उस से भयभीत नहीं है।
आप डॉक्स में पहुँच सहज महसूस करना चाहिए कि अगर आप कुछ है कि मैं तुम्हें दिखाता है कि कैसे करना है क्या करने की जरूरत है।
डॉक्स खोलो और यह देखने के लिए।
और वहाँ हमेशा महान उदाहरण और डॉटकॉम बूटस्ट्रैप हो पर स्पष्टीकरण है।
ठीक है तो आगे की हलचल के बिना की इन महत्वपूर्ण घटकों में से कुछ के बारे में बात करने के लिए आगे बढ़ना है और मैं तुम्हें Jumbotron दिखा कर शुरू करने के लिए जा रहा हूँ।
तो एक jumbotron अधिकारी डॉक्स के अनुसार एक हल्के लचीला घटक है कि वैकल्पिक रूप से अपनी साइट पर कुंजी सामग्री प्रदर्शित करने के लिए पूरे व्यूपोर्ट का विस्तार कर सकते हैं।
तुम यहीं एक का एक उदाहरण देख सकते हैं और यह वास्तव में बहुत आसान है कि हम एक jumbotron उपयोग करना चाहते हैं।
हम सब करने की जरूरत div वर्ग jumbotron और फिर जो भी हम उस के अंदर डाल Jumbotron का हिस्सा हो जाएगा के बारे में है।
तो चलो कि कोशिश करते हैं।
बस इसे नीचे बटन वर्ग Jumbotron जंबो Tron के साथ एक div होगा और फिर अगर अंदर वहाँ एक एच 1 या करते हैं कर रहे हैं एच -1 कहना है कि यह एक jumbotron है और फिर वहाँ में एक बटन जोड़ने वे यहाँ है बस की तरह है और हम करेंगे हमारे पैराग्राफ में रूप में अच्छी तरह एक पैरा जोड़ने सिर्फ jibberish होगा।
अच्छा अब के लिए पर्याप्त है।
और एक बटन और हमारे बटन सिर्फ वहाँ हाय कहेंगे।
ठीक।
और फिर एक बटन हम कुछ विकल्प हैं।
हम एक बटन सफलता करूँगा और मैं इसे बड़े बनाने के लिए और बचा लेंगे।
चलो हम क्या मिलता है पर एक नज़र रखना।
और वहाँ एक jumbotron आप देख सकते हैं कि यह हमारे ब्राउज़र विंडो की पूरी चौड़ाई लेता है और कि आम तौर पर हम क्या चाहते हैं नहीं है।
और क्या हो रहा है कि जो कुछ भी jumbotron कंटेनर के अंदर यह है की 100 प्रतिशत लेने के लिए सेट कर दिया जाता है।
इस मामले में यह कुछ भी के बाहर नहीं है।
लेकिन शीघ्र ही मैं तुम्हें ग्रिड प्रणाली और बूटस्ट्रैप जहाँ हम वास्तव में नियंत्रित कर सकते हैं कि कितना आप इस स्क्रीन के ऊपर ले अगर आप चाहते हैं यह केंद्रित किया जाना है और स्क्रीन की एक तिहाई तक ले जाना चाहता हूँ दिखा सकता हूँ।
स्क्रीन हम इन सभी विभिन्न विकल्पों हम bootstraps ग्रिड प्रणाली का उपयोग करके कर सकते हैं की एक चौथाई स्क्रीन का दो तिहाई।
अभी के लिए मैं आपको एक और तत्व हम कर सकते हैं, जिसमें न कंटेनर और क्या कंटेनर करना होगा करने के लिए बराबर वर्ग के साथ एक div है दिखाने के लिए जा रहा हूँ।
हम सिर्फ div वर्ग कंटेनर के अंदर सामान रखा तो यह है कि यह कुछ रिक्ति उसके आसपास कुछ गद्दी देता है और यह चीजों केंद्रित है।
तो कंटेनर का निरीक्षण लगता है कि यह आप देख सकते हैं यहाँ यह सब जगह ले लेता है, लेकिन यह इस पर काफी मार्जिन का एक सा है।
तो अगर हम सिर्फ ग्रिड प्रणाली है जो हम हम div वर्ग कंटेनर में जोड़ सकते हैं के बारे में बात नहीं की है का उपयोग करने के लिए बिना एक त्वरित सुधार चाहते हैं और अब हम इस अच्छी लग Jumbotron मिलता है।
और अगर हम इस कोड को हम पहले से ही अच्छी तरह से कंटेनरों में नीचे है कि ले जाएँ, लेकिन हम इसे Jumbotron अंदर नहीं रखा जाएगा।
आप देखेंगे कि यह अभी भी है कि कंटेनर से प्रभावित है।
तो Jumbotron बाहर लेकिन कंटेनर के अंदर बचाने के लिए और ताज़ा आप यह है कि कंटेनर के अंदर भी देख सकते हैं और यह है कि नेत्रहीन को दर्शाता है।
ठीक है घटकों और अगली बात यह है कि मैं तुम्हें दिखाता हूँ करने के लिए वापस सिर।
हम शीर्ष पर जाएँ।
हम पर जाने के लिए आकलन देखने के लिए है और मैं आप रूपों और कैसे उन काम दिखाता हूँ।
तो रूपों पर क्लिक करें और वहाँ काफी कुछ अलग प्रकार और विभिन्न उदाहरण है।
और मैं सिर्फ पहले से पहले हम कुछ भी टाइप उन के माध्यम से स्क्रॉल करेंगे।
तो यहाँ एक बूटस्ट्रैप फार्म का एक बुनियादी उदाहरण है।
आप बाजार में है कि यह बनाता देख सकते हैं।
तो फिर हम क्या एक इनलाइन फार्म के रूप में जाना जाता है है और हम इनलाइन प्रपत्र का एक और प्रकार है और अभी तक आदानों के विभिन्न प्रकारों के साथ एक और एक और फार्म का एक और प्रकार है।
और अब इस बारे में सभी फार्म के विभिन्न प्रकार है कि समर्थन कर रहे हैं आदानों के विभिन्न प्रकार को नियंत्रित करती है।
इसलिए इन सभी रंग का आप कर रहे हैं।
ईमेल नंबर सप्ताह का समय और इतने पाठ क्षेत्रों पर अलग-अलग चेक बॉक्स विकलांग चेक बॉक्स अक्षम रेडियो बटन इनलाइन चेक बॉक्स इनलाइन रेडियो बटन लटकती मेनू नीचे जा रहा रखने के चयन करता है।
हम अन्य राज्यों मंच है।
हम एक ध्यान राज्य है।
तुम्हें पता है कि नीले रंग के आसपास इस पर प्रकाश डाला देख सकते हैं।
यही कारण है कि डिफ़ॉल्ट बूटस्ट्रैप फोकस स्टाइल है।
हम यह भी विकलांग में जोड़कर आदानों निष्क्रिय कर सकते हैं और हम भी कुछ अन्य बातें हम क्या कर सकते मिल गया है, लेकिन मैं वापस जाने के लिए और वास्तव में बुनियादी exampled शुरू करने पर ध्यान केंद्रित करने जा रहा हूँ और मैं सिर्फ इस पूरे फार्म को कॉपी करके शुरू करेंगे खत्म हो गया और फिर हम इसे थोड़ा थोड़ा करके काटना करेंगे।
तो चलो यहाँ वापस जाना है और हम अभी सब कुछ होने के बाद इस फार्म को जोड़ देंगे।
लेकिन मैं यह कंटेनर के अंदर करना होगा।
मुझे एक पल के लिए इस पूर्ण स्क्रीन कर दूं।
हम अपने फार्म है और कहा कि फार्म के अंदर हम काफी सामग्री का एक सा मिल गया है।
के ब्राउज़र के लिए वापस जाने के लिए और क्या ऐसा लग रहा है पर एक नज़र रखना।
और पहली बात तो आप शायद नोटिस हूँ कि हमारे फार्म इस कंटेनर भर में सभी तरह से चला जाता है।
इसके साथ इस बात का 100 प्रतिशत तक ले जाता है और है कि कुछ हम नियंत्रित करने में सक्षम हो जाएगा।
एक बार जब हम बूटस्ट्रैप ग्रिड प्रणाली के बारे में बात करते हैं और आसानी से कहने के लिए सक्षम हो जाएगा इस तरह से भर में 50 प्रतिशत से जाना चाहिए।
तो यह है कि कुछ हम एक बार हम या बूटस्ट्रैप ग्रिड प्रणाली के बारे में बात करते हैं हम वहाँ बस अभी तक नहीं कर रहे हैं आसानी से परिवर्तन करने में सक्षम हो जाएगा।
तो हम बस इसके साथ जाने के लिए जा रहे हैं।
यह अभी के लिए 100 प्रतिशत तक ले जाता है।
यह एक विशाल अजीब लग मंच है, लेकिन वह ठीक है।
हम इसे प्यार करता हूँ कि यह कैसे है।
इसलिए हम वापस उदात्त करने के लिए जाने के लिए और एक समय में यह एक टुकड़ा काटना दूँगा।
तो हम उस मंच टैग के अंदर एक मंच टैग है।
वहाँ एक div वर्ग प्रपत्र समूह है और आपको लगता है कि क्या होगा अगर तुम वापस बूटस्ट्रैप डॉक्स के लिए जाना है और फार्म समूह के लिए एक खोज करते हैं और आप अधिकतम रिक्ति के लिए रैप लेबल और प्रपत्र समूह में नियंत्रण देख सकते हैं करता है के बारे में अधिक जानना चाहते हैं।
तो अगर हम इस पहले एक के आसपास है कि फार्म समूह वर्ग से छुटकारा पाने के लिए और हम पहली और दूसरी एक के आसपास यह करूँगा कि तुम क्या हम साथ खत्म होता देखेंगे।
मैं बचाने के लिए और ताज़ा आप देखते हैं कि कैसे रिक्ति उन सूचनाओं के बीच यहां बदलता हूँ।
इसलिए हम वापस जाने के लिए और है कि फार्म समूह जोड़ने और यह वास्तव में आप इसे कैसे उपयोग करें, जहाँ आप एक इनपुट और लेबल है और आप उन्हें एक साथ बांटा जा करने के लिए ही बना है चाहते हैं।
तो यहीं ध्यान देना सिर्फ अंतरिक्ष का एक छोटा सा सही वहाँ जोड़ा गया है।
यह सिर्फ अंतरिक्ष का एक छोटा सा यहीं कहते हैं जो प्रभावी समूहों इन दोनों को एक साथ नेत्रहीन और फिर पकड़ इनमें से एक साथ नेत्रहीन के रूप में अच्छी तरह से नीचे यहाँ है इन के रूप में।
तो यह है कि फार्म के समूह है।
और फिर लेबलों सिर्फ सामान्य हैं।
हम कुछ भी कोई Boucek वर्ग लेबल करने के लिए फैंसी जोड़ने की जरूरत नहीं है लेकिन इनपुट वहाँ एक वर्ग प्रपत्र नियंत्रण है।
तो चलो देखते हैं क्या होता है जब मैं इसे से छुटकारा मिलता है।
इसलिए मुझे लगता है कि यह पहली बस पर करते हैं और ईमेल इनपुट डाल दिया और वापस जाओ और ताज़ा करेंगे।
सूचना है कि यह पूरी तरह से वापस एक सामान्य डिफ़ॉल्ट ब्राउज़र निवेश करने के लिए बदल जाता है।
तो आप गोल कोनों नहीं मिलता है।
हम एक ही गद्दी और चीजों की रिक्ति नहीं मिलता है।
और हम भी एक ही ध्यान केंद्रित प्रभाव जब मैं हम एक नीले रंग की रूपरेखा मिल कर क्लिक नहीं मिलता है, लेकिन यह इस एक से अलग है।
बूटस्ट्रैप रूपरेखा एक छोटे से अधिक सूक्ष्म है और उन दोनों के बीच अभी तुरंत स्पष्ट दृश्य परिवर्तन कर रहे हैं, लेकिन वहाँ वास्तव में कुछ और महत्वपूर्ण अंतर यह है कि आप एक बार हम और जिस तरह ग्रिड प्रणाली के साथ काम कर रहा है कि वे व्यवहार करते हैं और दूसरे के साथ बातचीत देखेंगे तत्वों।
वापस जाने के लिए और फार्म नियंत्रण फिर से जोड़ देगा।
तो सच में अगर हम यह सब कुछ गढ़ने के लिए चाहते थे कि यहां प्रपत्र समूह और फार्म नियंत्रण करने के लिए नीचे फोड़े।
उन दो वर्गों चीजें अच्छे लग रहे बनाने के लिए वास्तव में जिम्मेदार हैं।
अब वहाँ इस पैरा वर्ग के लिए मदद ब्लॉक है और हम क्या हम उस से मिलता है पर एक नज़र ले जा सकते हैं।
यह इस पाठ यहाँ नीचे जो सिर्फ वर्ग के लिए मदद ब्लॉक के साथ अपने फार्म का हिस्सा है और यह है कि सामान के बारे में एक छोटा सा संकेत एक सूचक देता है और फिर हम यहाँ नीचे हमारे बटन है जो सिर्फ एक नियमित Pucelle बटन है या हम एक और ख के बीच हो जाते हैं गिर जाते हैं और हम इसे बड़ा या छोटा अतिरिक्त छोटे परिवर्तन बस किसी भी अन्य बटन की तरह रंग बना सकता है।
तो पहले से ही आप देख सकते हैं कि यह कैसे Legos जहां हम एक बटन लेगो है कि हम एक jumbotron में जोड़ सकते हैं जैसे एक छोटा सा है।
हम भी सिर्फ अपने दम पर जोड़ा जा सकता है या हम एक फार्म के बजाय इसे जोड़ सकते हैं।
यह सिर्फ एक छोटा प्लग और खेलने घटक है कि हम अपने आवेदन के विभिन्न भागों में जोड़ सकते हैं।
तो चलो वापस जाने के लिए और फार्म की एक अन्य प्रकार है जो इनलाइन रूप है पर एक नज़र रखना।
तो यह थोड़ा अलग दिखता है।
हम बस पर इस कोड को कॉपी और हम मतभेदों के साथ एक नज़र रखना यदि ऐसा है तो मुझे लगता है कि पहले फार्म छोड़ दो और लाइन के रूप में यहाँ नीचे एक टिप्पणी जोड़ें और के मांगपत्र चीजों को ठीक से जाने दूँगा।
अछा लगता है।
सूचना है कि सब कुछ समान है।
हम अभी भी आदानों हम प्रपत्र समूह है पर एक फार्म नियंत्रण नहीं है, लेकिन वहाँ एक बड़ा अंतर है।
सब कुछ इतनी है कि एक लाइन लाइन में कक्षा फार्म के साथ एक फार्म के अंदर है।
चलो बस आपको बताएंगे कि क्या इसे शुरू करने के लिए की तरह दिखता है।
मैं वापस जाने के लिए हमें लाइन के रूप में यह अच्छा यहाँ देता है।
और जैसे ही मैं उस से छुटकारा पाने के लिए और इसे बचाने के रूप में अब हम यहाँ है की तरह एक नियमित रूप से फार्म के लिए वापस चला जाता है।
तो सिर्फ एक ही वर्ग के सभी शैलियों कि नियंत्रित करेगा कि शामिल हैं।
तो हम लाइन में फार्म के रूप में रखेंगे।
और फिर रिक्ति अब सही आदर्श नहीं है।
यही कारण है कि जब हम ग्रिड प्रणाली के बारे में बात तय हो जाएगा।
वहाँ बहुत अधिक हम बूटस्ट्रैप रूपों के आसपास के बारे में बात कर सकता है।
हम शायद सिर्फ जटिल रूपों के निर्माण के लिए भारतीय नौसेना पोत और इन अलग अलग टुकड़ों और अलग अलग चीजें हैं जो हम कस्टम विभिन्न शैलियों के साथ हम काम कर सकते हैं, सभी प्रकार की नौकरशाही का आकार घटाने सत्यापन कर सकते हैं सभी का बहिष्कार सीखने बूटस्ट्रैप पर 30 से 45 मिनट का व्याख्यान कर सकता है।
लेकिन मैं ऐसा करने के लिए नहीं जा रहा हूँ।
हम महत्वपूर्ण मूल बातें शामिल है।
वहाँ रूपों में से दो प्रकार की रोटी और Boucek रूपों जहां हम बुनियादी नियमित रूप और फिर एक इनलाइन फार्म है और वहाँ बूटस्ट्रैप कि हम रूपों के आसपास का उपयोग कर के विभिन्न पहलुओं के बारे में कुछ अन्य सुविधाओं के लिए किया जाएगा की मक्खन की तरह कर रहे हैं।
लेकिन बजाय समय बिताने अभी और आप सभी भारतीय नौसेना पोत और बहिष्कार और PRICHEP रूपों मैं सिर्फ उन छोटे टुकड़ों में फेंक देंगे जब हम उन्हें जब हम वास्तव में बूटस्ट्रैप का उपयोग कर रहे हैं की जरूरत के छोटे विवरण पर नीचे दलदल।
तो दो रूपों के बारे में यहाँ takeaways दो वर्गों रहे हैं कि वास्तव में महत्वपूर्ण प्रपत्र नियंत्रण और फार्म समूह के रूप में नियंत्रण आदानों परिष्कृत बूटस्ट्रैप प्रपत्र समूह सिर्फ कुछ अच्छा रिक्ति जोड़ने बनाता होगा।
तो जो कुछ भी आप में डाल एक फार्म के समूह कुछ अच्छा रिक्ति और लाइन में तो एकल वर्ग के रूप में पानी का छींटा हो जाता है ने कहा।
आप में एक फार्म पर लपेट तो पूरे फार्म लाइन में चला जाता है।
और फिर हम भी Jumbotron के बारे में बात की थी।
बहुत साधारण वर्ग Jumbotron बराबर होती है।
तो अगर आप एक सहकर्मी देख सकते हैं।
और फिर हम एक कंटेनर के अंदर सब कुछ डाल दिया।
और आप को दिखाने के लिए अगर हम उस कंटेनर से छुटकारा पाने के क्या होता है।
सभी ताज़ा कि रिक्ति है कि अच्छा मार्जिन दूर हो जाता है।
कंटेनर अच्छा तरीका है बस अपने अनुप्रयोग पर रिक्ति की एक त्वरित बिट पाने के लिए इतनी बातें अपेक्षाकृत अच्छी लग रही है।
ठीक इससे पहले कि मैं इस वीडियो को खत्म हो तो मैं 10 सेकंड खर्च आप एक साइट है कि हम एक पूर्ण पीठ के अंत डेटाबेस है कि एक आवेदन का निर्माण करने जा रहे हैं दिखा देंगे नोड का उपयोग और एक्सप्रेस और मोंगो और नेवला और प्रौद्योगिकियों का एक गुच्छा जुड़ा हुआ है और हम का उपयोग इंटरफ़ेस प्रोटोटाइप करने के लिए बूटस्ट्रैप यह बहुत जल्दी अपेक्षाकृत अच्छी लग रही हो और आप देख सकते हैं कि हम एक jumbotron यहीं है।
हम बटन हम ग्रिड प्रणाली है कि मैं बाद में समझाता हूँ उपयोग कर रहे हैं से कुछ का उपयोग कर रहे हैं।
और फिर अगर मैं में प्रवेश करने के लिए जाने हम एक रूप है देख सकते हैं।
इसलिए इन प्रपत्र नियंत्रण है कि मैं ग्रिड प्रणाली का उपयोग स्टाइल है इतना है कि यह अप स्क्रीन की पूरी चौड़ाई नहीं ले करता हैं।
बल्कि यह केवल इस छोटे से मध्यम वर्ग तक ले जाता है।
इसलिए हम एक बार हम ग्रिड प्रणाली के बारे में बात करते हैं कि देखेंगे।