मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

v5 . में माइग्रेट करना

v4 से v5 में माइग्रेट करने में आपकी सहायता के लिए बूटस्ट्रैप स्रोत फ़ाइलों, दस्तावेज़ीकरण और घटकों में परिवर्तनों को ट्रैक और समीक्षा करें।

इस पृष्ठ पर

निर्भरता

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

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

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

दस्तावेज़ीकरण परिवर्तन

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

सास

  • हमने अनावश्यक मानों को निकालना आसान बनाने के लिए डिफ़ॉल्ट Sass मानचित्र मर्ज को हटा दिया है। ध्यान रखें कि अब आपको 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(), और gray()चर के पक्ष में कार्य करता है। #29083 देखें ।

  • तोड़नानाम बदला गया theme-color-level()फ़ंक्शन और अब केवल रंगों color-level()के बजाय आप जो भी रंग चाहते हैं उसे स्वीकार करता है। देखें #29083 देखें: बाद में में छोड़ दिया गया था ।$theme-color 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-shadowमिक्सिंस अब कई तर्कों से nullमूल्यों और ड्रॉप की अनुमति देते हैं। #30394 देखें ।none

  • border-radius()मिक्सिन का अब एक डिफ़ॉल्ट मान है ।

रंग प्रणाली

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

  • प्रत्येक रंग के लिए नए रंग और रंग जोड़े, प्रत्येक आधार रंग के लिए नौ अलग-अलग रंग प्रदान करते हुए, नए Sass चर के रूप में।

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

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

ग्रिड अपडेट

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

  • बेहतर गटर। गटर अब रिम्स में सेट हैं, और 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एक निर्दिष्ट आकार के बिना मिश्रण को डिफ़ॉल्ट रूप से समान कॉलम में अपडेट किया गया ।

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

  • RFS अब डिफ़ॉल्ट रूप से सक्षम है। मिक्सिन का उपयोग करने वाले शीर्षकfont-size()स्वचालित रूपfont-sizeसे व्यूपोर्ट के साथ अपने पैमाने पर समायोजित हो जाएंगे। यह सुविधा पहले v4.

  • तोड़ना$display-*हमारे वेरिएबल्स को बदलने के लिए और एक $display-font-sizesसैस मैप के साथ हमारी डिस्प्ले टाइपोग्राफी को ओवरहाल किया। एकल और समायोजित s $display-*-weightके लिए अलग-अलग चर भी हटा दिए ।$display-font-weightfont-size

  • दो नए .display-*शीर्षक आकार जोड़े गए, .display-5और .display-6.

  • लिंक डिफ़ॉल्ट रूप से रेखांकित होते हैं (न केवल होवर पर), जब तक कि वे विशिष्ट घटकों का हिस्सा न हों।

  • स्टाइल पर अधिक नियंत्रण के लिए उनकी शैलियों को ताज़ा करने और उन्हें सीएसएस चर के साथ पुनर्निर्माण करने के लिए पुन: डिज़ाइन की गई तालिकाएँ ।

  • तोड़नानेस्टेड टेबल अब शैलियों को इनहेरिट नहीं करते हैं।

  • तोड़ना .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के बदले leftमें right।

फार्म

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

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

    • .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, जिससे आप केवल HTML तत्व को बदलकर अपनी इच्छानुसार इनलाइन या ब्लॉक हेल्प टेक्स्ट बना सकते हैं।

  • सत्यापन चिह्न अब <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सीएसएस को फिर से संकलित करने की आवश्यकता के बिना आसान अनुकूलन के लिए नई सीएसएस कस्टम संपत्ति जोड़ी गई।

बटन

  • तोड़ना टॉगल बटन , चेकबॉक्स या रेडियो के साथ, अब जावास्क्रिप्ट की आवश्यकता नहीं है और नया मार्कअप है। अब हमें रैपिंग एलिमेंट की आवश्यकता नहीं है, इसमें जोड़ें.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-imagea के बजाय (एम्बेडेड SVG) का उपयोग करते हैं, जिससे आपके मार्कअप को छूने की आवश्यकता के बिना आसान अनुकूलन की अनुमति मिलती है।&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>।

jumbotron

सूची समूह

  • , , , और कक्षा के लिए नए nullचर जोड़े गए ।font-sizefont-weightcolor:hover color.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.

  • तोड़नाडिफ़ॉल्ट रूप से अक्षम नकारात्मक मार्जिन।

  • अतिरिक्त तत्वों की पृष्ठभूमि को शीघ्रता से सेट करने के लिए नई .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-*

  • CSS ग्रिड और फ्लेक्सबॉक्स लेआउट के लिए .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 > *चयनकर्ता के पक्ष में छोड़ दिया है। किसी और वर्ग की आवश्यकता नहीं है, और अनुपात सहायक अब किसी भी HTML तत्व के साथ काम करता है।
    • $embed-responsive-aspect-ratiosSass मानचित्र का नाम बदल दिया गया है और $aspect-ratiosवर्ग के नाम और प्रतिशत को key: valueजोड़ी के रूप में शामिल करने के लिए इसके मूल्यों को सरल बना दिया गया है।
    • CSS वेरिएबल अब उत्पन्न होते हैं और Sass मानचित्र में प्रत्येक मान के लिए शामिल किए जाते हैं। कोई भी कस्टम पक्षानुपात बनाने --bs-aspect-ratioके लिए चर को संशोधित करें ..ratio

  • तोड़ना "स्क्रीन रीडर" कक्षाएं अब "दृष्टि से छिपी हुई" कक्षाएं हैं ।

    • Sass फ़ाइल को से बदल scss/helpers/_screenreaders.scssदियाscss/helpers/_visually-hidden.scss
    • नाम बदला .sr-onlyऔर .sr-only-focusableकरने के लिए .visually-hiddenand.visually-hidden-focusable
    • नाम बदला sr-only()और sr-only-focusable()मिश्रण किया visually-hidden()और visually-hidden-focusable().

  • bootstrap-utilities.cssअब हमारे सहायक भी शामिल हैं। सहायकों को अब कस्टम बिल्ड में आयात करने की आवश्यकता नहीं है।

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

  • नियमित जावास्क्रिप्ट में होने के लिए jQuery निर्भरता को छोड़ दिया और प्लगइन्स को फिर से लिखा।

  • तोड़नासभी जावास्क्रिप्ट प्लगइन्स के लिए डेटा विशेषताओं को अब बूटस्ट्रैप कार्यक्षमता को तीसरे पक्ष और आपके अपने कोड से अलग करने में मदद करने के लिए नामित किया गया है। उदाहरण के लिए, हम data-bs-toggleइसके बजाय उपयोग करते हैं data-toggle।

  • सभी प्लगइन्स अब एक सीएसएस चयनकर्ता को पहले तर्क के रूप में स्वीकार कर सकते हैं। प्लगइन का एक नया उदाहरण बनाने के लिए आप या तो एक 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()।