मुख्य सामग्री पर जाउ डॉक्स नेविगेशन पर जाउ
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

  • तोड़ते हुए <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-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-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 चयनकर्ता कें पास कयर सकय छी:

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

  • popperConfigएकटा फंक्शन कें रूप मे पास कैल जा सकय छै जे बूटस्ट्रैप कें डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन कें एकटा तर्क कें रूप मे स्वीकार करयत छै, ताकि अहां इ डिफ़ॉल्ट कॉन्फ़िगरेशन कें अपन तरीका सं मर्ज करय सकय. ड्रॉपडाउन, पोपोवर, आओर टूलटिप्स पर लागू होइत अछि.

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

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