बूटस्ट्रैप 4 नए और कूल फीचर्स जिन्हें आप प्यार करेंगे

बूटस्ट्रैप ढांचे की अगली प्रमुख रिलीज कोने के आसपास है। अल्फा संस्करण पहले से ही बूटस्ट्रैप की विकास वेबसाइट से डाउनलोड किया जा सकता है, और जीथब पर स्रोत कोड भी उपलब्ध है.

वर्तमान में ट्विटर बूटस्ट्रैप सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क है। यह डेवलपर्स को सक्षम बनाता है मोबाइल-प्रथम और उत्तरदायी वेबसाइटों का निर्माण, जल्दी से. बूटस्ट्रैप यह मानक एचटीएमएल 5, सीएसएस 3 और जावास्क्रिप्ट फ्रंटएंड तिकड़ी के स्मार्टली उपयोग को संभव बनाता है। यह वर्तमान में वेब पर 6 मिलियन से अधिक साइटों द्वारा उपयोग किया जाता है.

हालाँकि बूटस्ट्रैप 4 अभी भी विकास के चरण में है (इसलिए अभी तक लाइव साइट पर इसका उपयोग नहीं करते हैं), डेवलपर्स ने एक शानदार काम किया है। इस पोस्ट में हम नए संस्करण पर एक नज़र डालेंगे जिसमें कई शानदार विशेषताएं शामिल हैं जो निश्चित रूप से होंगी सुव्यवस्थित विकास कार्यप्रवाह को सुव्यवस्थित और सुधारें.

1. कम के बजाय सैस

अब तक बूटस्ट्रैप ने LESS को अपने मुख्य सीएसएस प्रीपोसेर के रूप में इस्तेमाल किया है, लेकिन नए प्रमुख रिलीज के लिए, स्टाइल नियमों को सास के लिए फिर से शुरू किया जाएगा, जो फ्रंटएंड डेवलपर्स के बीच बहुत अधिक लोकप्रिय है, का एक बड़ा योगदानकर्ता आधार है, आमतौर पर उपयोग करने में आसान और अधिक प्रदान करता है। संभावनाओं। C / C में लिखे गए शक्तिशाली Libsass Sass Complier की बदौलत++ बूटस्ट्रैप 4 बहुत तेजी से संकलित करेगा पहले से.

2. छोटे स्क्रीन के लिए नया ग्रिड टीयर

बूटस्ट्रैप में एक परिष्कृत उत्तरदायी ग्रिड सिस्टम है जो डेवलपर्स को विभिन्न व्यूपोर्ट के साथ उपकरणों को लक्षित करने की अनुमति देता है। वर्तमान में बूटस्ट्रैप 3 में कॉलम के लिए 4 ग्रिड कक्षाएं हैं, .कॉल-XS-XX मोबाइल फोन के लिए, .कॉल-SM-XX गोलियों के लिए, .कॉल-MD-XX डेस्कटॉप के लिए, और .कॉल-एलजी-XX बड़े डेस्कटॉप के लिए। बूटस्ट्रैप 4 एक पांचवें के साथ ग्रिड सिस्टम को बढ़ाएगा जो डेवलपर्स को सुविधा प्रदान करेगा 480px व्यूपोर्ट चौड़ाई के तहत छोटे उपकरणों को लक्षित करें.

नए ग्रिड वर्ग ने पिछले सबसे छोटे का नाम लिया है, और ग्रिड के वर्तमान नामों को एक पायदान ऊपर की ओर धकेल दिया है। बूटस्ट्रैप 4 में बड़े डेस्कटॉप उपयोग करेंगे .कॉल-XL-XX वर्ग चयनकर्ता। यह जानना महत्वपूर्ण है कि नए नाम के बावजूद उन्होंने अतिरिक्त बड़ी स्क्रीन के लिए, लेकिन अतिरिक्त छोटे लोगों के लिए एक नया वर्ग नहीं जोड़ा.

3. सापेक्ष सीएसएस इकाइयों का परिचय

बूटस्ट्रैप 4 अंत में इंटरनेट एक्सप्लोरर 8 के लिए समर्थन छोड़ देता है। यह वास्तव में एक स्मार्ट कदम है क्योंकि यह उन्हें पेसकी पॉलीफिल्स से छुटकारा पाने और रिश्तेदार सीएसएस इकाइयों में परिवर्तित करने की अनुमति देता है। पिक्सल के बजाय, नई प्रमुख रिलीज होगी REM और EMs का उपयोग करें यह संभव बनाने के लिए उत्तरदायी टाइपोग्राफी लागू करें बूटस्ट्रैप साइटों पर। यह पठनीयता भी बढ़ाएगा, और अक्षम उपयोगकर्ताओं के लिए साइटों को अधिक सुलभ बना देगा.

यदि आप यह देखना चाहते हैं कि नए बूटस्ट्रैप 4 के साथ रिश्तेदार इकाइयाँ कैसे काम करती हैं, तो इस डेमो को कोडपेन पर देखें.

4. ब्रांड नए बूटस्ट्रैप कार्ड

विकास टीम ने बूटस्ट्रैप के उपयोगकर्ता इंटरफ़ेस के कुछ पिछले तत्वों को एकजुट करने का फैसला किया, इसलिए उन्होंने एक परिचय देने का फैसला किया नए UI घटक जिसे कार्ड कहा जाता है. कार्ड पूर्व कुओं, थंबनेल और पैनलों को बदल देंगे, और उपयोगकर्ताओं को अधिक सुव्यवस्थित वर्कफ़्लो प्रदान करेंगे। चिंता मत करो, कार्ड परिचित तत्वों, जैसे कि शीर्षक, हेडर और कुओं, थंबनेल और पैनल के पाद लेख रखेंगे.

जैसे-जैसे कार्ड वर्तमान UI घटकों की तुलना में अधिक लचीले होंगे, वे रचनात्मक कार्यान्वयन के लिए एक बड़ी जगह की अनुमति देंगे। कुछ ऐसे अग्रदूत हैं, जिन्होंने पहले ही बूटस्ट्रैप कार्ड्स के साथ कोडपेन पर प्रयोग किए हैं। आप उन्हें देख सकते हैं, या अपने कार्ड बना सकते हैं.

5. नया रिबूट मॉड्यूल

नया रिबूट मॉड्यूल पिछले को बदल देता है Normalize.css फ़ाइल रीसेट करें। यह इसे खाई नहीं करता है; इसके विपरीत, यह उस पर अधिक नियम बनाता है। इस कदम का लक्ष्य सभी जेनेरिक सीएसएस चयनकर्ताओं को शामिल करना और ए में रीसेट शैलियों को शामिल करना था एकल, उपयोग में आसान SCSS फ़ाइल. यदि आप बेहतर तरीके से समझना चाहते हैं कि नया मॉड्यूल कैसे काम करता है तो आप यहां स्रोत कोड देख सकते हैं.

यह जानना अच्छा है कि नई रीसेट शैलियों ने स्मार्ट तरीके से बॉक्स-साइज़िंग सीएसएस संपत्ति को सेट कर दिया है सीमा-बॉक्स पर तत्व, जो इसलिए पृष्ठ पर प्रत्येक बाल तत्व द्वारा विरासत में मिला है। नई शैली का नियम उत्तरदायी लेआउट को अधिक प्रबंधनीय बनाता है. यदि आप सामग्री-बॉक्स और बॉर्डर-बॉक्स लेआउट प्रकारों के बीच अंतर का अनुभव करना चाहते हैं, तो CSS-Tricks.com द्वारा प्रदान किए गए इस आसान डेमो पर एक नज़र डालें (यह बूटस्ट्रैप 4 के लिए नहीं बनाया गया था, यह सिर्फ दिखाता है कि बॉक्स-आकार आम तौर पर काम करता है).

6. ऑप्ट-इन फ्लेक्सबॉक्स सपोर्ट

बूटस्ट्रैप 4 सीएसएस 3 के फ्लेक्सबॉक्स लेआउट का लाभ उठाना संभव बनाता है, हालाँकि - चूंकि इंटरनेट एक्सप्लोरर 9 फ्लेक्सबॉक्स मॉड्यूल का समर्थन नहीं करता है - बूटस्ट्रैप 4 का डिफ़ॉल्ट संस्करण फ्लोट का उपयोग करता है और एक द्रव लेआउट को लागू करने के लिए सीएसएस गुणों को प्रदर्शित करता है.

फ्लेक्सबॉक्स में एक आसानी से उपयोग किया जाने वाला लेआउट है, जो उत्तरदायी डिजाइन में उत्कृष्ट रूप से उपयोग किया जा सकता है, क्योंकि यह एक लचीला कंटेनर प्रदान करता है जो या तो फैलता है या उपलब्ध स्थान को सर्वोत्तम तरीके से भरने के लिए सिकुड़ता है। यदि आप चुनते हैं तो केवल ऑप्ट-इन फ्लेक्सबॉक्स सुविधा का उपयोग करें नहीं IE9 के लिए समर्थन प्रदान करने की आवश्यकता है.

7. सुव्यवस्थित चर अनुकूलन

नए बूटस्ट्रैप रिलीज़ में उपयोग किए जाने वाले सभी Sass वेरिएबल्स को _variables.scss नामक एक एकल फ़ाइल में शामिल किया गया है, जो विकास प्रक्रिया को महत्वपूर्ण रूप से सुव्यवस्थित करेगा। आपको इस फाइल से सेटिंग को कॉपी करने के अलावा कुछ और करने की जरूरत नहीं है _custom.scss डिफ़ॉल्ट मान बदलने के लिए.

आप ऐसा कर सकते हैं कई चीजों को अनुकूलित करें जैसे रंग, रिक्ति, लिंक शैली, टाइपोग्राफी, टेबल, ग्रिड ब्रेकप्वाइंट और कंटेनर, कॉलम नंबर और गटर की चौड़ाई, और कई अन्य.

8. रिक्ति के लिए नई उपयोगिता कक्षाएं

बूटस्ट्रैप 3 में पहले से ही कई व्यावहारिक उपयोगिता वर्ग हैं जैसे कि फ्लोटिंग या क्लीयरफिक्स को बदलते हैं, लेकिन बूटस्ट्रैप 4 और भी अधिक जोड़ता है। नई रिक्ति कक्षाएं डेवलपर्स को अपनी साइटों पर पैडिंग और मार्जिन को जल्दी से बदलने की अनुमति दें.

नई कक्षाओं के लिए वाक्यविन्यास काफी सीधा है, उदाहरण के लिए .m-a-0 वर्ग लिंक एक शैली नियम है कि दिए गए तत्व के सभी तरफ मार्जिन 0 पर सेट करता है (मार्जिन-ऑल -0). जबकि मार्जिन का उपयोग करते हैं मीटर- उपसर्ग, गद्दी स्टाइल के साथ हैं पी- उपसर्ग। विकास डॉक्स में आप सभी नए रिक्ति उपयोगिता वर्गों पर एक नज़र डाल सकते हैं.

9. टूलटिप्स और पॉवर्स द्वारा संचालित टीथर

बूटस्ट्रैप में 4 टूलटिप्स और पॉपओवर सुपरकूल टीथर लाइब्रेरी का उपयोग करते हैं, एक पोजिशनिंग इंजन जो एक ही पृष्ठ पर दूसरे तत्व के बगल में एक बिल्कुल तैनात तत्व को रखना संभव बनाता है। इसका मतलब है टूलटिप्स और पॉपओवर स्वचालित रूप से ठीक से रखा जाएगा बूटस्ट्रैप 4 वेबसाइटों पर.

मत भूलो कि चूंकि टीथर एक तीसरी पार्टी जावास्क्रिप्ट लाइब्रेरी है, इसलिए आपको अपनी बूटस्ट्रैप.जेएस फ़ाइल से पहले इसे अलग से HTML में शामिल करना होगा।.

10. रिफैक्टेड जावास्क्रिप्ट प्लगइन्स

विकास टीम ने एक्मास्क्रिप्ट 6 का उपयोग करके नई रिलीज़ के लिए प्रत्येक जावास्क्रिप्ट प्लगइन को रीलेक्ट किया। नवीनतम स्पेसक्राफ्ट्स के स्मार्ट उपयोग और नवीनतम एन्हांसमेंट के साथ वे फ्रंटएंड अनुभव को बेहतर बनाने का इरादा रखते हैं।.

नए बूटस्ट्रैप 4 को अन्य जावास्क्रिप्ट सुधारों के माध्यम से भी देखा गया है, जैसे कि विकल्प प्रकार की जाँच, सामान्य अशांति के तरीके, तथा UMD समर्थन करते हैं, यह सभी सबसे लोकप्रिय फ्रंटएंड फ्रेमवर्क को पहले से कहीं अधिक सुचारू रूप से चलाने के लिए एक साथ काम करेंगे.

अब पढ़ें: बूटस्ट्रैप और फाउंडेशन के लिए 10 हल्के विकल्प