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

v5.2.0

ताज़ा डिज़ाइन

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

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

हमने CSS वेरिएबल का उपयोग करने के लिए अपने सभी घटकों को अपडेट किया है। जबकि Sass अभी भी सब कुछ रेखांकित करता है, प्रत्येक घटक को घटक आधार वर्गों (जैसे, .btn) पर CSS चर शामिल करने के लिए अद्यतन किया गया है, जिससे बूटस्ट्रैप के अधिक वास्तविक समय के अनुकूलन की अनुमति मिलती है। बाद की रिलीज़ में, हम अपने लेआउट, फ़ॉर्म, हेल्पर्स और उपयोगिताओं में 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. यह एक समस्या को ठीक करने के लिए कई Sass मानचित्रों को बाहर निकालता _variables.scssहै जहाँ एक मूल मानचित्र के अद्यतन द्वितीयक मानचित्रों पर लागू नहीं होते हैं जो उन्हें विस्तारित करते हैं। उदाहरण के लिए, $theme-colorsअन्य थीम मानचित्रों पर अपडेट लागू नहीं किए जा रहे थे $theme-colors, जो मुख्य अनुकूलन वर्कफ़्लो को तोड़ते हुए निर्भर थे। संक्षेप में, Sass की एक सीमा है जहाँ एक बार एक डिफ़ॉल्ट चर या मानचित्र का उपयोग करने के बाद , इसे अद्यतन नहीं किया जा सकता है। सीएसएस चर के साथ एक समान कमी है जब उनका उपयोग अन्य सीएसएस चर बनाने के लिए किया जाता है।

यही कारण है कि बूटस्ट्रैप में परिवर्तनशील अनुकूलन हमारे आयात स्टैक @import "functions"से पहले @import "variables"और बाकी के बाद आने चाहिए। यही बात Sass मानचित्रों पर भी लागू होती है—आपको डिफ़ॉल्ट के उपयोग से पहले उन्हें ओवरराइड करना होगा। निम्नलिखित मानचित्रों को नए में स्थानांतरित कर दिया गया है _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. उदाहरण के लिए तालिका दस्तावेज़ देखें।

• स्क्रॉलस्पी को इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करने के लिए फिर से लिखा गया है , जिसका अर्थ है कि अब आपको संबंधित पैरेंट रैपर की आवश्यकता नहीं है,offsetकॉन्फ़िगरेशन को हटा देता है, और बहुत कुछ। अपने स्क्रॉलस्पी कार्यान्वयन को उनकी नेविगेशन हाइलाइटिंग में अधिक सटीक और सुसंगत होने के लिए देखें।

• पॉपओवर और टूलटिप्स अब CSS वेरिएबल का उपयोग करते हैं। चरों की संख्या को कम करने के लिए कुछ CSS चरों को उनके Sass समकक्षों से अद्यतन किया गया है। परिणामस्वरूप, इस रिलीज़ में तीन चरों को हटा दिया गया है: $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सीएसएस ग्रिड को सेट और सक्षम करें $enable-cssgrid: true।

• ऑफकैनवास को सपोर्ट करने के लिए अपडेटेड नेवबार। — उत्तरदायी वर्गों और कुछ ऑफकैनवास मार्कअप के साथ किसी भी नेवबार में ऑफकैनवास ड्रॉअर जोड़ें ।.navbar-expand-*

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

• संक्षिप्त करें प्लगइन अब क्षैतिज ढहने का समर्थन करता है । - के बजाय संक्षिप्त करने के .collapse-horizontalलिए अपने में जोड़ें । या को सेट करके ब्राउजर रीपेंटिंग से बचें ।.collapsewidthheightmin-heightheight

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

• नए वैश्विक :rootCSS चर जोड़े गए। - शैलियों :rootको नियंत्रित करने के लिए स्तर पर कई नए CSS चर जोड़े गए । <body>हमारी उपयोगिताओं और घटकों सहित और अधिक काम कर रहे हैं, लेकिन अभी के लिए अनुकूलित करें अनुभाग में सीएसएस चर पढ़ें ।

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

• हमारे घटकों को अनुकूलित करने का तरीका दिखाने के लिए नए स्निपेट उदाहरण जोड़े गए। - हमारे नए स्निपेट्स उदाहरणों के साथ अनुकूलित घटकों और अन्य सामान्य डिज़ाइन पैटर्न का उपयोग करने के लिए तैयार रहें । फ़ुटर , ड्रॉपडाउन , सूची समूह , और मोडल शामिल हैं .

• पॉपओवर और टूलटिप्स से अप्रयुक्त पोजिशनिंग शैलियों को हटा दिया क्योंकि इन्हें पूरी तरह से पॉपर द्वारा नियंत्रित किया जाता है। $tooltip-marginबहिष्कृत कर दिया गया है और nullप्रक्रिया में सेट कर दिया गया है।

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

निर्भरता

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

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

बटन

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

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

गिर जाना

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

नीचे की ओर फैलने वाला बिंदु

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

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

• बेहतर कंट्रास्ट के लिए ड्रॉपडाउन डिवाइडर को गहरा किया।

• तोड़नाड्रॉपडाउन के लिए सभी ईवेंट अब ड्रॉपडाउन टॉगल बटन पर ट्रिगर हो जाते हैं और फिर मूल तत्व तक बबल हो जाते हैं।

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

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

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

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

jumbotron

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

सूची समूह

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

नव और टैब

• , , , और कक्षा के लिए नए nullचर जोड़े गए ।font-sizefont-weightcolor:hover color.nav-link

नवबार्स

• तोड़नानेवबार को अब एक कंटेनर की आवश्यकता है (स्पेसिंग आवश्यकताओं और सीएसएस को आवश्यक रूप से सरल बनाने के लिए)।
• तोड़ना.activeवर्ग को अब s पर लागू नहीं किया जा सकता है , .nav-itemइसे सीधे .nav-links पर लागू किया जाना चाहिए।

ऑफकैनवास

• नया ऑफकैनवास घटक जोड़ा गया ।

पृष्ठ पर अंक लगाना

• पेजिनेशन लिंक अब अनुकूलन योग्य 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 चयनकर्ता पास कर सकते हैं:

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

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

• पॉपर तत्वों के बेहतर स्थान के लिए के लिए डिफ़ॉल्ट मान fallbackPlacementsको बदल दिया गया है । ड्रॉपडाउन, पॉपओवर और टूलटिप्स पर लागू होता है।['top', 'right', 'bottom', 'left']

• सार्वजनिक स्थैतिक विधियों जैसे _getInstance()→ से निकाला गया अंडरस्कोर getInstance()।