v5 में माइग्रेट हो रहल बा

बूटस्ट्रैप स्रोत फाइल, दस्तावेज, आ घटक सभ में बदलाव के ट्रैक करीं आ समीक्षा करीं जेह से कि रउआँ के v4 से v5 में माइग्रेट करे में मदद मिल सके।

एह पन्ना पर दिहल गइल बा

v5.2.0 के बा

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

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

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

अइसे, जहाँ संभव होखे, हमनी के अउरी CSS चर के ओर धक्का देत रहब जा, लेकिन कृपया मान्यता दीं कि v5 में हमनी के कार्यान्वयन तनिका सीमित हो सकेला।

नया`_maps.scss`

बूटस्ट्रैप v5.2.0 में एगो नया Sass फाइल पेश कइल गइल जवना में _maps.scss. ई कई गो सास मैप सभ के बाहर निकाल _variables.scssके एगो मुद्दा के ठीक करे ला जहाँ कौनों मूल मैप के अपडेट ओह सेकेंडरी मैप सभ पर लागू ना कइल गइल रहे जे इनहन के बिस्तार करे लें। उदाहरण खातिर, अपडेट के $theme-colorsअन्य थीम मैप सभ पर लागू ना कइल जा रहल रहे जे पर निर्भर रहलें $theme-colors, कुंजी अनुकूलन वर्कफ़्लो सभ के तोड़त। संक्षेप में, Sass के एगो सीमा बा जहाँ एक बेर डिफ़ॉल्ट चर भा मैप के इस्तेमाल हो गइला के बाद , एकरा के अपडेट ना कइल जा सके ला। CSS चर सभ में भी अइसने कमी होला जब इनहन के इस्तेमाल अन्य CSS चर सभ के रचना करे खातिर कइल जाला।

एही से बूटस्ट्रैप में चर अनुकूलन के बाद आवे के पड़ेला @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

राउर कस्टम बूटस्ट्रैप सीएसएस बिल्ड अब अलग से मैप आयात के साथ कुछ अइसने लउके के चाहीं।

  // 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कॉन्फिग के डिप्रिकेट करे ला आ अउरी बहुत कुछ। अपना स्क्रॉलस्पाई कार्यान्वयन के देखल जाव कि ऊ लोग के नव हाइलाइटिंग में अधिका सटीक आ सुसंगत होखे.
पॉपओवर आ टूलटिप में अब सीएसएस चर के इस्तेमाल होला। कुछ सीएसएस चर सभ के अपना सास समकक्ष सभ से अपडेट कइल गइल बा जेह से कि चर सभ के संख्या कम हो सके। एकरे परिणाम के रूप में, एह रिलीज में तीन गो चर के डिप्रिकेट कइल गइल बा: $popover-arrow-color, $popover-arrow-outer-color, आ $tooltip-arrow-color.
नया .text-bg-{color}सहायक लोग जोड़ल गइल. .text-*व्यक्तिगत आ उपयोगिता सेट करे के बजाय .bg-*, अब रउआँ हेल्परन के इस्तेमाल क.text-bg-*background-color के विपरीत अग्रभूमि के साथ एगो सेट कर सकत बानी color।
.form-check-reverseलेबल आ संबद्ध चेकबॉक्स/रेडियो सभ के क्रम के फ्लिप करे खातिर संशोधक जोड़ल गइल ।
नया क्लास के माध्यम से टेबल में धारीदार कॉलम समर्थन जोड़ल गइल ।.table-striped-columns

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

v5.1.0 के बा

सीएसएस ग्रिड लेआउट खातिर प्रयोगात्मक समर्थन जोड़ल गइल बा . — ई एगो काम चल रहल बा, आ अबहीं ले प्रोडक्शन के इस्तेमाल खातिर तइयार नइखे, बाकिर रउरा सास का माध्यम से एह नया फीचर में शामिल हो सकेनी. एकरा के सक्षम करे खातिर, डिफ़ॉल्ट ग्रिड के अक्षम करीं, सेट करके $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 ब्लॉग पोस्ट पढ़ीं।

अरे उहाँ के बा! बूटस्ट्रैप 5 के हमनी के पहिला प्रमुख रिलीज, v5.0.0 में बदलाव के नीचे दस्तावेजीकरण कईल गईल बा। ई ऊपर देखावल गइल अतिरिक्त बदलाव के ना देखावे लें।

निर्भरता के बारे में बतावल गइल बा

जेक्वेरी छोड़ दिहल गइल.
पॉपर v1.x से पॉपर v2.x में अपग्रेड कइल गइल बा।
लिबसास के जगह डार्ट सस के इस्तेमाल कइल गइल काहे कि हमनी के सास कंपाइलर दिहल गइल लिबसास के डिप्रीकेट कइल गइल रहे.
हमनी के दस्तावेज बनावे खातिर जेकिल से ह्यूगो में माइग्रेट हो गइल

ब्राउजर के समर्थन बा

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

दस्तावेजीकरण में बदलाव होला

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

ससस के बा

हमनी के डिफ़ॉल्ट Sass मैप मर्ज के खाई में डाल देले बानी जा ताकि फालतू मान के हटावल आसान हो सके। ध्यान रहे कि अब रउआ के सास मैप में सभ मान के परिभाषित करे के होई जईसे $theme-colors. देखल जाव कि सास नक्शा से कइसे निपटल जाला .
टूट रहल बा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()अब खाली रंग के बजाय रउरा जवन रंग चाहीं ओकरा के स्वीकार कर लेला $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()
टूट रहल बासास के खुद के रंग स्केलिंग फंक्शन से टक्कर से बचे खातिर scale-color()फंक्शन के नाम बदल दिहल गइल।shift-color()
box-shadowमिक्सिन अब कई गो आर्गुमेंट से nullमान आ ड्रॉप के अनुमति देला। देखल जाव #30394 .none
अब border-radius()मिक्सिन के डिफ़ॉल्ट मान हो गइल बा।

रंग प्रणाली के बा

रंग प्रणाली जवन नया रंग प्रणाली के पक्ष में काम करत रहे color-level()आ हटा दिहल गइल रहे। हमनी के कोडबेस में $theme-color-intervalसभ lighten()आ फंक्शन के जगह आ . ई फंक्शन सभ रंग के हल्कापन के एगो निश्चित मात्रा में बदले के बजाय या त सफेद भा करिया रंग से मिला दीहें। कवनो रंग के या त टिंट करी भा शेड करी ई एह बात पर निर्भर करी कि ओकर वजन पैरामीटर सकारात्मक बा कि नकारात्मक . अधिक जानकारी खातिर #30622 देखल जाव ।darken()tint-color()shade-color()shift-color()
हर रंग खातिर नया टिंट आ शेड जोड़ल गइल, हर बेस रंग खातिर नौ गो अलग-अलग रंग उपलब्ध करावल गइल, नया सस चर के रूप में।
रंग के कंट्रास्ट में सुधार भइल बा. 3:1 से 4.5:1 तक बम्प कलर कंट्रास्ट रेशियो अवुरी WCAG 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.cssbox-sizing: border-boxअब ग्लोबल बॉक्स-साइजिंग के रीसेट करे के बजाय खाली कॉलम पर लागू होला । एह तरह से हमनी के ग्रिड स्टाइल के बिना कवनो हस्तक्षेप के अधिका जगह इस्तेमाल कइल जा सकेला.
$enable-grid-classesअब कंटेनर क्लास के जनरेशन के अक्षम ना करेला। देखल जाव #29146।
make-colमिक्सिन के बिना निर्दिष्ट आकार के बराबर कॉलम पर डिफ़ॉल्ट रूप से अपडेट कइल गइल ।

सामग्री, रिबूट आदि के बारे में बतावल गइल बा

अब आरएफएस डिफ़ॉल्ट रूप से सक्षम हो गइल बा। मिक्सिन के इस्तेमाल करे वाला हेडिंग सभके व्यूपोर्ट के साथ स्केल करे खातिरfont-size()स्वचालित रूप से समायोजितइ फीचर पहिले v4 के संगे ऑप्ट-इन कईल गईल रहे।font-size
टूट रहल बा$display-*हमनी के चर के बदले खातिर आ एगो $display-font-sizesसस मैप से हमनी के डिस्प्ले टाइपोग्राफी के ओवरहाल कइनी जा। $display-*-weightसाथ ही एकल $display-font-weightआ समायोजित font-sizeएस खातिर अलग-अलग चर के हटा दिहल गइल ।
.display-*दू गो नया हेडिंग साइज जोड़ल गइल , .display-5आ .display-6.
लिंक सभ के डिफ़ॉल्ट रूप से रेखांकित कइल जाला (केवल होवर पर ना), जबले कि ऊ बिसेस घटक सभ के हिस्सा ना होखे।
टेबल सभ के नया तरीका से डिजाइन कइल गइल बा जेह से कि इनहन के स्टाइल के रिफ्रेश कइल जा सके आ स्टाइलिंग पर अउरी नियंत्रण खातिर सीएसएस चर सभ के साथ इनहन के दोबारा बनावल जा सके।
टूट रहल बानेस्टेड टेबल अब स्टाइल के विरासत में ना पावेला।
टूट रहल बा .thead-lightआ वेरिएंट क्लास .thead-darkसभ के पक्ष में छोड़ दिहल जाला .table-*जेकर इस्तेमाल सभ टेबल तत्व ( thead, tbody, tfoot, tr, thआ td) खातिर कइल जा सके ला।
टूट रहल बाtable-row-variant()मिक्सिन के नाँव बदल के खाली 2 गो पैरामीटर स्वीकार करे ला table-variant(): $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-सिवाय प्रयोगकर्ता लोग के जे 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-textno longer sets display, जवना से रउआँ खाली एचटीएमएल तत्व बदल के इनलाइन या ब्लॉक मदद टेक्स्ट बना सकेनी जइसन रउआँ चाहत बानी।
फॉर्म कंट्रोल सभ के अब heightसंभव होखे पर फिक्स के इस्तेमाल ना कइल जाला, एकरे बजाय min-heightकस्टमाइजेशन आ अन्य घटक सभ के साथ संगतता में सुधार करे खातिर स्थगित कइल जाला।
मान्यता आइकन अब <select>s के साथ लागू ना होला multiple।
के तहत स्रोत Sass फाइल सभ के पुनर्व्यवस्थित कइल गइल scss/forms/, इनपुट समूह शैली सभ सहित।

घटक के बारे में बतावल गइल बा

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

अकॉर्डियन के नाम से जानल जाला

नया अकॉर्डियन घटक जोड़ल गइल बा .

अलर्ट कर दिहल गइल बा

अब अलर्ट में आइकन वाला उदाहरण ब�� .
हर अलर्ट में s खातिर कस्टम स्टाइल हटा दिहल <hr>गइल काहे कि ऊ लोग पहिले से इस्तेमाल करेला 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>साथ जोड़ी बनाईं। देखल जाव #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
बंद बटन अब एचटीएमएल में background-imagea के बजाय (एम्बेडेड एसवीजी) के इस्तेमाल करे ×लें, जेकरा से बिना आपके मार्कअप के छूवे के जरूरत के आसान अनुकूलन हो सके ला।
नया .btn-close-whiteवेरिएंट जोड़ल गइल जेकर इस्तेमाल filter: invert(1)गहिरा रंग के बैकग्राउंड के खिलाफ उच्च कंट्रास्ट डिस्मिस आइकन सभ के सक्षम करे खातिर करे ला।

ढहल

अकॉर्डियन खातिर स्क्रॉल एंकरिंग हटा दिहल गइल.

ड्रॉपडाउन हो गइल बा

ऑन-डिमांड डार्क ड्रॉपडाउन खातिर नया .dropdown-menu-darkवेरिएंट आ संबद्ध चर जोड़ल गइल।
खातिर नया चर जोड़ल गइल बा $dropdown-padding-x.
बेहतर कंट्रास्ट खातिर ड्रॉपडाउन डिवाइडर के गहरा कर दिहल गइल.
टूट रहल बाड्रॉपडाउन खातिर सभ इवेंट अब ड्रॉपडाउन टॉगल बटन पर ट्रिगर हो जाला आ फिर मूल तत्व तक ले बबल हो जाला।
अब ड्रॉपडाउन मेनू सभ में एगो data-bs-popper="static"एट्रिब्यूट सेट होला जब ड्रॉपडाउन के पोजीशनिंग स्थिर होखे, या ड्रॉपडाउन नवबार में होखे। ई हमनी के जावास्क्रिप्ट द्वारा जोड़ल गइल बा आ पॉपर के पोजीशनिंग में हस्तक्षेप कइले बिना कस्टम पोजीशन स्टाइल के इस्तेमाल करे में मदद करे ला।
टूट रहल बादेशी पॉपर flipकॉन्फ़िगरेशन के पक्ष में ड्रॉपडाउन प्लगइन खातिर विकल्प छोड़ दिहल गइल। अब रउआँ फ्लिप संशोधक fallbackPlacementsमें विकल्प खातिर खाली सरणी पास क के फ्लिप व्यवहार के अक्षम क सकत बानी ।
ड्रॉपडाउन मेनू अब ऑटो बंद व्यवहारautoClose के संभाले खातिर एगो नया विकल्प के साथ क्लिक करे लायक हो सकेला . रउआँ एह विकल्प के इस्तेमाल ड्रॉपडाउन मेनू के भीतर या बाहर क्लिक के स्वीकार करे खातिर कर सकत बानी ताकि एकरा के इंटरैक्टिव बनावल जा सके।
ड्रॉपडाउन अब .dropdown-itemएस में लपेटल एस के समर्थन <li>करेला।

जंबोट्रॉन के बा

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

समूह के सूची बनाईं

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

नवस आ टैब के बारे में बतावल गइल बा

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

नवबर के बा

टूट रहल बानवबार सभ खातिर अब भीतर एगो कंटेनर के जरूरत होला (स्पेसिंग के जरूरत आ सीएसएस के जरूरत के बहुत सरल बनावे खातिर)।
टूट रहल बाअब .activeक्लास के s पर लागू ना कइल जा सके .nav-item, एकरा के सीधे .nav-links पर लागू करे के पड़ी.

ऑफकैनवास के बा

नया ऑफकैनवास घटक जोड़ल गइल बा .

पृष्ठांकन कइल गइल बा

पेजिनेशन लिंक सभ में अब कस्टमाइज करे लायक 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.

उपयोगिता के बारे में बतावल गइल बा

टूट रहल बाRTL समर्थन के जोड़ के दिशात्मक नाँव के बजाय तार्किक गुण नाँव के इस्तेमाल करे खातिर कई गो उपयोगिता सभ के नाँव बदल दिहल गइल:
- नाम बदल दिहल गइल .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(RFS सक्षम के साथ)। ई सभ एचटीएमएल के डिफ़ॉल्ट हेडिंग सभ के समान पैमाना के इस्तेमाल करे लें (1-6, बड़ से छोट), आ इनहन के सैस मैप के माध्यम से संशोधित कइल जा सके ला।
टूट रहल बासंक्षिप्तता आ स्थिरता के .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.

सहायक लोग के बा

टूट रहल बा रिस्पांसिव एम्बेड हेल्पर सभ के नाँव बदल के रेशियो हेल्पर सभ में रखल गइल बा जेह में नया क्लास नाँव आ बेहतर व्यवहार बाड़ें आ साथ ही साथ एगो सहायक CSS चर भी बा।
- कक्षा के नाम बदल के आस्पेक्ट रेशियो में बदल दिहल गइल 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()।