v5 मे माइग्रेट भ रहल अछि
बूटस्ट्रैप स्रोत फाइल, दस्तावेज, आओर घटक मे बदलाव कें ट्रैक करू आओर समीक्षा करू जे अहां कें v4 सं v5 मे माइग्रेट करय मे मदद करतय.
निर्भरताएँ
- jQuery छोड़ि देल गेल।
- Popper v1.x सँ Popper v2.x मे अपग्रेड कएल गेल अछि.
- Libsass के स्थान पर Dart Sass के रूप में हमर Sass कंपाइलर देल गेल Libsass deprecated छल.
- हमर दस्तावेज बनेबाक लेल जेकिल सँ ह्यूगो मे माइग्रेट कएल गेल
ब्राउज़र समर्थन
- इंटरनेट एक्सप्लोरर 10 आ 11 छोड़ि देल गेल
- छोड़ल गेल माइक्रोसॉफ्ट एज < 16 (लेगेसी एज)
- फायरफॉक्स < 60 छोड़ि देल गेल
- गिरा सफारी < 12
- आईओएस सफारी < 12 छोड़ि देल गेल
- गिरा देल गेल क्रोम < 60
दस्तावेजीकरण बदलैत अछि
- होमपेज, डॉक्स लेआउट, आ पाद लेख पुनर्निर्मित कएल गेल।
- नव पार्सल गाइड जोड़ा गेल .
- नया अनुकूलित अनुभाग जोड़ा गेल , v4 क थीमिंग पृष्ठ क बदलैत , Sass, वैश्विक विन्यास विकल्प, रंग योजना, CSS चर, आओर बहुत किछु पर नव विवरण क संग.
- सब फॉर्म दस्तावेजीकरण क॑ नया फॉर्म खंड म॑ पुनर्गठित करलकै , सामग्री क॑ अधिक केंद्रित पन्ना म॑ तोड़ी क॑ ।
- तहिना, लेआउट खंड अपडेट कएल गेल , ग्रिड सामग्री केँ बेसी स्पष्ट रूप सँ मांस बनाबय लेल.
- “Navs” घटक पृष्ठ के नाम बदलकर “Navs & Tabs” रखा गया |
- “Checks” पृष्ठ के नाम बदलकर “Checks & radios” रखा गया |
- नवबार क॑ नया रूप देलऽ गेलै आरू नया सबनव जोड़लऽ गेलै ताकि हमरऽ साइट आरू डॉक्स संस्करणऽ प॑ घूमना आसान होय सक॑ ।
- खोज क्षेत्र क लेल नव कीबोर्ड शॉर्टकट जोड़ल गेल: Ctrl + /.
सस्स
-
हम डिफ़ॉल्ट Sass मैप मर्ज के खाई में डालने छी ताकि फालतू मान हटाबय में आसानी भ सकय. ध्यान राखू आब अहाँ के सास मैप में सब मान परिभाषित करय पड़त जेना
$theme-colors
. Sass नक्शा सं कोना निपटल जाय से देखू . -
तोड़ते हुए
color-yiq()
फंक्शन आरू संबंधित चर क॑ बदललऽ गेलऽ छैcolor-contrast()
जैसनऽ कि ई अब॑ YIQ कलरस्पेस स॑ संबंधित नै छै । देखू # 30168।$yiq-contrasted-threshold
नाम बदलि कए$min-contrast-ratio
.$yiq-text-dark
आ$yiq-text-light
क्रमशः नाम बदलि कए$color-contrast-dark
आ$color-contrast-light
.
-
तोड़ते हुएमीडिया क्वेरी मिक्सिन पैरामीटर एकटा बेसी तार्किक दृष्टिकोण कें लेल बदलल गेल छै.
media-breakpoint-down()
अगिला ब्रेकपॉइंट क बजाय स्वयं ब्रेकपॉइंट क उपयोग करैत अछि (जैना, लक्ष्य दृश्यपोर्टmedia-breakpoint-down(lg)
क बजाय ) स छोट अछि ) ।media-breakpoint-down(md)
lg
- तहिना, दोसर पैरामीटर मे
media-breakpoint-between()
सेहो अगिला ब्रेकपॉइंट क बजाय स्वयं ब्रेकपॉइंट क उपयोग करैत अछि (जैना, आओर क बीच लक्ष्य व्यूपोर्टmedia-between(sm, lg)
क बजाय ) ।media-breakpoint-between(sm, md)
sm
lg
-
तोड़ते हुएप्रिंट शैली आ
$enable-print-styles
चर हटा देल गेल। प्रिंट डिस्प्ले क्लास एखनो अछि। देखू # 28339 . -
तोड़ते हुएचर के पक्ष में
color()
,theme-color()
, और फंक्शन छोड़ दिया | देखू # 29083 .gray()
-
तोड़ते हुएफंक्शन
theme-color-level()
के नाम बदलल गेल अछिcolor-level()
आओर आब केवल रंग के बजाय अहां के चाहय वाला कोनो रंग के स्वीकार करैत$theme-color
अछि. देखू #29083 देखू:color-level()
बाद मे छोड़ि देल गेल छलv5.0.0-alpha3
. -
तोड़ते हुएनाम बदलल गेल
$enable-prefers-reduced-motion-media-query
आ संक्षिप्तताक$enable-pointer-cursor-for-buttons
लेल$enable-reduced-motion
आ लेल।$enable-button-pointers
-
तोड़ते हुएमिक्सिन निकालि देल गेल
bg-gradient-variant()
।.bg-gradient
जेनरेट करलऽ गेलऽ क्लास के बजाय तत्वऽ म॑ ढाल जोड़ै लेली क्लास के प्रयोग करलऽ जाय.bg-gradient-*
। -
तोड़ते हुए पहिने अप्रचलित मिक्सिन हटा देल गेल:
hover
,hover-focus
,plain-hover-focus
, आhover-focus-active
float()
form-control-mixin()
nav-divider()
retina-img()
text-hide()
(संबद्ध उपयोगिता वर्ग सेहो छोड़ि देल गेल,.text-hide
)visibility()
form-control-focus()
-
तोड़ते हुएSass केरऽ अपनऽ रंग स्केलिंग फंक्शन स॑ टक्कर स॑ बचै लेली
scale-color()
फंक्शन क॑ बदललऽ गेलऽ छै ।shift-color()
-
box-shadow
mixins आब मान आओर कईटा तर्क सnull
ड्रॉप क अनुमति दैत अछि. देखू # 30394 .none
-
आब
border-radius()
मिक्सिन क' डिफ़ॉल्ट मान अछि.
रंग प्रणाली
-
रंग प्रणाली जे नव रंग प्रणालीक पक्ष मे काज केलक
color-level()
आ हटा देल गेल ।$theme-color-interval
हमर कोडबेस मे सबlighten()
आओरdarken()
फंक्शन के जगहtint-color()
आओरshade-color()
. ई फंक्शन सब रंग के एकटा निश्चित मात्रा में ओकर हल्कापन बदलै के बजाय या त उज्जर या कारी रंग के साथ मिला देत । कोनों रंग केंshift-color()
या त टिंट या छाया देतय जे ओकर वजन पैरामीटर सकारात्मक छै या नकारात्मक छै. अधिक जानकारी के लेल #30622 देखू । -
हर रंग के लेलऽ नया टिंट आरू शेड्स जोड़लऽ गेलऽ छै, जेकरा स॑ हर बेस रंग के लेलऽ नौ अलग-अलग रंग उपलब्ध कराय देलऽ गेलऽ छै, नया सस चर के रूप म॑ ।
-
रंग विपरीतता में सुधार। 3:1 स॑ 4.5:1 तलक बम्प करलऽ गेलऽ रंग कंट्रास्ट रेशियो आरू अपडेट करलऽ गेलऽ नीले, हरे, सियान, आरू गुलाबी रंग क॑ डब्ल्यूसीएजी 2.1 एए कंट्रास्ट सुनिश्चित करलऽ गेलऽ छै । संगहि हमर रंग विपरीत रंग स बदलि
$gray-900
कए$black
. -
अपनऽ रंग प्रणाली क॑ सपोर्ट करै लेली, हम्मं॑ अपनऽ रंग क॑ उचित ढंग स॑ मिलाबै लेली नया कस्टम
tint-color()
आरू फंक्शन जोड़ल॑ छै ।shade-color()
ग्रिड अपडेट
-
नव ब्रेकपॉइंट ! के लेल आ ऊपर नव
xxl
ब्रेकपॉइंट जोड़ल गेल।1400px
अन्य सब ब्रेकपॉइंट मे कोनो बदलाव नहि। -
बेहतर गटर। गटर आब rems मे सेट कएल गेल अछि, आ v4 (
1.5rem
, वा लगभग24px
, सँ नीचाँ30px
) सँ संकीर्ण अछि । एहि सं हमर ग्रिड सिस्टम के गटर के हमर स्पेसिंग यूटिलिटीज सं संरेखित कएल गेल अछि.- क्षैतिज/ऊर्ध्वाधर गटर, क्षैतिज गटर, आ ऊर्ध्वाधर गटर कें नियंत्रित करय कें लेल नव गटर वर्ग (
.g-*
,.gx-*
, आ ) जोडल गेलय..gy-*
- तोड़ते हुएनव गटर उपयोगिताक मिलान
.no-gutters
करबाक लेल नाम बदलल गेल।.g-0
- क्षैतिज/ऊर्ध्वाधर गटर, क्षैतिज गटर, आ ऊर्ध्वाधर गटर कें नियंत्रित करय कें लेल नव गटर वर्ग (
-
स्तंभ आब लागू नहि भेल अछि , तेँ अहाँकेँ ओहि व्यवहारकेँ पुनर्स्थापित करबाक लेल किछु तत्वमे
position: relative
जोड़ए पड़ि सकैत अछि ।.position-relative
-
तोड़ते हुएकतेको
.order-*
क्लास छोड़ि देलनि जे प्रायः अप्रयुक्त भ' जाइत छल. हम आब केवल आउट ऑफ द बॉक्स के व्यवस्था.order-1
करैत छी।.order-5
-
तोड़ते हुएघटक कें छोड़ देल
.media
गेलय कियाकि एकर उपयोगिताक कें साथ आसानी सं प्रतिकृति कैल जा सकय छै. एकटा उदाहरण क लेल #28265 आओर flex utilities पृष्ठ देखू . -
तोड़ते हुए
bootstrap-grid.css
आब केवलbox-sizing: border-box
ग्लोबल बॉक्स-साइजिंग रीसेट करबाक बजाय कॉलम पर लागू होइत अछि. एहि तरहें हमर ग्रिड स्टाइल के उपयोग बेसी ठाम बिना कोनो हस्तक्षेप के कएल जा सकैत अछि. -
$enable-grid-classes
आब कंटेनर वर्गक जनरेशन केँ अक्षम नहि करैत अछि. देखू # 29146। -
make-col
मिक्सिन क' बिना कोनो निर्दिष्ट आकार क' बराबर कॉलम पर डिफ़ॉल्ट रूप सँ अपडेट कएल गेल .
सामग्री, रिबूट आदि
-
आरएफएस आब डिफ़ॉल्ट रूप सँ सक्षम अछि. मिक्सिन कें उपयोग करय वाला
font-size()
हेडिंग स्वचालित रूपfont-size
सं व्यूपोर्ट कें साथ अपनौ टू स्केल समायोजित करतय. ई सुविधा पहिने v4 क संग ऑप्ट-इन छल । -
तोड़ते हुए
$display-*
हमरऽ चर क॑ बदलै लेली आरू एक$display-font-sizes
सस मैप स॑ हमरऽ डिस्प्ले टाइपोग्राफी क॑ ओवरहाल करलकै ।$display-*-weight
एकल के लेल व्यक्तिगत चर के सेहो हटा देल गेल$display-font-weight
आ समायोजितfont-size
s. -
दू टा नव
.display-*
हेडिंग आकार जोड़ल गेल,.display-5
आ.display-6
. -
लिंक डिफ़ॉल्ट रूप सँ रेखांकित कएल गेल अछि (केवल होवर पर नहि), जखन तक कि ओ विशिष्ट घटकक हिस्सा नहि हो.
-
अपनऽ शैली क॑ ताज़ा करै लेली आरू स्टाइलिंग प॑ अधिक नियंत्रण लेली CSS चर के साथ ओकरा पुनर्निर्माण करै लेली पुनः डिजाइन करलऽ गेलऽ टेबल ।
-
तोड़ते हुएनेस्टेड टेबल आब शैली विरासत मे नहि लैत अछि.
-
तोड़ते हुए
.thead-light
आरू वेरिएंट क्लास.thead-dark
के पक्ष म ं॑ छोड़लऽ गेलऽ छै.table-*
जेकरऽ उपयोग सब तालिका तत्व (thead
,tbody
,tfoot
,tr
,th
आरूtd
) के लेलऽ करलऽ जाब॑ सकै छै । -
तोड़ते हुए
table-row-variant()
मिक्सिन क॑ बदललऽ गेलऽ छै आरूtable-variant()
केवल 2 पैरामीटर क॑ स्वीकार करै छै:$color
(रंग नाम) आरू$value
(रंग कोड) । सीमा रंग आरू उच्चारण रंग के गणना स्वचालित रूप स॑ तालिका कारक चर के आधार प॑ करलऽ जाय छै । -
तालिका सेल पैडिंग चर मे विभाजित करू
-y
आ-x
. -
तोड़ते हुएकक्षा छोड़ि देलनि
.pre-scrollable
। देखू # 29135 -
तोड़ते हुए
.text-*
उपयोगिता आब लिंक मे होवर आ फोकस स्टेट नहि जोड़ैत अछि..link-*
एकर बदला मे हेल्पर क्लास कें उपयोग कैल जा सकय छै. देखू # 29267 -
तोड़ते हुएकक्षा छोड़ि देलनि
.text-justify
। देखू # 29793 -
डिफ़ॉल्ट क्षैतिज
padding-left
चालू<ul>
आओर<ol>
तत्व ब्राउज़र डिफ़ॉल्ट सँ40px
रीसेट करू2rem
. -
Added
$enable-smooth-scroll
, जे वैश्विक रूप सं लागू होयतscroll-behavior: smooth
छै-सिवाय उपयोगकर्ताक कें जेprefers-reduced-motion
मीडिया क्वेरी कें माध्यम सं कम गति कें लेल कहय छै. देखू # 31877
आर टी एल
- क्षैतिज दिशा विशिष्ट चर, उपयोगिता, आरू मिक्सिन सब क॑ तार्किक गुणऽ के उपयोग करै लेली नाम बदली देलऽ गेलऽ छै जैसनऽ कि फ्लेक्सबॉक्स लेआउट म॑ मिलै छै-जैसे,
start
आरू आरू केend
बदला म॑ ।left
right
रूप
-
नव फ्लोटिंग फॉर्म जोड़ल गेल! हमनें फ्लोटिंग लेबल उदाहरण क॑ पूर्ण रूप स॑ समर्थित फॉर्म घटकऽ म॑ बढ़ावा देल॑ छै । नव फ्लोटिंग लेबल पृष्ठ देखू।
-
तोड़ते हुए समेकित देशी और कस्टम रूप तत्व। चेकबॉक्स, रेडियो, सिलेक्ट्स, आरू अन्य इनपुट जेकरा म॑ v4 म॑ नेटिव आरू कस्टम क्लास छेलै, क॑ समेकित करलऽ गेलऽ छै । आब हमरऽ लगभग सब फॉर्म एलिमेंट पूरा तरह स॑ कस्टम छै, अधिकांश कस्टम एचटीएमएल के जरूरत के बिना ।
.custom-check
अछि आब.form-check
..custom-check.custom-switch
अछि आब.form-check.form-switch
..custom-select
अछि आब.form-select
..custom-file
आ.form-file
ऊपर कस्टम स्टाइल के जगह ल लेल गेल अछि.form-control
..custom-range
अछि आब.form-range
.- छोड़ि देल गेल देशी
.form-control-file
आ.form-control-range
.
-
तोड़ते हुएगिरा देल
.input-group-append
गेल आ.input-group-prepend
. आब अहां बस बटन आओर.input-group-text
इनपुट ग्रुप के डायरेक्ट बच्चा के रूप मे जोड़ि सकय छी. -
सत्यापन प्रतिक्रिया बग कें साथ इनपुट समूह पर लंबा समय सं छूटल सीमा त्रिज्या कें
.has-validation
अंततः सत्यापन कें साथ इनपुट समूहक मे एकटा अतिरिक्त वर्ग जोड़ क ठीक कैल गेल छै . -
तोड़ते हुए हमर ग्रिड सिस्टम लेल फॉर्म-विशिष्ट लेआउट क्लास छोड़ि देल गेल।
.form-group
,.form-row
, या के जगह हमर ग्रिड आ उपयोगिता के प्रयोग करू.form-inline
. -
तोड़ते हुएफॉर्म लेबल के आब आवश्यकता
.form-label
अछि . -
तोड़ते हुए
.form-text
आब सेट नै करै छैdisplay
, जेकरा स॑ आपने क॑ खाली एचटीएमएल तत्व बदलै स॑ इनलाइन या ब्लॉक मदद पाठ बनाबै के अनुमति मिलै छै जेना कि आप चाहै छियै । -
मान्यता चिह्न आब
<select>
s क संग लागू नहि कएल जाएत अछिmultiple
. -
scss/forms/
, इनपुट समूह शैली सहित क अंतर्गत स्रोत Sass फाइल कए पुनर्व्यवस्थित कएल गेल अछि.
घटक
padding
अलर्ट, ब्रेडक्रंब, कार्ड, ड्रॉपडाउन, सूची समूह, मोडल, पोपोवर, आरू टूलटिप्स के लेलऽ एकीकृत मान हमरऽ$spacer
चर प॑ आधारित होतै । देखू # 30564 .
अकॉर्डियन
- नव अकॉर्डियन घटक जोड़ा गेल .
अलर्ट
-
आब अलर्ट मे आइकन वाला उदाहरण अछि .
-
<hr>
प्रत्येक अलर्ट मे s क लेल कस्टम शैली हटा देल गेल किएक त ओ पहिने स उपयोग करैतcurrentColor
अछि .
बैज
-
तोड़ते हुए
.badge-*
पृष्ठभूमि उपयोगिता क लेल सभ रंग वर्ग छोड़ि देल गेल (जैना, क.bg-primary
बदला मे उपयोग करू.badge-primary
). -
तोड़ते हुएछोड़ल
.badge-pill
गेल —एकर.rounded-pill
बदला मे उपयोगिता क प्रयोग करू। -
तोड़ते हुए
<a>
आ<button>
तत्वक लेल होवर आ फोकस शैली हटा देल गेल । -
/ सँ
.25em
/ धरि बैज क लेल डिफ़ॉल्ट पैडिंग बढ़ल अछि ..5em
.35em
.65em
रोटी के टुकड़े
-
padding
,background-color
, आओर हटा कए ब्रेडक्रंब क डिफ़ॉल्ट रूप कए सरल बनाउल गेलborder-radius
। -
--bs-breadcrumb-divider
बिना CSS के पुनः संकलित करय के जरूरत के आसान अनुकूलन के लेल नव CSS कस्टम गुण जोड़ल गेल .
बटन के
-
तोड़ते हुए टॉगल बटन , चेकबॉक्स या रेडियो के साथ, आब जावास्क्रिप्ट के आवश्यकता नै छै आरू नया मार्कअप छै. हमरा सभकेँ आब कोनो रैपिंग तत्वक आवश्यकता नहि अछि, , मे जोड़ू
.btn-check
,<input>
आ एकरा पर कोनो.btn
क्लासक<label>
. देखू # 30650 . एकरा लेली डॉक्स हमरऽ बटन पेज स॑ नया फॉर्म सेक्शन प॑ आबी गेलऽ छै । -
तोड़ते हुए उपयोगिता
.btn-block
के लिये छोड़ा गया।.btn-block
पर उपयोग करय के बजाय.btn
, अपन बटन के साथ लपेटू.d-grid
आओर जरूरत के हिसाब सं ओकरा स्पेस करय लेल एकटा.gap-*
उपयोगिता. ओकरा पर आओर बेसी नियंत्रण के लेल रिस्पांसिव क्लास पर स्विच करू. किछु उदाहरणक लेल डॉक्स पढ़ू। -
अतिरिक्त पैरामीटर समर्थन करबाक लेल हमर
button-variant()
आओर मिक्सिन अपडेट कएल गेल.button-outline-variant()
-
होवर आ सक्रिय अवस्थाक पर बढ़ल कंट्रास्ट सुनिश्चित करय कें लेल अपडेट बटन.
-
अक्षम बटन आब
pointer-events: none;
.
कार्ड
-
तोड़ते हुए
.card-deck
हमर ग्रिड के पक्ष में गिर गेल। अपन कार्ड कें कॉलम कक्षाक मे लपेटूं आ.row-cols-*
कार्ड डेक कें पुन: बनावा कें लेल एकटा पैरेंट कंटेनर जोड़ूं (मुदा उत्तरदायी संरेखण पर बेसि नियंत्रण कें साथ)। -
तोड़ते हुए
.card-columns
चिनाई के पक्ष में गिरा । देखू # 28922 . -
तोड़ते हुए
.card
आधारित अकॉर्डियन के एकटा नव अकॉर्डियन घटक स बदलि देल गेल .
हिंडोला
-
गहरे रंग के पाठ, नियंत्रण, आरू संकेतक के लेलऽ नया
.carousel-dark
रूप जोड़लऽ गेलऽ छै (हल्का पृष्ठभूमि के लेलऽ बढ़िया) । -
हिंडोला नियंत्रण क लेल शेवरॉन आइकन कए बूटस्ट्रैप आइकन स नव एसवीजी क संग बदलल गेल .
बटन बंद करू
-
तोड़ते हुएकम जेनेरिक नामक लेल नाम बदलल
.close
गेल ।.btn-close
-
बंद बटन आब एचटीएमएल म॑
background-image
एक के बजाय एक (एम्बेडेड एसवीजी) के उपयोग करै×
छै, जेकरा स॑ आपकऽ मार्कअप क॑ स्पर्श करै के जरूरत के बिना आसान अनुकूलन के अनुमति मिलै छै । -
नया
.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>
.
जम्बोट्रॉन
- तोड़ते हुएजम्बोट्रॉन घटक कए छोड़ि देल गेल किया कि एकर प्रतिकृति उपयोगिता क संग कैल जा सकैत अछि । डेमो के लेल हमर नव जंबोट्रॉन उदाहरण देखू।
सूची समूह
- सूची समूह मे नव
.list-group-numbered
संशोधक जोड़ल गेल.
नवस आ टैब
- , , , आओर क्लास मे नव
null
चर जोड़ा गेल.font-size
font-weight
color
:hover
color
.nav-link
नवबरस
- तोड़ते हुएनवबार कें लेल आब भीतर एकटा कंटेनर कें आवश्यकता होयत छै (स्पेसिंग आवश्यकताक कें कठोर रूप सं सरल बनावा कें लेल आ सीएसएस कें आवश्यकता छै).
ऑफकैनवास
- नव ऑफकैनवास घटक जोड़ल गेल .
पृष्ठांकन
-
पृष्ठांकन लिंकऽ म॑ अब॑ अनुकूलन योग्य
margin-left
छै जे एक दोसरा स॑ अलग करला प॑ सब कोना प॑ गतिशील रूप स॑ गोल होय जाय छै । -
transition
पृष्ठांकन लिंक मे s जोड़ा गेल ।
पोपोवर्स
-
तोड़ते हुएहमर डिफ़ॉल्ट पॉपओवर टेम्पलेट मे नाम बदलल
.arrow
गेल अछि ..popover-arrow
-
whiteList
विकल्प के नाम बदलल गेल अछिallowList
.
स्पिनर
-
स्पिनर आब
prefers-reduced-motion: reduce
एनीमेशन के धीमा क क सम्मान करैत छथि। देखू # 31882 . -
स्पिनर ऊर्ध्वाधर संरेखण में सुधार।
टोस्ट के लिये
-
टोस्ट कें आब पोजीशनिंग यूटिलिटीज कें मदद सं एकटा मे पोजीशन कैल जा सकय छै .
.toast-container
-
डिफ़ॉल्ट टोस्ट अवधि 5 सेकंड मे बदलि देल गेल.
-
टोस्ट स निकालल गेल
overflow: hidden
आ फंक्शन क संग उचितborder-radius
एस स बदलल गेलcalc()
।
टूलटिप्स
-
तोड़ते हुएहमर डिफ़ॉल्ट टूलटिप टेम्पलेट मे नाम बदलल
.arrow
गेल अछि ..tooltip-arrow
-
तोड़ते हुएकें लेल डिफ़ॉल्ट मान कें
fallbackPlacements
बदलल गेल['top', 'right', 'bottom', 'left']
छै पॉपर तत्वक कें बेहतर प्लेसमेंट कें लेल. -
तोड़ते हुए
whiteList
विकल्प के नाम बदलल गेल अछिallowList
.
उपयोगिताएँ
-
तोड़ते हुएआरटीएल समर्थन क जोड़ क संग दिशात्मक नाम क बजाय तार्किक गुण नाम क उपयोग करबाक लेल कईटा उपयोगिताक नाम बदलल गेल:
- नाम बदलल गेल
.left-*
आ.right-*
टू.start-*
आ.end-*
. - नाम बदलल गेल
.float-left
आ.float-right
टू.float-start
आ.float-end
. - नाम बदलल गेल
.border-left
आ.border-right
टू.border-start
आ.border-end
. - नाम बदलल गेल
.rounded-left
आ.rounded-right
टू.rounded-start
आ.rounded-end
. - नाम बदलल गेल
.ml-*
आ.mr-*
टू.ms-*
आ.me-*
. - नाम बदलल गेल
.pl-*
आ.pr-*
टू.ps-*
आ.pe-*
. - नाम बदलल गेल
.text-left
आ.text-right
टू.text-start
आ.text-end
.
- नाम बदलल गेल
-
तोड़ते हुएपूर्वनिर्धारित रूप सँ नकारात्मक मार्जिन अक्षम कएल गेल.
-
's पृष्ठभूमि क॑ अतिरिक्त तत्वऽ प॑
.bg-body
जल्दी स॑ सेट करै लेली नया वर्ग जोड़लऽ गेलऽ छै ।<body>
-
, , , आ . _ _ मान मे , , आओर प्रत्येक गुण क लेल शामिल अछि.
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-*
-
सीएसएस ग्रिड आ फ्लेक्सबॉक्स लेआउट कें लेल
.d-grid
उपयोगिता आ नवgap
उपयोगिता ( ) प्रदर्शित करय कें लेल जोडल गेलय छै..gap
-
तोड़ते हुएहटा देल गेल
.rounded-sm
आrounded-lg
, आ कक्षाक एकटा नव पैमाना शुरू कएल गेल.rounded-0
,.rounded-3
. देखू # 31687 . -
नव
line-height
उपयोगिता जोड़ल गेल:.lh-1
,.lh-sm
,.lh-base
आ.lh-lg
. देखू एतय . -
हमर सीएसएस मे उपयोगिता कए स्थानांतरित कए
.d-none
एकरा अन्य प्रदर्शन उपयोगिता क मुकाबले बेसी वजन देलहुं। -
सहायक कें विस्तारित करलकय
.visually-hidden-focusable
कंटेनर पर सेहो काज करय कें लेल, उपयोग करयत:focus-within
.
सहायक
-
तोड़ते हुए रिस्पांसिव एम्बेड हेल्पर क॑ नया क्लास नाम आरू बेहतर व्यवहार के साथ-साथ एक सहायक सीएसएस चर के साथ रेशियो हेल्पर के नाम बदली देलऽ गेलऽ छै ।
- कक्षाक नाम बदलि
by
कएx
आस्पेक्ट रेशियो मे बदलि देल गेल अछि । जेना,.ratio-16by9
आब अछि.ratio-16x9
. - हम
.embed-responsive-item
एकटा सरल चयनकर्ता क पक्ष मे आओर तत्व समूह चयनकर्ता कए छोड़ि देने छी.ratio > *
। आओर क्लास के जरूरत नै अछि, आओर रेशियो हेल्पर आब कोनो एचटीएमएल तत्व के संग काज करैत अछि. - सास नक्शा क॑
$embed-responsive-aspect-ratios
बदललऽ गेलऽ छै$aspect-ratios
आरू एकरऽ मान क॑ सरल बनालऽ गेलऽ छै ताकि वर्ग के नाम आरू प्रतिशत क॑key: value
जोड़ी के रूप म॑ शामिल करलऽ जाय सक॑ । - आब सीएसएस चर उत्पन्न कैल गेल छै आ सास मैप मे प्रत्येक मान कें लेल शामिल कैल गेल छै. कोनो कस्टम पहलू अनुपात बनेबाक लेल
--bs-aspect-ratio
पर चर संशोधित करू ..ratio
- कक्षाक नाम बदलि
-
तोड़ते हुए “स्क्रीन रीडर” कक्षा आब “दृश्य रूप स नुकायल” कक्षा भ गेल अछि .
- सस फाइलकेँसँ बदलि देल
scss/helpers/_screenreaders.scss
गेलscss/helpers/_visually-hidden.scss
- नामान्तरित
.sr-only
और.sr-only-focusable
को.visually-hidden
और.visually-hidden-focusable
sr-only()
नाम बदलि कए आ मिक्सिनsr-only-focusable()
कएvisually-hidden()
आvisually-hidden-focusable()
.
- सस फाइलकेँसँ बदलि देल
-
bootstrap-utilities.css
आब हमर सबहक सहायक सेहो शामिल अछि। आब कस्टम बिल्ड मे हेल्पर कें आयात करय कें जरूरत नहि छै.
जावास्क्रिप्ट
-
jQuery निर्भरता छोड़ि देल गेल आओर प्लगइन के नियमित जावास्क्रिप्ट मे होए के लेल फेर सं लिखल गेल.
-
तोड़ते हुएसब जावास्क्रिप्ट प्लगइन कें लेल डाटा विशेषताक कें आब नामस्थान कैल गेल छै, जे बूटस्ट्रैप कार्यक्षमता कें तृतीय पक्ष आ अहां कें अपन कोड सं अलग करय मे मदद करय छै. जेना,
data-bs-toggle
हमdata-toggle
. -
आब सभ प्लगइन पहिल तर्क क रूप मे एकटा CSS चयनकर्ता कए स्वीकार क सकैत अछि । प्लगइन कें एकटा नव इंस्टेंस बनावा कें लेल अहां या त कोनों DOM तत्व या कोनों वैध CSS चयनकर्ता कें पास कयर सकय छी:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
एकटा फंक्शन कें रूप मे पास कैल जा सकय छै जे बूटस्ट्रैप कें डिफ़ॉल्ट पॉपर कॉन्फ़िगरेशन कें एकटा तर्क कें रूप मे स्वीकार करयत छै, ताकि अहां इ डिफ़ॉल्ट कॉन्फ़िगरेशन कें अपन तरीका सं मर्ज करय सकय. ड्रॉपडाउन, पोपोवर, आओर टूलटिप्स पर लागू होइत अछि. -
कें लेल डिफ़ॉल्ट मान कें
fallbackPlacements
बदलल गेल['top', 'right', 'bottom', 'left']
छै पॉपर तत्वक कें बेहतर प्लेसमेंट कें लेल. ड्रॉपडाउन, पोपोवर, आओर टूलटिप्स पर लागू होइत अछि. -
सार्वजनिक स्थिर विधि सँ अंडरस्कोर हटा देल गेल जेना
_getInstance()
→getInstance()
.