v5 मे माइग्रेट भ रहल अछि

v5.2.0 के अनुसार

ताज़ा डिजाइन

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

अधिक सीएसएस चर

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

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

एहि तरहें, जतय संभव होयत, हम बेसी सीएसएस चर दिस धक्का दैत रहब, मुदा कृपया पहचानू जे हमर कार्यान्वयन 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

आब अहां के कस्टम बूटस्ट्रैप सीएसएस बिल्ड के अलग मैप आयात के संग किछ एहन देखय के चाही.

  // 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 हाइलाइटिंग म॑ अधिक सटीक आरू सुसंगत बनाबै लेली देखऽ ।

• पॉपओवर आ टूलटिप आब सीएसएस चर क उपयोग करैत अछि । कुछ सीएसएस चर क॑ ओकरऽ सास समकक्ष स॑ अपडेट करलऽ गेलऽ छै ताकि चर केरऽ संख्या कम करलऽ जाय सक॑ । परिणामस्वरूप, तीन चर क॑ ई रिलीज म॑ अप्रचलित करलऽ गेलऽ छै: $popover-arrow-color, $popover-arrow-outer-color, आरू $tooltip-arrow-color.

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

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

• नव वर्ग क माध्यम स तालिका क समर्थन धारीदार कॉलम जोड़ा गेल ।.table-striped-columns

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

v5.1.0 के अनुसार

• CSS ग्रिड लेआउट क लेल प्रयोगात्मक समर्थन जोडल गेल . — ई एकटा काज प्रगति पर अछि, आ एखन धरि उत्पादन उपयोगक लेल तैयार नहि अछि, मुदा अहाँ Sass के माध्यम सँ नव सुविधा मे विकल्प चुनि सकैत छी | एकरा सक्षम करबाक लेल, डिफ़ॉल्ट ग्रिड केँ अक्षम करू, सेट $enable-grid-classes: falseकए कए आओर CSS ग्रिड कए सेट कए सक्षम करू $enable-cssgrid: true.

• ऑफकैनवास समर्थन करबाक लेल नवबार अपडेट कएल गेल अछि. — रिस्पांसिव क्लास आ किछु ऑफकैनवास मार्कअप के संग कोनो नवबार मे ऑफकैनवास ड्रॉअर जोड़ू ..navbar-expand-*

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

• संकुचित प्लगइन आब क्षैतिज संकुचन समर्थन करैत अछि . — के बजाय के संकुचित करबाक .collapse-horizontalलेल अपन मे जोड़ू . क या सेट कए ब्राउज़र क पुनर्चित्रण स बचू ..collapsewidthheightmin-heightheight

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

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

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

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

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

अधिक जानकारी चाहैत छी? v5.1.0 ब्लॉग पोस्ट पढ़ू।

निर्भरताएँ

• jQuery छोड़ि देल गेल।
• Popper v1.x सँ Popper v2.x मे अपग्रेड कएल गेल अछि.
• Libsass के स्थान पर Dart Sass के रूप में हमर Sass कंपाइलर देल गेल Libsass deprecated छल.
• हमर दस्तावेज बनेबाक लेल जेकिल सँ ह्यूगो मे माइग्रेट कएल गेल

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

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

दस्तावेजीकरण बदलैत अछि

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

सस्स

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

• तोड़ते हुए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()

• तोड़ते हुएSass केरऽ अपनऽ रंग स्केलिंग फंक्शन स॑ टक्कर स॑ बचै लेली scale-color()फंक्शन क॑ बदललऽ गेलऽ छै ।shift-color()

• box-shadowmixins आब मान आओर कईटा तर्क स nullड्रॉप क अनुमति दैत अछि. देखू # 30394 .none

• आब border-radius()मिक्सिन क' डिफ़ॉल्ट मान अछि.

रंग प्रणाली

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

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

• रंग विपरीतता में सुधार। 3:1 स॑ 4.5:1 तलक बम्प करलऽ गेलऽ रंग कंट्रास्ट रेशियो आरू अपडेट करलऽ गेलऽ नीले, हरे, सियान, आरू गुलाबी रंग क॑ डब्ल्यूसीएजी 2.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 आओर flex utilities पृष्ठ देखू .

• तोड़ते हुए 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-sizes.

• दू टा नव .display-*हेडिंग आकार जोड़ल गेल, .display-5आ .display-6.

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

• अपनऽ शैली क॑ ताज़ा करै लेली आरू स्टाइलिंग प॑ अधिक नियंत्रण लेली CSS चर के साथ ओकरा पुनर्निर्माण करै लेली पुनः डिजाइन करलऽ गेलऽ टेबल ।

• तोड़ते हुएनेस्टेड टेबल आब शैली विरासत मे नहि लैत अछि.

• तोड़ते हुए .thead-lightआरू वेरिएंट क्लास .thead-darkके पक्ष म ं॑ छोड़लऽ गेलऽ छै .table-*जेकरऽ उपयोग सब तालिका तत्व ( thead, tbody, tfoot, tr, thआरू td) के लेलऽ करलऽ जाब॑ सकै छै ।

• तोड़ते हुए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.

• Added $enable-smooth-scroll, जे वैश्विक रूप सं लागू होयत scroll-behavior: smoothछै-सिवाय उपयोगकर्ताक कें जे prefers-reduced-motionमीडिया क्वेरी कें माध्यम सं कम गति कें लेल कहय छै. देखू # 31877

आर टी एल

• क्षैतिज दिशा विशिष्ट चर, उपयोगिता, आरू मिक्सिन सब क॑ तार्किक गुणऽ के उपयोग करै लेली नाम बदली देलऽ गेलऽ छै जैसनऽ कि फ्लेक्सबॉक्स लेआउट म॑ मिलै छै-जैसे, 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-textआब सेट नै करै छै display, जेकरा स॑ आपने क॑ खाली एचटीएमएल तत्व बदलै स॑ इनलाइन या ब्लॉक मदद पाठ बनाबै के अनुमति मिलै छै जेना कि आप चाहै छियै ।

• फॉर्म नियंत्रण आब संभव होएय पर स्थिर उपयोग नहि कैल जायत छै, बल्कि अन्य घटकक कें साथ अनुकूलन आ संगतता मे सुधार heightकें लेल स्थगित करयत छै.min-height

• मान्यता चिह्न आब <select>s क संग लागू नहि कएल जाएत अछि multiple.

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

घटक

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

अकॉर्डियन

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

अलर्ट

• आब अलर्ट मे आइकन वाला उदाहरण अछि .

• <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-dividerबिना CSS के पुनः संकलित करय के जरूरत के आसान अनुकूलन के लेल नव CSS कस्टम गुण जोड़ल गेल .

बटन के

• तोड़ते हुए टॉगल बटन , चेकबॉक्स या रेडियो के साथ, आब जावास्क्रिप्ट के आवश्यकता नै छै आरू नया मार्कअप छै. हमरा सभकेँ आब कोनो रैपिंग तत्वक आवश्यकता नहि अछि, , मे जोड़ू.btn-check,<input>आ एकरा पर कोनो.btnक्लासक<label>. देखू # 30650 . एकरा लेली डॉक्स हमरऽ बटन पेज स॑ नया फॉर्म सेक्शन प॑ आबी गेलऽ छै ।

• तोड़ते हुए उपयोगिता .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

• बंद बटन आब एचटीएमएल म॑ background-imageएक के बजाय एक (एम्बेडेड एसवीजी) के उपयोग करै ×छै, जेकरा स॑ आपकऽ मार्कअप क॑ स्पर्श करै के जरूरत के बिना आसान अनुकूलन के अनुमति मिलै छै ।

• नया .btn-close-whiteवेरिएंट जोड़लऽ गेलऽ छै जे filter: invert(1)गहरे रंग के पृष्ठभूमि के खिलाफ उच्च विपरीत खारिज आइकन क॑ सक्षम करै लेली उपयोग करै छै ।

खसि पड़नाइ

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

ड्रॉपडाउन

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

• के लिये नया चर जोड़ा गया $dropdown-padding-x|

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

• तोड़ते हुएड्रॉपडाउन कें लेल सबटा इवेंट आब ड्रॉपडाउन टॉगल बटन पर ट्रिगर भ जायत छै आ ओकरा बाद मूल तत्व तइक बबल भ जायत छै.

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

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

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

• ड्रॉपडाउन आब .dropdown-items मे लपेटल s समर्थन करैत अछि <li>.

जम्बोट्रॉन

• तोड़ते हुएजम्बोट्रॉन घटक कए छोड़ि देल गेल किया कि एकर प्रतिकृति उपयोगिता क संग कैल जा सकैत अछि । डेमो के लेल हमर नव जंबोट्रॉन उदाहरण देखू।

सूची समूह

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

नवस आ टैब

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

नवबरस

• तोड़ते हुएनवबार कें लेल आब भीतर एकटा कंटेनर कें आवश्यकता होयत छै (स्पेसिंग आवश्यकताक कें कठोर रूप सं सरल बनावा कें लेल आ सीएसएस कें आवश्यकता छै).
• तोड़ते हुए.activeक्लास आब s पर लागू नहि कएल जा सकैत अछि , .nav-itemएकरा सीधा s पर लागू करब आवश्यक अछि .nav-link|

ऑफकैनवास

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

पृष्ठांकन

• पृष्ठांकन लिंकऽ म॑ अब॑ अनुकूलन योग्य margin-leftछै जे एक दोसरा स॑ अलग करला प॑ सब कोना प॑ गतिशील रूप स॑ गोल होय जाय छै ।

• transitionपृष्ठांकन लिंक मे s जोड़ा गेल ।

पोपोवर्स

• तोड़ते हुएहमर डिफ़ॉल्ट पॉपओवर टेम्पलेट मे नाम बदलल .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, बड़ऽ स॑ छोटऽ) केरऽ समान पैमाना के उपयोग करै छै, आरू एकरा Sass मैप के माध्यम स॑ संशोधित करलऽ जाब॑ सकै छै ।

• तोड़ते हुएसंक्षिप्तता आ स्थिरताक .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.

सहायक

• तोड़ते हुए रिस्पांसिव एम्बेड हेल्पर क॑ नया क्लास नाम आरू बेहतर व्यवहार के साथ-साथ एक सहायक सीएसएस चर के साथ रेशियो हेल्पर के नाम बदली देलऽ गेलऽ छै ।

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

• तोड़ते हुए “स्क्रीन रीडर” कक्षा आब “दृश्य रूप स नुकायल” कक्षा भ गेल अछि .

  • सस फाइलकेँसँ बदलि देल scss/helpers/_screenreaders.scssगेल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().