बूटस्ट्रैप 5.3.0: इसकी रोमांचक नई विशेषताओं को अनलॉक करना

बूटस्ट्रैप एक लोकप्रिय फ्रंट-एंड फ्रेमवर्क है जिसने वेब विकास में क्रांति ला दी है। अपने नवीनतम रिलीज, बूटस्ट्रैप 5.3.0 के साथ, रूपरेखा ने रोमांचक नई सुविधाओं का खजाना पेश किया है और संवर्द्धन जो आपको आश्चर्यजनक, उत्तरदायी, सुविधा-संपन्न वेबसाइट और एप्लिकेशन बनाने के लिए सशक्त बनाते हैं।

डार्क मोड टॉगल करें

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

इस सुविधा का उपयोग करने के लिए, बस जोड़ें डेटा-बीएस-टॉगल = "डार्क-मोड" किसी भी बटन या लिंक तत्व के लिए विशेषता।

यहाँ एक उदाहरण है:

<बटनप्रकार="बटन"कक्षा="बीटीएन बीटीएन-प्राथमिक"डेटा-बीएस-टॉगल="डार्क-मोड">
 डार्क मोड टॉगल करें
बटन>

फ़ॉन्ट स्केल उपयोगिताएँ

बूटस्ट्रैप 5.3.0 फ़ॉन्ट स्केल उपयोगिताओं का एक सेट पेश करता है जो आपको बिना किसी पूर्वनिर्धारित स्केल के आधार पर अपने टेक्स्ट के आकार को जल्दी से समायोजित करने की अनुमति देता है

विशिष्ट फ़ॉन्ट मान स्वयं चुनें.

आप अपनी वेबसाइट या एप्लिकेशन पर स्केलेबल और सुसंगत टाइपोग्राफी प्राप्त करने के लिए अन्य बूटस्ट्रैप टाइपोग्राफी कक्षाओं के संयोजन में इन उपयोगिताओं का उपयोग कर सकते हैं।

यहां कुछ उदाहरण दिए गए हैं कि आप फ़ॉन्ट स्केल उपयोगिताओं का उपयोग कैसे कर सकते हैं:

<पीकक्षा="एफएस-1">यह सबसे बड़ा फ़ॉन्ट आकार हैपी>
<पीकक्षा="एफएस-2">यह थोड़ा छोटा फ़ॉन्ट आकार हैपी>
<पीकक्षा="एफएस-3">यह एक मीडियम फॉन्ट साइज हैपी>
<पीकक्षा="एफएस-4">यह एक छोटा फॉन्ट साइज हैपी>
<पीकक्षा="एफएस-5">यह सबसे छोटा फॉन्ट साइज हैपी>

गटर उपयोगिताएँ

बूटस्ट्रैप 5.3.0 में एक और नया जोड़ गटर उपयोगिताओं की शुरूआत है। ये उपयोगिताएँ कस्टम CSS लिखे बिना आपके बूटस्ट्रैप ग्रिड लेआउट में कॉलम के बीच गटर जोड़ना आसान बनाती हैं।

यहां एक उदाहरण दिया गया है कि आप गटर उपयोगिताओं का उपयोग कैसे कर सकते हैं:

<डिवकक्षा="पंक्ति जीएक्स -3">
<डिवकक्षा="कर्नल">कॉलम 1डिव>
<डिवकक्षा="कर्नल">कॉलम 2डिव>
डिव>

यह उदाहरण का उपयोग करता है जीएक्स-3 क्लास दो कॉलम के बीच 3 यूनिट (या 1.5rem) का गटर जोड़ने के लिए।

अद्यतन प्रपत्र नियंत्रण

बूटस्ट्रैप में प्रपत्र नियंत्रण स्थिरता और उपयोगिता में सुधार के लिए संस्करण 5.3.0 में अद्यतन किया गया है। नए प्रपत्र नियंत्रणों में चेकबॉक्स, रेडियो बटन, और चयन बॉक्स के लिए अद्यतन शैलियाँ, साथ ही बेहतर सत्यापन फ़ीडबैक शामिल हैं।

चेकबॉक्स और रेडियो बटन

बूटस्ट्रैप 5.3.0 चेकबॉक्स और रेडियो बटन के लिए नई शैली पेश करता है जो उन्हें उपयोग में आसान और अधिक सुलभ बनाता है। नए डिज़ाइन में बड़े हिट क्षेत्र और बेहतर फ़ोकस संकेतक हैं, जिससे आपके लिए इन इनपुट के साथ सहभागिता करना आसान हो जाता है।

यहां एक उदाहरण दिया गया है कि आप नई चेकबॉक्स शैलियों का उपयोग कैसे कर सकते हैं:

<डिवकक्षा="फॉर्म-चेक">
<इनपुटकक्षा="फॉर्म-चेक-इनपुट"प्रकार="चेकबॉक्स"कीमत=""पहचान="चेक1">
<लेबलकक्षा="फ़ॉर्म-चेक-लेबल"के लिए="चेक1">डिफ़ॉल्ट चेकबॉक्सलेबल>
डिव>

और यहां एक उदाहरण दिया गया है कि आप नई रेडियो बटन शैलियों का उपयोग कैसे कर सकते हैं:

<डिवकक्षा="फॉर्म-चेक">
<इनपुटकक्षा="फॉर्म-चेक-इनपुट"प्रकार="रेडियो"नाम="उदाहरण रेडियो"पहचान="रेडियो1"कीमत="विकल्प 1">
<लेबलकक्षा="फ़ॉर्म-चेक-लेबल"के लिए="रेडियो1"> विकल्प 1 लेबल>
डिव>

ध्यान दें कि यह मार्कअप कैसे उपयोग करता है .फॉर्म-चेक-इनपुट वर्ग इनपुट तत्व को ही स्टाइल करने के लिए, और .फॉर्म-चेक-लेबल लेबल को स्टाइल करने के लिए क्लास।

बक्सों का चयन करें

बेहतर स्थिरता और उपयोगिता के लिए नई शैलियों के साथ बूटस्ट्रैप 5.3.0 में चुनिंदा बॉक्स भी अपडेट किए गए हैं। नई चुनिंदा बॉक्स शैलियों में बड़े हिट क्षेत्र और बेहतर फ़ोकस संकेतक हैं, जिससे आपके लिए इन इनपुटों के साथ सहभागिता करना आसान हो जाता है।

यहां एक उदाहरण दिया गया है कि आप नई चयन बॉक्स शैलियों का उपयोग कैसे कर सकते हैं:

<चुननाकक्षा="फ़ॉर्म-चयन"aria-लेबल="डिफ़ॉल्ट चयन उदाहरण">
<विकल्पगिने चुने>इस चयन मेनू को खोलेंविकल्प>
<विकल्पकीमत="1">एकविकल्प>
<विकल्पकीमत="2">दोविकल्प>
<विकल्पकीमत="3">तीनविकल्प>
चुनना>

ध्यान दें कि आप कैसे उपयोग कर सकते हैं .फॉर्म-सिलेक्ट वर्ग चयन बॉक्स को ही स्टाइल करने के लिए।

सत्यापन प्रतिक्रिया

बूटस्ट्रैप 5.3.0 प्रपत्र नियंत्रणों के लिए नई सत्यापन प्रतिक्रिया शैली भी प्रस्तुत करता है। ये शैलियाँ आपके वेबसाइट उपयोगकर्ताओं को गलत तरीके से फ़ॉर्म भरने पर दृश्य फ़ीडबैक प्रदान करना आसान बनाती हैं।

यहां एक उदाहरण दिया गया है कि आप नई सत्यापन शैलियों का उपयोग कैसे कर सकते हैं:

<डिवकक्षा="रूप-समूह">
<लेबलके लिए="उदाहरण इनपुट पासवर्ड 1">पासवर्डलेबल>
<इनपुटप्रकार="पासवर्ड"कक्षा="फ़ॉर्म-नियंत्रण अमान्य है"पहचान="उदाहरण इनपुट पासवर्ड 1"प्लेसहोल्डर="पासवर्ड"आवश्यक>
<डिवकक्षा="अमान्य-प्रतिक्रिया"> कृपया एक मान्य पासवर्ड प्रदान करें। डिव>
डिव>

ध्यान दें कि कैसे ।इनवैलिड है वर्ग इंगित करता है कि इनपुट फ़ील्ड अमान्य है, और .अमान्य-प्रतिक्रिया वर्ग उपयोगकर्ता को एक संदेश प्रदर्शित करता है।

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

बूटस्ट्रैप 5.3.0 में रोमांचक संवर्द्धन

बूटस्ट्रैप 5.3.0 लोकप्रिय सीएसएस ढांचे के लिए एक महत्वपूर्ण अद्यतन है जो तालिका में कई नई सुविधाएँ और सुधार लाता है। डार्क मोड टॉगल से लेकर फॉन्ट स्केल यूटिलिटीज और गटर यूटिलिटीज तक, आपके निपटान में बहुत सारे नए टूल हैं जो आपको बेहतर वेबसाइट और एप्लिकेशन बनाने में मदद करते हैं।