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)
sm
lg
-
तोड़नाप्रिंट शैलियों और
$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-weight
font-size
-
दो नए
.display-*
शीर्षक आकार जोड़े गए,.display-5
और.display-6
. -
लिंक डिफ़ॉल्ट रूप से रेखांकित होते हैं (न कि केवल होवर पर), जब तक कि वे विशिष्ट घटकों का हिस्सा न हों।
-
स्टाइल पर अधिक नियंत्रण के लिए उनकी शैलियों को ताज़ा करने के लिए तालिकाओं को फिर से डिज़ाइन किया गया और उन्हें सीएसएस चर के साथ पुनर्निर्माण किया गया।
-
तोड़नानेस्टेड टेबल अब शैलियों को इनहेरिट नहीं करते हैं।
-
तोड़ना
.thead-light
और भिन्न वर्गों.thead-dark
के पक्ष में छोड़ दिए जाते हैं जिनका उपयोग सभी तालिका तत्वों ( , , , , और ) के लिए किया जा सकता है।.table-*
thead
tbody
tfoot
tr
th
td
-
तोड़नामिश्रण का
table-row-variant()
नाम बदलकरtable-variant()
केवल 2 पैरामीटर स्वीकार किया जाता है:$color
(रंग का नाम) और$value
(रंग कोड)। टेबल फ़ैक्टर वेरिएबल के आधार पर बॉर्डर रंग और एक्सेंट रंगों की स्वचालित रूप से गणना की जाती है। -
-y
तालिका सेल पैडिंग चर को और में विभाजित करें-x
। -
तोड़ना
.pre-scrollable
कक्षा गिरा दी । देखें #29135 -
तोड़ना
.text-*
यूटिलिटीज अब लिंक में होवर और फोकस स्टेट्स नहीं जोड़ती हैं।.link-*
इसके बजाय सहायक वर्गों का उपयोग किया जा सकता है। देखें #29267 -
तोड़ना
.text-justify
कक्षा गिरा दी । देखें #29793 -
डिफ़ॉल्ट क्षैतिज
padding-left
चालू<ul>
और<ol>
ब्राउज़र से तत्वों को डिफ़ॉल्ट पर रीसेट40px
करें2rem
। -
जोड़ा गया
$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-image
a के बजाय (एम्बेडेड SVG) का उपयोग करते हैं, जिससे आपके मार्कअप को छूने की आवश्यकता के बिना आसान अनुकूलन की अनुमति मिलती है।×
-
जोड़ा गया नया
.btn-close-white
संस्करण जोfilter: invert(1)
गहरे रंग की पृष्ठभूमि के खिलाफ उच्च कंट्रास्ट ख़ारिज आइकन को सक्षम करने के लिए उपयोग करता है।
गिर जाना
- अकॉर्डियन के लिए हटाई गई स्क्रॉल एंकरिंग।
नीचे की ओर फैलने वाला बिंदु
-
.dropdown-menu-dark
ऑन-डिमांड डार्क ड्रॉपडाउन के लिए नए वेरिएंट और संबद्ध वैरिएबल जोड़े गए। -
के लिए नया चर जोड़ा गया
$dropdown-padding-x
। -
बेहतर कंट्रास्ट के लिए ड्रॉपडाउन डिवाइडर को गहरा किया।
-
तोड़नाड्रॉपडाउन के लिए सभी ईवेंट अब ड्रॉपडाउन टॉगल बटन पर ट्रिगर हो जाते हैं और फिर मूल तत्व तक बबल हो जाते हैं।
-
ड्रॉपडाउन मेनू में अब एक
data-bs-popper="static"
विशेषता सेट होती है जब ड्रॉपडाउन की स्थिति स्थिर होती है औरdata-bs-popper="none"
जब ड्रॉपडाउन नेवबार में होता है। यह हमारी जावास्क्रिप्ट द्वारा जोड़ा गया है और पॉपर की स्थिति में हस्तक्षेप किए बिना कस्टम स्थिति शैलियों का उपयोग करने में हमारी सहायता करता है। -
तोड़ना
flip
देशी पॉपर कॉन्फ़िगरेशन के पक्ष में ड्रॉपडाउन प्लगइन के लिए छोड़ा गया विकल्प । अब आप फ्लिप संशोधकfallbackPlacements
में विकल्प के लिए एक खाली सरणी पास करके फ़्लिपिंग व्यवहार को अक्षम कर सकते हैं । -
ड्रॉपडाउन मेनू अब ऑटो क्लोज व्यवहार
autoClose
को संभालने के लिए एक नए विकल्प के साथ क्लिक करने योग्य हो सकता है । आप इस विकल्प का उपयोग ड्रॉपडाउन मेनू के अंदर या बाहर क्लिक को सहभागी बनाने के लिए स्वीकार करने के लिए कर सकते हैं। -
ड्रॉपडाउन अब
.dropdown-item
s में लिपटे s का समर्थन करते हैं<li>
।
jumbotron
- तोड़नाजंबोट्रॉन घटक को गिरा दिया क्योंकि इसे उपयोगिताओं के साथ दोहराया जा सकता है। डेमो के लिए हमारा नया जंबोट्रॉन उदाहरण देखें।
सूची समूह
- सूची समूहों में नया
.list-group-numbered
संशोधक जोड़ा गया ।
नव और टैब
- , , , और कक्षा के लिए नए
null
चर जोड़े गए ।font-size
font-weight
color
: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>
-
, , , और के लिए नई स्थिति उपयोगिताओं को जोड़ा । मानों में शामिल हैं , , और प्रत्येक संपत्ति के लिए।
top
right
bottom
left
0
50%
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-ratios
Sass मानचित्र का नाम बदलकर वर्ग$aspect-ratios
नाम और प्रतिशत कोkey: value
युग्म के रूप में शामिल करने के लिए इसके मूल्यों को सरल बना दिया गया है।- सीएसएस चर अब उत्पन्न होते हैं और Sass मानचित्र में प्रत्येक मान के लिए शामिल किए जाते हैं। कोई भी कस्टम पक्षानुपात बनाने
--bs-aspect-ratio
के लिए चर को संशोधित करें ..ratio
- पहलू अनुपात में बदलने
-
तोड़ना "स्क्रीन रीडर" कक्षाएं अब "दृष्टि से छिपी हुई" कक्षाएं हैं ।
- Sass फ़ाइल को से बदल
scss/helpers/_screenreaders.scss
दियाscss/helpers/_visually-hidden.scss
- नाम बदला
.sr-only
और.sr-only-focusable
करने के लिए.visually-hidden
and.visually-hidden-focusable
- नाम बदला
sr-only()
औरsr-only-focusable()
मिश्रण कियाvisually-hidden()
औरvisually-hidden-focusable()
.
- Sass फ़ाइल को से बदल
-
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()
।