v5 च माइग्रेट करना

v5.2.0 ऐ

ताज़ा डिजाइन

बूटस्ट्रैप v5.2.0 पूरे प्रोजेक्ट च मुट्ठी भर घटकें ते गुणें आस्तै इक सूक्ष्म डिजाइन अपडेट दी सुविधा दिंदा ऐ , जेह् ड़ी मती उल्लेखनीय border-radiusऐ बटनें ते फार्म नियंत्रणें पर परिष्कृत मूल्यें दे माध्यम कन्नै . साढ़े दस्तावेजें गी बी इक नमें होमपेज, सरल डॉक्स लेआउट कन्नै अपडेट कीता गेआ ऐ जेह् ड़ा हून साइडबार दे खंडें गी संकुचित नेईं करदा ऐ , ते बूटस्ट्रैप आइकनें दे होर प्रमुख उदाहरणें कन्नै .

होर सीएसएस चर

अस CSS चर दा इस्तेमाल करने आस्तै अपने सारे घटकें गी अपडेट कीता ऐ। जदके Sass अजें बी हर इक गल्ल गी आधार बनांदा ऐ, तां हर इक घटक गी घटक आधार वर्गें पर CSS चर गी शामल करने आस्तै अपडेट कीता गेआ ऐ (जियां, .btn), बूटस्ट्रैप दे होर रियल-टाइम अनुकूलन दी अनुमति दिंदा ऐ. बाद आह् ली रिलीज च, अस अपने लेआउट, फार्म, हेल्पर, ते उपयोगिताएं च CSS चर दे अपने इस्तेमाल गी विस्तार दिंदे रौह्गे। हर इक घटक च CSS चर दे बारे च उंदे सरबंधत दस्तावेजीकरण पृष्ठें पर होर पढ़ो.

बूटस्ट्रैप 6 तगर साढ़ा CSS चर दा इस्तेमाल किश अपूर्ण होग.जदके अस इन्हें गी पूरे बोर्ड च पूरी चाल्ली लागू करना पसंद करगे, एह् तोड़ने आह् ले बदलाव पैदा करने दा जोखिम जरूर चलांदे न. मसाल आस्तै, $alert-border-width: var(--bs-border-width)साढ़े स्रोत कोड च सेटिंग तुंदे अपने कोड च संभावित Sass गी तोड़दी ऐ जेकर तुस $alert-border-width * 2कुसै कारणै कन्नै करा करदे ओ.

इस चाल्ली, जित्थें बी होई सकै, अस होर CSS चर दी ओर धक्का जारी रक्खगे, पर कृपा करियै पन्छानो जे साढ़ा लागू करना v5 च थोड़ा सीमित होई सकदा ऐ.

नमां_maps.scss

बूटस्ट्रैप v5.2.0 ने इक नमीं Sass फाइल पेश कीती ऐ जिसदे कन्नै _maps.scss. _variables.scssएह् इक मुद्दे गी ठीक करने आस्तै जित्थै इक मूल नक्शे च अपडेट लागू नेईं कीते गेदे सेकेंडरी नक्शे पर लागू नेईं कीते गेदे हे जेह् ड़े उनेंगी विस्तार दिंदे न, इसदे केईं सस नक्शे गी बाहर कड्ढदा ऐ। मसाल आस्तै, अपडेट गी $theme-colorsहोर थीम मैपें पर लागू नेईं कीता जा करदा हा जेह् ड़े पर भरोसा करदे हे $theme-colors, कुंजी अनुकूलन वर्कफ़्लो गी तोड़दे होई. संक्षेप च, Sass च इक सीमा ऐ जित्थै इक बारी डिफाल्ट चर जां नक्शा दा इस्तेमाल कीता गेआ ऐ , तां इसगी अपडेट नेईं कीता जाई सकदा ऐ. CSS चर कन्नै बी इसी चाल्ली दी कमी ऐ जिसलै उंदा इस्तेमाल होर CSS चर बनाने लेई कीता जंदा ऐ।

इसी कारण ऐ जे बूटस्ट्रैप च चर अनुकूलन गी बाद च औना पौंदा ऐ @import "functions", पर पैह् ले @import "variables"ते साढ़े आयात ढेर दे बाकी हिस्से। सस्स नक्शे पर बी एह् गै लागू होंदा ऐ-तुसेंगी डिफ़ॉल्टें गी उंदी आदत होने थमां पैह् ले ओवरराइड करना होग। निम्नलिखित नक्शे नमें च लेई गे न _maps.scss:

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

तुंदे कस्टम बूटस्ट्रैप CSS बिल्डें गी हून इक बक्खरे नक्शे आयात कन्नै किश इस चाल्ली दिक्खना चाहिदा ऐ.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

नई उपयोगिताएं

• अर्धबोल्ड फॉन्टें लेई शामल करने आस्तै विस्तारित font-weightउपयोगिताएं ।.fw-semibold
• दो नमें आकारें गी शामल करने आस्तै विस्तारित border-radiusउपयोगिताएं.rounded-4 गी, ते .rounded-5, होर विकल्पें आस्तै.

अतिरिक्त बदलाव कीता गेआ

• नमां $enable-container-classesविकल्प पेश कीता। — हुण प्रयोगात्मक CSS ग्रिड लेआउट च चयन करदे बेल्लै, .container-*क्लासें गी अजें बी संकलित कीता जाग, जदूं तकर एह् विकल्प गी सेट नेईं कीता गेदा ऐ false. कंटेनर बी हून अपने गटर वैल्यू रखदे न।

• ऑफकैनवास घटक च हुन प्रतिक्रियाशील बदलाव ऐ . मूल .offcanvasवर्ग अपरिवर्तित रेह् दा ऐ-एह् सारे व्यूपोर्टें च सामग्री गी छिपांदा ऐ। इसगी प्रतिक्रियाशील बनाने लेई, उस .offcanvasवर्ग गी कुसै बी .offcanvas-{sm|md|lg|xl|xxl}वर्ग च बदलो।

• मोटे टेबल डिवाइडर हुण ऑप्ट-इन होंदे न। — असी तालिका समूहें दे बीच ओवरराइड करने आह् ली मोटी ते कठिन सीमा गी हटाई दित्ता ऐ ते इसगी इक वैकल्पिक वर्ग च लेई गेआ ऐ जिसगी तुस लागू करी सकदे ओ, .table-group-divider. इक उदाहरण आस्तै तालिका डॉक्स दिक्खो।

• Scrollspy गी इंटरसेक्शन ऑब्जर्वर एपीआई दा इस्तेमाल करने आस्तै दुबारा लिखेआ गेदा ऐ , जिसदा मतलब ऐ जे तुसेंगी हून रिश्तेदार पैरेंट रैपरें दी लोड़ नेईं ऐ ,offsetकॉन्फ़िगरेशन गी डिप्रिकेट करदा ऐ , ते होर मते सारे. अपने Scrollspy कार्यान्वयनें गी उंदी nav हाइलाइटिंग च होर सटीक ते सुसंगत बनाने आस्तै दिक्खो.

• पोपोवर ते टूलटिप्स हून सीएसएस चर दा उपयोग करदे न। चर दी संख्या गी घट्ट करने आस्तै किश CSS चर गी उंदे Sass समकक्षें थमां अपडेट कीता गेआ ऐ। नतीजे च, इस रिलीज च त्रै चर गी डिप्रीकेट कीता गेआ ऐ: $popover-arrow-color, $popover-arrow-outer-color, ते $tooltip-arrow-color.

• नए .text-bg-{color}मददगार जोड़े। .text-*व्यक्तिगत ते उपयोगिताएं गी सेट करने दे बजाय .bg-*, तुस हून हेल्परें दा इस्तेमाल करियै.text-bg-*background-color इक विपरीत अग्रभूमि कन्नै सेट करी सकदे ओ color.

• .form-check-reverseलेबल ते संबद्ध चेकबॉक्स/रेडियो दे क्रम गी फ्लिप करने आस्तै संशोधक जोड़ेआ गेआ ।

• नमीं वर्ग दे राहें तालिकाएं च धारीदार स्तंभ समर्थन जोड़ेआ गेआ ।.table-striped-columns

बदलावें दी पूरी सूची आस्तै, GitHub पर v5.2.0 प्रोजेक्ट दिक्खो .

v5.1.0 ऐ

• सीएसएस ग्रिड लेआउट आस्तै प्रयोगात्मक समर्थन जोड़ेआ गेआ . — एह् इक प्रगतिशील कम्म ऐ, ते अजें तगर उत्पादन दे इस्तेमाल आस्तै तैयार नेईं ऐ, पर तुस Sass दे राहें नमें फीचर च शामल होई सकदे ओ। इसगी सक्षम करने आस्तै, डिफाल्ट ग्रिड गी अक्षम करो, सेट करियै $enable-grid-classes: falseते सेट करियै CSS ग्रिड गी सक्षम करो $enable-cssgrid: true.

• ऑफकैनवास गी समर्थन करने आस्तै नवबारें गी अपडेट कीता गेआ ऐ। — रिस्पांसिव क्लासें ते किश ऑफकैनवास मार्कअप कन्नै कुसै बी नवबार च ऑफकैनवास दराज जोड़ो ।.navbar-expand-*

• नमां प्लेसहोल्डर घटक जोड़ेआ गेआ . — साढ़ा नमां घटक, असली सामग्री दे बजाय अस्थायी ब्लॉक उपलब्ध करोआने दा इक तरीका ऐ जेह् ड़ा इस गल्लै गी संकेत करने च मदद करदा ऐ जे तुंदी साइट जां ऐप च कुसै चीजै दा अजें बी लोड होआ करदा ऐ।

• संकुचित प्लगइन हुण क्षैतिज ढहने दा समर्थन करदा ऐ . —.collapse-horizontal अपने .collapseको संकुचित करने के लिए जोड़ें की widthजगह height. min-heightए जां सेट करियै ब्राउज़र गी दुबारा पेंट करने थमां बचो height.

• नमें ढेर ते ऊर्ध्वाधर नियम हेल्पर जोड़े गे। — ढेर कन्नै कस्टम लेआउट जल्दी बनाने लेई मते सारे फ्लेक्सबॉक्स गुणें गी जल्दी लागू करो . .hstackक्षैतिज ( ) ते ऊर्ध्वाधर ( .vstack) ढेरें च चुनो । नमें हेल्परें<hr> कन्नै तत्वें दे समान ऊर्ध्वाधर विभाजक जोड़ो ..vr

• नमें वैश्विक :rootसीएसएस चर जोड़े गे। — शैलियें :rootगी नियंत्रित करने आस्तै स्तर पर केईं नमें CSS चर जोड़े गे । <body>होर मते कम्में च न, जिंदे च साढ़ी उपयोगिताएं ते घटकें च बी शामल ऐ, पर फिलहाल अनुकूलित खंड च CSS चर पढ़ो .

• CSS चर दा इस्तेमाल करने आस्तै रंग ते पृष्ठभूमि उपयोगिताएं गी ओवरहाल कीता गेआ, ते नमीं पाठ अस्पष्टता ते पृष्ठभूमि अस्पष्टता उपयोगिताएं गी जोड़ेआ गेआ। — .text-* ते .bg-*उपयोगिताएं गी हून CSS चर ते rgba()रंग मूल्यें कन्नै बनाया गेदा ऐ , जेह् ड़ा तुसेंगी नमीं अस्पष्टता उपयोगिताएं कन्नै कुसै बी उपयोगिता गी आसानी कन्नै अनुकूलित करने दी इजाजत दिंदा ऐ .

• साढ़े घटकें गी अनुकूलित करने दा तरीका दस्सने आस्तै आधारत नमें स्निपेट उदाहरण जोड़े गे। — साढ़े नमें स्निपेट उदाहरणें कन्नै अनुकूलित घटकें ते होर आम डिजाइन पैटर्न दा इस्तेमाल करने लेई तैयार खींचो . पाद लेख , ड्रॉपडाउन , सूची समूह , ते मोडल शामल न .

• पोपोवर ते टूलटिप्स थमां अप्रयुक्त पोजीशनिंग शैलियें गी हटाई दित्ता गेआ ऐ की जे एह् सिर्फ पॉपर आसेआ संभालेआ जंदा ऐ। $tooltip-marginगी डिप्रीकेट कीता गेआ ऐ ते nullइस प्रक्रिया च सेट कीता गेआ ऐ।

होर जानकारी चांह् दे ओ ? v5.1.0 ब्लॉग पोस्ट पढ़ो।

निर्भरताएं

• जे क्वेरी छोड़ दी।
• पॉपर v1.x थमां पॉपर v2.x च अपग्रेड कीता गेआ।
• Libsass गी Dart Sass कन्नै बदली दित्ता कीजे साढ़े Sass कंपाइलर दित्ते गेदे Libsass गी डिप्रीकेट कीता गेआ हा।
• साढ़े दस्तावेज बनाने आस्तै जेकिल थमां ह्यूगो च माइग्रेट कीता गेआ

ब्राउज़र दा समर्थन करना

• इंटरनेट एक्सप्लोरर 10 ते 11 गी छोड़ी दित्ता
• गिरा दित्ता माइक्रोसॉफ्ट एज < 16 (विरासत एज)
• फायरफॉक्स < 60 गी छोड़ी दित्ता
• छोड़ दी सफारी < 12
• आईओएस सफारी < 12 गी छोड़ी दित्ता
• गिरा दित्ता क्रोम < 60

दस्तावेजीकरण च बदलाव होंदा ऐ

• होमपेज, डॉक्स लेआउट, ते पाद लेख गी नमें सिरेआ डिजाइन कीता गेदा ऐ।
• नया पार्सल गाइड जोड़ा गया .
• नमां अनुकूलन खंड जोड़ेआ गेआ , v4 दे थीमिंग पृष्ठ गी बदलदे होई , Sass, वैश्विक कॉन्फ़िगरेशन विकल्प, रंग योजनाएं, CSS चर, ते होर मते पर नमें ब्यौरे कन्नै.
• सारे फार्म दस्तावेजें गी नमें फार्म खंड च पुनर्गठित कीता गेआ , सामग्री गी होर केंद्रित पन्नें च तोड़दे होई।
• इसी तरह, लेआउट खंड गी अपडेट कीता गेआ , ग्रिड सामग्री गी होर स्पष्ट रूप कन्नै मांस बनाने आस्तै.
• “Navs” घटक पृष्ठ दा नाम बदलीये “Navs & Tabs” च बदली दित्ता गेआ ऐ।
• “चेक्स” पृष्ठ दा नांऽ बदलीये “चेक्स ते रेडियो” करी दित्ता गेआ ऐ।
• नवबार गी नमें सिरेआ डिजाइन कीता ते इक नमां सबनव जोड़ेआ तां जे साढ़ी साइटें ते डॉक्स संस्करणें दे आसपास जाने च सहूलियत होऐ।
• सर्च फील्ड आस्तै नमां कीबोर्ड शॉर्टकट जोड़ेआ गेआ: Ctrl + /.

सस्स

• फालतू मूल्यें गी हटाना आसान बनाने आस्तै अस डिफाल्ट Sass मैप मर्जें गी खाई च पाई दित्ता ऐ. ध्यान रक्खो तुसेंगी हून सस्स नक्शे च सारे मूल्यें गी परिभाशत करना होग जि'यां $theme-colors. सास नक्शे कन्नै निबड़ने दा तरीका दिक्खो .

• तोड़नाcolor-yiq()फंक्शन ते संबंधित चर दा नाम बदली दित्ता गेआ ऐ कीजे color-contrast()एह् हून YIQ रंग स्पेस कन्नै सरबंधत नेईं ऐ. दिक्खो # 30168।

  • $yiq-contrasted-thresholdदा नां बदलीये $min-contrast-ratio.
  • $yiq-text-darkते $yiq-text-lightक्रमशः $color-contrast-darkते $color-contrast-light.

• तोड़नामीडिया क्वेरी मिक्सिन पैरामीटर इक होर तार्किक दृष्टिकोण आस्तै बदले दे न।

  • media-breakpoint-down()अगले ब्रेकपॉइंट दी बजाय अपने आप ब्रेकपॉइंट दा उपयोग करदा ऐ (जियां, लक्ष्य दृश्यपोर्टें media-breakpoint-down(lg)दे बजाय ) थमां छोटे ) ।media-breakpoint-down(md)lg
  • इसी गै, दूआ पैरामीटर च media-breakpoint-between()​​बी अगले ब्रेकपॉइंट दी बजाय अपने आप ब्रेकपॉइंट दा उपयोग करदा ऐ (जियां, ते दे बीच लक्ष्य दृष्टिकोण दे media-between(sm, lg)बजाय ) ।media-breakpoint-between(sm, md)smlg

• तोड़नाप्रिंट शैलियां ते $enable-print-stylesचर गी हटाई दित्ता गेआ। प्रिंट डिस्प्ले क्लास अजें बी आसपास ऐ। दिक्खो # 28339 .

• तोड़नाचर दे पक्ष च color(), theme-color(), ते फंक्शनें गी छोड़ी दित्ता गेआ। दिक्खो # 29083 .gray()

• तोड़नाtheme-color-level()फंक्शन दा नाम बदली दित्ता गेदा ऐ ते color-level()हुन सिर्फ रंगें दी बजाय तुस कुसै बी रंग गी स्वीकार करदा ऐ $theme-color। देखें #29083 देखो: color-level() बाद च छोड़ी दित्ता गेआ हा v5.0.0-alpha3.

• तोड़नानाम बदली दित्ता $enable-prefers-reduced-motion-media-queryते संक्षेप $enable-pointer-cursor-for-buttonsच $enable-reduced-motionते $enable-button-pointersसंक्षेप च।

• तोड़नामिक्सिन bg-gradient-variant()हटा दिया। .bg-gradientउत्पन्न कीते गेदे वर्गें दी बजाय तत्वें च ढाल जोड़ने आस्तै वर्ग दा उपयोग करो .bg-gradient-*.

• तोड़ना पैह् ले थमां गै प्रचलित कीते गेदे मिक्सिन गी हटाया गेआ ऐ:

  • hover, hover-focus, plain-hover-focus, तेhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(संबद्ध उपयोगिता वर्ग गी बी छोड़ी दित्ता ऐ, .text-hide)
  • visibility()
  • form-control-focus()

• तोड़नासस्स दे अपने रंग स्केलिंग फंक्शन कन्नै टक्कर थमां बचने आस्तै scale-color()फंक्शन दा नांऽ बदली दित्ता गेआ ऐ।shift-color()

• box-shadowmixins हून मूल्यें दी अनुमति दिंदे न ते मते सारे तर्कें थमां nullड्रॉप . दिक्खो # 30394 .none

• मिक्सिन च border-radius()हुन इक डिफ़ॉल्ट वैल्यू ऐ।

रंग प्रणाली

• रंग प्रणाली जेह् ड़ी इक नमीं रंग प्रणाली दे पक्ष च कम्म करदी ही color-level()ते हटाई दित्ती गेई ही। साढ़े कोडबेस च $theme-color-intervalसारे lighten()ते फंक्शनें गी ते . एह् फंक्शनें कन्नै रंग गी इक निश्चित मात्रा च बदलने दे बजाय सफेद जां काले रंग कन्नै मिलान होग। द इक रंग गी या तां टिंट करग जां छाया करग इस गल्लै पर निर्भर करदा ऐ जे इसदा वजन पैरामीटर सकारात्मक ऐ जां नकारात्मक ऐ। होर मती जानकारी आस्तै दिक्खो #30622 ।darken()tint-color()shade-color()shift-color()

• हर रंग आस्तै नमें टिंट ते शेड्स जोड़े गे, हर आधार रंग आस्तै नौ बक्ख-बक्ख रंग उपलब्ध करोआंदे होई, नमें सस चर दे रूप च।

• रंग विपरीतता च सुधार कीता गेआ। WCAG 2.1 एए कंट्रास्ट गी सुनिश्चित करने आस्तै 3:1 थमां 4.5:1 तगर रंग विपरीत अनुपात बम्प कीता ते नीले, हरे, सियान, ते गुलाबी रंगें गी अपडेट कीता गेआ। साथ ही साडा रंग कंट्रास्ट रंग बदल $gray-900के $black.

• अपने रंग प्रणाली गी समर्थन करने आस्तै, असें अपने रंगें गी उचित ढंगै कन्नै मिलाने आस्तै नमें कस्टम tint-color()ते shade-color()फंक्शनें गी जोड़ेआ ऐ।

ग्रिड अपडेट करदा ऐ

• नई ब्रेकपॉइंट ! के लिए और ऊपर नया xxlब्रेकपॉइंट जोड़ा गया। 1400pxबाकी सारे ब्रेकपॉइंटें च कोई बदलाव नेईं।

• नाली में सुधार। गटर हून rems च सेट कीते गेदे न, ते v4 ( 1.5rem, जां लगभग 24px, थमां हेठ 30px) थमां संकीर्ण न । एह् साढ़े ग्रिड सिस्टम दे गटरें गी साढ़ी स्पेसिंग यूटिलिटीएं कन्नै तालमेल बनांदा ऐ।

  • क्षैतिज/ऊर्ध्वाधर गटरें, क्षैतिज गटरें, ते ऊर्ध्वाधर गटरें गी नियंत्रित करने आस्तै नमां गटर वर्ग ( .g-*, .gx-*, ते ) जोड़ेआ गेआ।.gy-*
  • तोड़नानमीं गटर उपयोगिताएं कन्नै मेल खाने .no-guttersआस्तै नाम बदली दित्ता गेआ।.g-0

• स्तंभ हून लागू नेईं होई गे न, इसलेई तुसेंगी उस व्यवहार गी बहाल करने आस्तै किश तत्वें च position: relativeजोड़ना पौंदा ऐ ..position-relative

• तोड़नाकई .order-*क्लासें गी छोड़ी दित्ता जेह्ड़ियां अक्सर बेकार होई जंदियां हियां। असी हुण सिर्फ आउट ऑफ द बॉक्स दा इंतजाम .order-1करदे हां।.order-5

• तोड़नाघटक गी छोड़ी दित्ता .mediaकीजे इसगी उपयोगिताएं कन्नै आसानी कन्नै नकल कीता जाई सकदा ऐ। इक उदाहरण आस्तै #28265 ते फ्लेक्स उपयोगिताएं दा पृष्ठ दिक्खो .

• तोड़ना bootstrap-grid.cssहुण box-sizing: border-boxग्लोबल बॉक्स-साइजिंग गी रीसेट करने दे बजाय सिर्फ स्तंभ पर लागू होंदा ऐ. इस चाल्ली, साढ़ी ग्रिड शैलियें दा इस्तेमाल होर थाह् रें पर बिना कुसै हस्तक्षेप दे कीता जाई सकदा ऐ।

• $enable-grid-classesहून कंटेनर वर्गें दी जनरेशन गी अक्षम नेईं करदा ऐ. दिक्खो # 29146।

• make-colमिक्सिन गी बिना कुसै निर्दिश्ट आकार दे बराबर स्तंभें च डिफाल्ट रूप कन्नै अपडेट कीता गेआ .

सामग्री, रिबूट, बगैरा

• आरएफएस हून डिफाल्ट रूप कन्नै सक्षम ऐ. मिक्सिन दा इस्तेमाल करदे होई हेडिंगfont-size()अपने आपfont-sizeगै व्यूपोर्ट कन्नै स्केल करने आस्तै समायोजित करङन। एह् सुविधा पैह् ले v4 कन्नै ऑप्ट-इन ही।

• तोड़ना$display-*साढ़े चर गी बदलने आस्तै ते इक $display-font-sizesसस्स नक्शे कन्नै साढ़ी डिस्प्ले टाइपोग्राफी गी ओवरहाल कीता। $display-*-weightइक सिंगल $display-font-weightते समायोजित font-sizeएस लेई व्यक्तिगत चर गी बी हटाई दित्ता ।

• दो नमें .display-*हेडिंग आकार जोड़े गे, .display-5ते .display-6.

• लिंक डिफ़ॉल्ट रूप कन्नै रेखांकित कीते गेदे न (केवल होवर पर नेईं), जदूं तकर एह् विशिष्ट घटकें दा हिस्सा नेईं न.

• उंदी शैली गी ताज़ा करने ते स्टाइलिंग पर होर नियंत्रण आस्तै CSS चर कन्नै पुनर्निर्माण करने आस्तै तालिकाएं गी नमें सिरेआ डिजाइन कीता गेआ ऐ।

• तोड़नानेस्टेड टेबल गी हून शैलियां विरासत च नेईं मिलदियां न.

• तोड़ना .thead-lightते वेरिएंट वर्गें .thead-darkदे पक्ष च छोड़ी दित्ते गेदे न जेह् ड़े सारे तालिका तत्वें ( , , , , ते ) आस्तै बरतेआ जाई सकदा ऐ ।.table-*theadtbodytfoottrthtd

• तोड़नाtable-row-variant()मिक्सिन दा नांऽ बदली दित्ता जंदा ऐ ते table-variant()सिर्फ 2 पैरामीटर स्वीकार करदा ऐ: $color(रंग दा नांऽ) ते $value(रंग कोड)। सीमा रंग ते उच्चारण रंगें दी गणना तालिका कारक चर दे आधार उप्पर स्वतः कीती जंदी ऐ।

• -yतालिका सेल पैडिंग चर गी ते च विभाजित करो -x.

• तोड़ना.pre-scrollableक्लास छोड़ दी। दिक्खो # 29135

• तोड़ना .text-*उपयोगिताएं गी हून लिंक च होवर ते फोकस स्टेट नेईं जोड़ेआ जंदा ऐ। .link-*इसदे बजाय हेल्पर क्लासें दा इस्तेमाल कीता जाई सकदा ऐ। दिक्खो # 29267

• तोड़ना.text-justifyक्लास छोड़ दी। दिक्खो # 29793

• तोड़ना <hr>तत्व हून विशेषता गी बेहतर समर्थन करने heightदे बजाय इस्तेमाल करदे न। एह्दे कन्नै गै मोटे डिवाइडर बनाने लेई पैडिंग यूटिलिटीएं दा इस्तेमाल बी सक्षम बनांदा ऐ (जियां, ) ।bordersize<hr class="py-1">

• डिफ़ॉल्ट क्षैतिज padding-leftचालू <ul>ते <ol>तत्वें गी ब्राउज़र डिफ़ॉल्ट 40pxथमां 2rem.

• जोड़ेआ गेआ $enable-smooth-scroll, जेह् ड़ा वैश्विक रूप कन्नै लागू होंदा ऐ— मीडिया क्वेरी scroll-behavior: smoothदे राहें घट्ट गति आह् ले बरतूनी गी छोड़ियै । दिक्खो # 31877prefers-reduced-motion

आर टी एल

• क्षैतिज दिशा विशिष्ट चर, उपयोगिताएं, ते मिक्सिन सारें दा नांऽ बदली दित्ता गेआ ऐ तां जे फ्लेक्सबॉक्स लेआउटें च पाए जाने आह् ले जनेह् तार्किक गुणें दा इस्तेमाल कीता जाई सकै-जियां, startते ते दे endबदले च .leftright

रूप दे

• नए फ्लोटिंग फार्म जोड़े गए ! अस फ्लोटिंग लेबल उदाहरण गी पूरी चाल्ली समर्थत फार्म घटकें च बढ़ावा दित्ता ऐ। नमां फ्लोटिंग लेबल पेज दिक्खो।

• तोड़ना समेकित देशी ते कस्टम रूप तत्व। चेकबॉक्स, रेडियो, चयनित, ते होर इनपुटें गी इकट्ठा कीता गेआ ऐ जेह् ड़े v4 च नेटिव ते कस्टम क्लास हे। हुण लगभग सारे साढ़े फार्म तत्व पूरी चाल्ली कस्टम न, ज्यादातर कस्टम एचटीएमएल दी लोड़ दे बगैर।

  • .custom-control.custom-checkboxहै हुण .form-check.
  • .custom-control.custom-custom-radioहै हुण .form-check.
  • .custom-control.custom-switchहै हुण .form-check.form-switch.
  • .custom-selectहै हुण .form-select.
  • .custom-fileते .form-fileउप्पर कस्टम शैलियें कन्नै बदली दित्ता गेआ ऐ .form-control.
  • .custom-rangeहै हुण .form-range.
  • गिरा दे देशी .form-control-fileऔर .form-control-range.

• तोड़नागिरा .input-group-appendदित्ता ते .input-group-prepend. तुस हून सिर्फ बटन ते .input-group-textइनपुट समूहें दे सीधे बच्चें दे रूप च जोड़ सकदे ओ।

• सत्यापन प्रतिक्रिया बग कन्नै इनपुट समूह पर लंबे समें थमां लापता सीमा त्रिज्या गी सत्यापन.has-validation कन्नै इनपुट समूहें च इक अतिरिक्त वर्ग जोड़ियै अंत च ठीक कीता जंदा ऐ .

• तोड़ना साढ़े ग्रिड सिस्टम आस्तै फार्म-विशिष्ट लेआउट क्लासें गी छोड़ी दित्ता गेआ। .form-group, .form-row, जां .form-inline.

• तोड़नाफार्म लेबल गी हून लोड़चदी ऐ .form-label.

• तोड़ना .form-textno longer sets display, तुसेंगी सिर्फ एचटीएमएल तत्व गी बदलने कन्नै इनलाइन जां ब्लॉक मदद पाठ बनाने दी इजाजत दिंदा ऐ जिऱयां तुस चांह् दे ओ.

• फार्म नियंत्रणें गी हून संभव होने पर स्थिर इस्तेमाल नेईं कीता जंदा ऐ, इसदे बजाय होर घटकें कन्नै अनुकूलन ते संगतता गी बेहतर बनाने लेई heightस्थगित कीता जंदा ऐ।min-height

• <select>सत्यापन चिह् न गी s कन्नै लागू नेईं कीता जंदा ऐ multiple.

• scss/forms/इनपुट समूह शैलियां समेत , दे अंतर्गत स्रोत Sass फाइलें गी पुनर्व्यवस्थित कीता गेआ ।

घटक ऐ

• साढ़े चर paddingपर आधारत होने आस्तै अलर्ट, ब्रेडक्रंब, कार्ड, ड्रॉपडाउन, सूची समूह, मोडल, पोपोवर, ते टूलटिप्स आस्तै इकीकृत मूल्य। दिक्खो # 30564 .$spacer

अकॉर्डियन

• नया अकॉर्डियन घटक जोड़ा गया .

अलर्ट करदा ऐ

• अलर्टें च हून आइकनें कन्नै उदाहरण न .

• <hr>हर अलर्ट च s आस्तै कस्टम शैलियां हटाई गेदियां न कीजे ओह् पैह् ले थमां गै बरतदे न currentColor.

बिल्ला

• तोड़नापृष्ठभूमि उपयोगिताएं आस्तै सारे .badge-*रंग वर्गें गी छोड़ी दित्ता गेआ (जियां, .bg-primaryदे बजाय इस्तेमाल करो .badge-primary).

• तोड़नाछोड़ी .badge-pillदित्ता —इसदे .rounded-pillबजाय उपयोगिता दा इस्तेमाल करो।

• तोड़ना<a>ते <button>तत्वें लेई होवर ते फोकस शैलियां हटाई गेइयां ।

• / थमां .25em/ .5emतगर बैज आस्��ै डिफ़ॉल्ट पैडिंग च बाद्दा कीता गेआ ऐ ..35em.65em

रोटी के टुकड़े

• padding, , background-colorते border-radius.

• --bs-breadcrumb-dividerCSS गी दुबारा संकलित करने दी लोड़ दे बगैर आसान अनुकूलन आस्तै नमीं CSS कस्टम गुण जोड़ेआ गेआ ऐ.

बटन दे

• तोड़ना टॉगल बटन , चेकबॉक्स जां रेडियो कन्नै, जावास्क्रिप्ट दी लोड़ नेईं ऐ ते नमां मार्कअप ऐ. असेंगी हून इक रैपिंग तत्व दी लोड़ नेईं ऐ, , च जोड़ना,.btn-checkते<input>इसगी. दिक्खो # 30650 . इसदे लेई डॉक्स साढ़े बटन पृष्ठ थमां नमें फार्म खंड च लेई गेदे न।.btn<label>

• तोड़ना उपयोगिताएं .btn-blockलेई छोड़ी दित्ता गेआ। .btn-blockपर इस्तेमाल करने दे बजाय .btn, अपने बटनें गी कन्नै लपेटो ते जरूरत मताबक उनेंगी स्पेस करने आस्तै .d-gridइक उपयोगिता। .gap-*उंदे उप्पर होर बी नियंत्रण आस्तै प्रतिक्रियाशील वर्गें च बदलो। कुछ उदाहरणें लेई डॉक्स पढ़ो।

• अतिरिक्त पैरामीटर समर्थन करने लेई साढ़े button-variant()ते मिक्सिन गी अपडेट कीता गेआ।button-outline-variant()

• होवर ते सक्रिय राज्यें पर बधाए गेदे कंट्रास्ट गी सुनिश्चत करने आस्तै बटनें गी अपडेट कीता गेआ ऐ।

• अक्षम बटनें च हुन pointer-events: none;.

कार्ड

• तोड़ना.card-deckसाढ़ी ग्रिड दे पक्ष च गिरी गेआ। अपने कार्डें गी स्तंभ कक्षाएं च लपेटो ते .row-cols-*कार्ड डेक गी दुबारा बनाने आस्तै इक पैरेंट कंटेनर जोड़ो (पर प्रतिक्रियाशील संरेखण पर मता नियंत्रण कन्नै)।

• तोड़ना.card-columnsचिनाई के पक्ष में गिरा दी। दिक्खो # 28922 .

• तोड़ना.cardआधारित अकॉर्डियन गी इक नमें अकॉर्डियन घटक कन्नै बदली दित्ता .

हिंडोला

• काले पाठ, नियंत्रण, ते संकेतकें आस्तै नमां .carousel-darkरूप जोड़ेआ गेआ (हल्के पृष्ठभूमि आस्तै शानदार)।

• हिंडोला नियंत्रणें लेई शेवरॉन आइकनें गी बूटस्ट्रैप आइकनें थमां नमें एसवीजी कन्नै बदली दित्ता गेआ .

बटन बंद करो

• तोड़नाकम जेनेरिक नांऽ आस्तै बदली दित्ता .closeगेआ ।.btn-close

• बंद बटन हून HTML च background-imageइक दी बजाय इक (एम्बेडेड SVG) दा इस्तेमाल करदे ×न , जेह् ड़ा तुंदे मार्कअप गी छूने दी लोड़ दे बगैर बी आसान अनुकूलन दी अनुमति दिंदा ऐ .

• नमां .btn-close-whiteरूप जोड़ेआ गेआ जेह् ड़ा filter: invert(1)गहरे रंग दी पृष्ठभूमि दे खिलाफ उच्च विपरीत खारिज आइकनें गी सक्षम करने लेई बरतदा ऐ.

डिग्गना

• अकॉर्डियन लेई स्क्रॉल एंकरिंग हटाई गेई।

ड्रॉपडाउन

• .dropdown-menu-darkडिमांड पर डार्क ड्रॉपडाउन आस्तै नमें वेरिएंट ते संबद्ध चर जोड़े गे ।

• लेई नमां चर जोड़ेआ गेआ ऐ $dropdown-padding-x.

• बेहतर कंट्रास्ट लेई ड्रॉपडाउन डिवाइडर गी काला करी दित्ता।

• तोड़नाड्रॉपडाउन आस्तै सारी घटनाएं गी हून ड्रॉपडाउन टॉगल बटन पर ट्रिगर कीता जंदा ऐ ते उसदे बाद पैरेंट तत्व तगर बबल कीता जंदा ऐ.

• ड्रॉपडाउन मेनू च हून इक data-bs-popper="static"एट्रिब्यूट सेट कीता गेदा ऐ जिसलै ड्रॉपडाउन दी स्थिति स्थिर ऐ, जां ड्रॉपडाउन नवबार च ऐ. एह् साढ़ी जावास्क्रिप्ट आसेआ जोड़ेआ गेदा ऐ ते असेंगी पॉपर दी स्थिति च हस्तक्षेप कीते बगैर कस्टम स्थिति शैलियें दा इस्तेमाल करने च मदद करदा ऐ।

• तोड़नादेशी पॉपर flipकॉन्फ़िगरेशन दे पक्ष च ड्रॉपडाउन प्लगइन आस्तै विकल्प छोड़ी दित्ता गेआ। तुस हून फ्लिप संशोधक fallbackPlacementsच विकल्प आस्तै इक खाली सरणी पास करियै फ्लिपिंग व्यवहार गी अक्षम करी सकदे ओ.

• ड्रॉपडाउन मेनू गी हून ऑटो बंद व्यवहारautoClose गी संभालने आस्तै इक नमें विकल्प कन्नै क्लिक करने योग्य कीता जाई सकदा ऐ . तुस इस विकल्प दा इस्तेमाल ड्रॉपडाउन मेनू दे अंदर जां बाहर क्लिक गी स्वीकार करने लेई करी सकदे ओ तां जे एह् इंटरएक्टिव बनाई सकै।

• ड्रॉपडाउन हुण .dropdown-itemएस च लपेटे दा समर्थन करदा <li>ऐ।

जम्बोट्रॉन ने दी

• तोड़नाजंबोट्रॉन घटक गी छोड़ी दित्ता कीजे इसदी नकल उपयोगिताएं कन्नै कीती जाई सकदी ऐ। डेमो लेई साढ़ा नमां जंबोट्रॉन उदाहरण दिक्खो।

समूह दी सूची

• सूची समूहें च नमां .list-group-numberedसंशोधक जोड़ेआ गेआ।

नवस ते टैब

• , , , ते क्लास च नमें nullचर जोड़े गे।font-sizefont-weightcolor:hover color.nav-link

नवबरस ने दी

• तोड़नानवबारें गी हून अंदर इक कंटेनर दी लोड़ होंदी ऐ (स्पेसिंग दी लोड़ें गी सख्ती कन्नै सरल बनाने आस्तै ते सीएसएस दी लोड़ ऐ)।
• तोड़ना.activeक्लास गी हून एस पर लागू नेईं कीता जाई सकदा ऐ , .nav-itemइसगी सीधे .nav-linkएस पर लागू करना होग।

ऑफकैनवास दा

• नमां ऑफकैनवास घटक जोड़ेआ गेआ .

पृष्ठांकन करना

• पृष्ठांकन लिंकें च हून अनुकूलन योग्य margin-leftऐ जेह् ड़े इक दुए थमां बक्ख होने पर सारे कोने पर गतिशील रूप कन्नै गोल होंदे न।

• transitionपृष्ठांकन लिंक च एस जोड़ेआ गेआ ।

पोपोवर्स

• तोड़नासाढ़े डिफ़ॉल्ट पोपोवर टेम्पलेट च बदली दित्ता .arrowगेआ ऐ ।.popover-arrow

• whiteListविकल्प दा नाम बदली दित्ता गेआ ऐ allowList.

स्पिनर करने वाले

• स्पिनर हुण prefers-reduced-motion: reduceएनीमेशन गी धीमा करियै सम्मान करदे न। दिक्खो # 31882 .

• स्पिनर ऊर्ध्वाधर संरेखण च सुधार कीता गेआ।

टोस्ट करदा ऐ

• टोस्ट गी हून पोजीशनिंग यूटिलिटीज दी मदद कन्नै इक च पोजीशन कीता जाई सकदा ऐ ..toast-container

• डिफ़ॉल्ट टोस्ट अवधि गी 5 सेकंड च बदली दित्ता गेआ।

• टोस्टें overflow: hiddenथमां हटाई दित्ता गेआ ते फंक्शनें कन्नै उचित border-radiusएस कन्नै बदली दित्ता गेआ।calc()

टूलटिप्स दा

• तोड़नासाढ़े डिफ़ॉल्ट टूलटिप टेम्पलेट च नाम बदली दित्ता .arrowगेआ ऐ ।.tooltip-arrow

• तोड़नापोपर तत्वें दी बेहतर प्लेसमेंट आस्तै आस्तै ड��फाल्ट वैल्यू गी fallbackPlacementsबदली दित्ता जंदा ऐ .['top', 'right', 'bottom', 'left']

• तोड़नाwhiteListविकल्प दा नाम बदली दित्ता गेआ ऐ allowList.

उपयोगिताएं दा

• तोड़नाआरटीएल समर्थन दे जोड़े जाने कन्नै दिशात्मक नांऽ दे बजाय तार्किक संपत्ति नांऽ दा इस्तेमाल करने आस्तै केईं उपयोगिताएं दा नांऽ बदली दित्ता गेआ ऐ:

  • नाम बदली दित्ता .left-*ते .right-*ते .start-*ते .end-*.
  • नाम बदली दित्ता .float-leftते .float-rightते .float-startते .float-end.
  • नाम बदली दित्ता .border-leftते .border-rightते .border-startते .border-end.
  • नाम बदली दित्ता .rounded-leftते .rounded-rightते .rounded-startते .rounded-end.
  • नाम बदली दित्ता .ml-*ते .mr-*ते .ms-*ते .me-*.
  • नाम बदली दित्ता .pl-*ते .pr-*ते .ps-*ते .pe-*.
  • नाम बदली दित्ता .text-leftते .text-rightते .text-startते .text-end.

• तोड़नाडिफाल्ट रूप कन्नै नकारात्मक मार्जिन गी अक्षम कीता गेआ ऐ।

• 's बैकग्राउंड गी अतिरिक्त तत्वें .bg-bodyपर जल्दी सेट करने आस्तै नमीं वर्ग जोड़ी गेई ऐ.<body>

• , , , ते लेई नमीं स्थिति उपयोगिताएं गी जोड़ेआ गेआ । मूल्यें च , , ते हर इक संपत्ति आस्तै शामल न।toprightbottomleft050%100%

• क्षैतिज जां लंबवत केंद्र निरपेक्ष/निश्चत स्थिति तत्वें च नमें .translate-middle-x& उपयोगिताएं गी जोड़ेआ गेआ।.translate-middle-y

• नमीं border-widthउपयोगिताएं गी जोड़ेआ गेआ .

• तोड़नानाम .text-monospaceबदलीये .font-monospace.

• तोड़नाहटाया गेआ .text-hideकीजे एह् पाठ गी छुपाने दा इक पुराना तरीका ऐ जिसदा इस्तेमाल हुन नेईं कीता जाना चाहिदा।

• .fs-*उपयोगिताएं आस्तै उपयोगिताएं गी जोड़ेआ गेआ font-sizeऐ (आरएफएस सक्षम कन्नै)। एह् HTML दे डिफाल्ट हेडिंग (1-6, बड्डे थमां छोटे) दे समान पैमाने दा उपयोग करदे न, ते सैस मैप दे राहें संशोधित कीते जाई सकदे न।

• तोड़नासंक्षिप्तता ते स्थिरता आस्तै .font-weight-*उपयोगिताएं दा नाम बदली दित्ता गेआ ऐ।.fw-*

• तोड़नासंक्षिप्तता ते स्थिरता आस्तै .font-style-*उपयोगिताएं दा नाम बदली दित्ता गेआ ऐ।.fst-*

• सीएसएस ग्रिड ते फ्लेक्सबॉक्स लेआउट आस्तै .d-gridउपयोगिताएं ते नमीं gapउपयोगिताएं ( ) गी प्रदर्शत करने च जोड़ेआ गेआ ऐ।.gap

• तोड़नाहटाया .rounded-smते rounded-lg, ते कक्षाएं दा इक नमां पैमाना शुरू कीता, .rounded-0गी .rounded-3. दिक्खो # 31687 .

• नमीं line-heightउपयोगिताएं गी जोड़ेआ गेआ: .lh-1, .lh-sm, .lh-baseते .lh-lg. इत्थें दिक्खो .

• साढ़े सीएसएस च .d-noneयूटिलिटी गी लेई गेआ तां जे इसगी होर डिस्प्ले यूटिलिटीएं पर मता वजन दित्ता जाई सकै।

• .visually-hidden-focusableकन्टेनरें पर बी कम्म करने आस्तै हेल्पर गी विस्तार दित्ता गेआ, इसदा इस्तेमाल करदे होई :focus-within.

मदद करने वाले

• तोड़ना प्रतिक्रियाशील एम्बेड हेल्परें गी नमें वर्ग दे नांऽ ते बेहतर व्यवहारें कन्नै अनुपात हेल्परें च बदली दित्ता गेआ ऐ, ते कन्नै गै इक मददगार CSS चर बी ऐ।

  • कक्षाएं दा नांऽ बदली दित्ता गेआ ऐ तां जे आस्पेक्ट रेशियो च बदलाव byकीता जाई सकै । xमसलन, .ratio-16by9हुण ऐ .ratio-16x9.
  • अस .embed-responsive-itemइक सरल चयनकर्ता दे पक्ष च ते तत्व समूह चयनकर्ता गी छोड़ी दित्ता ऐ .ratio > *। कोई होर क्लास दी लोड़ नेईं ऐ, ते अनुपात हेल्पर हून कुसै बी HTML तत्व कन्नै कम्म करदा ऐ.
  • $embed-responsive-aspect-ratiosसस्स नक्शे दा नांऽ बदली दित्ता गेआ ऐ ते $aspect-ratiosइसदे मूल्यें गी सरल बनाया गेआ ऐ तां जे वर्ग दा नांऽ ते प्रतिशत गी key: valueजोड़ी दे रूप च शामल कीता जाई सकै।
  • CSS चर हून पैदा कीते गेदे न ते सस्स नक्शे च हर इक मूल्य आस्तै शामल कीते गेदे न। कोई बी कस्टम पहलू अनुपात बनाने लेई --bs-aspect-ratioपर चर गी संशोधित करो ..ratio

• तोड़ना “स्क्रीन रीडर” कक्षाएं हून “दृश्य रूप कन्नै छिपी दी” कक्षाएं न .

  • Sass फाइल गी scss/helpers/_screenreaders.scssto थमां बदली दित्ताscss/helpers/_visually-hidden.scss
  • नाम बदल के .sr-onlyते ते.sr-only-focusable.visually-hidden.visually-hidden-focusable
  • नाम बदली दित्ता sr-only()ते sr-only-focusable()मिक्सिन visually-hidden()ते visually-hidden-focusable().

• bootstrap-utilities.cssहुण साडे मददगार वी शामिल हन। हेल्परें गी हून कस्टम बिल्ड च आयात करने दी लोड़ नेईं ऐ.

जावास्क्रिप्ट

• jQuery निर्भरता गी छोड़ी दित्ता ते नियमित जावास्क्रिप्ट च होने आस्तै प्लगइन्स गी दुबारा लिखेआ.

• तोड़नासारे जावास्क्रिप्ट प्लगइन्स आस्तै डेटा विशेषताएं गी हून नेमस्पेस कीता गेआ ऐ तां जे बूटस्ट्रैप फ़ंक्शनलटी गी त्रीयें पार्टी ते तुंदे अपने कोड थमां भेद करने च मदद मिलै. मसलन, data-bs-toggleअस data-toggle.

• सारे प्लगइन्स हून इक CSS चयनकर्ता गी पैह् ले तर्क दे रूप च स्वीकार करी सकदे न. प्लगइन दा इक नमां इंस्टेंस बनाने आस्तै तुस या तां इक DOM तत्व जां कुसै बी मान्य CSS चयनकर्ता गी पास करी सकदे ओ:

  const modal = new bootstrap.Modal('#myModal')
  const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
  

• popperConfigइक फंक्शन दे रूप च पास कीता जाई सकदा ऐ जेह् ड़ा बूटस्ट्रैप दी डिफाल्ट पॉपर कॉन्फ़िगरेशन गी इक तर्क दे रूप च स्वीकार करदा ऐ , तां जे तुस इस डिफाल्ट कॉन्फ़िगरेशन गी अपने तरीके कन्नै मर्ज करी सकदे ओ. ड्रॉपडाउन, पोपोवर, ते टूलटिप्स पर लागू होंदा ऐ।

• पोपर तत्वें दी बेहतर प्लेसमेंट आस्तै आस्तै डिफाल्ट मान fallbackPlacementsबदली दित्ता जंदा ऐ . ड्रॉपडाउन, पोपोवर, ते टूलटिप्स पर लागू होंदा ऐ।['top', 'right', 'bottom', 'left']

• _getInstance()→ जनेह् सार्वजनिक स्थिर तरीकें थमां अंडरस्कोर हटाया गेआ getInstance()।