मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
in English

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

बूटस्ट्रैप स्रोत फाइल, दस्तावेज, आओर घटक मे बदलाव कें ट्रैक करू आओर समीक्षा करू जे अहां कें v4 सं v5 मे माइग्रेट करय मे मदद करतय.

निर्भरताएँ

  • 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

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

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

आर टी एल

  • क्षैतिज दिशा विशिष्ट चर, उपयोगिता, आरू मिक्सिन सब क॑ तार्किक गुणऽ के उपयोग करै लेली नाम बदली देलऽ गेलऽ छै जैसनऽ कि फ्लेक्सबॉक्स लेआउट म॑ मिलै छै-जैसे, startआरू आरू के endबदला म॑ ।leftright

रूप

  • नव फ्लोटिंग फॉर्म जोड़ल गेल! हमनें फ्लोटिंग लेबल उदाहरण क॑ पूर्ण रूप स॑ समर्थित फॉर्म घटकऽ म॑ बढ़ावा देल॑ छै । नव फ्लोटिंग लेबल पृष्ठ देखू।

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

    • .custom-checkअछि आब .form-check.
    • .custom-check.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, जेकरा स॑ आपने क॑ खाली एचटीएमएल तत्व बदलै स॑ इनलाइन या ब्लॉक मदद पाठ बनाबै के अनुमति मिलै छै जेना कि आप चाहै छियै ।

  • मान्यता चिह्न आब <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एक के बजाय एक (एम्बेडेड एसवीजी) के उपयोग करै &times;छै, जेकरा स॑ आपकऽ मार्कअप क॑ स्पर्श करै के जरूरत के बिना आसान अनुकूलन के अनुमति मिलै छै ।

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

खसि पड़नाइ

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

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

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

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

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

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

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

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

जम्बोट्रॉन

सूची समूह

  • , , , आओर क्लास मे नव nullचर जोड़ा गेल.font-sizefont-weightcolor:hover color.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-smrounded-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 चयनकर्ता कें पास कयर सकय छी:

    var modal = new bootstrap.Modal('#myModal')
    var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
    
  • popperConfigएकटा फंक्शन कें रूप मे पास कैल जा सकय छै जे बूटस्ट्रैप कें डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन कें एकटा तर्क कें रूप मे स्वीकार करयत छै, ताकि अहां इ डिफ़ॉल्ट कॉन्फ़िगरेशन कें अपन तरीका सं मर्ज करय सकय. ड्रॉपडाउन, पोपोवर, आओर टूलटिप्स पर लागू होइत अछि.

  • कें लेल डिफ़ॉल्ट मान कें fallbackPlacementsबदलल गेल ['top', 'right', 'bottom', 'left']छै पॉपर तत्वक कें बेहतर प्लेसमेंट कें लेल. ड्रॉपडाउन, पोपोवर, आओर टूलटिप्स पर लागू होइत अछि.

  • सार्वजनिक स्थिर विधि सँ अंडरस्कोर हटा देल गेल जेना _getInstance()getInstance().