v5 च माइग्रेट करना
v4 थमां v5 च माइग्रेट करने च मदद करने आस्तै बूटस्ट्रैप स्रोत फाइलें, दस्तावेजें, ते घटकें च बदलावें गी ट्रैक करो ते समीक्षा करो.
निर्भरताएं
- जे क्वेरी छोड़ दी।
- पॉपर v1.x थमां पॉपर v2.x च अपग्रेड कीता गेआ।
- Libsass गी Dart Sass कन्नै बदली दित्ता कीजे साढ़े Sass कंपाइलर दित्ते गेदे Libsass गी डिप्रीकेट कीता गेआ हा।
- साढ़े दस्तावेज बनाने आस्तै जेकिल थमां ह्यूगो च माइग्रेट कीता गेआ
ब्राउज़र दा समर्थन करना
- इंटरनेट एक्सप्लोरर 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)
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()
-
तोड़नासस्स दे अपने रंग स्केलिंग फंक्शन कन्नै टक्कर थमां बचने आस्तै
scale-color()
फंक्शन दा नांऽ बदली दित्ता गेआ ऐ।shift-color()
-
box-shadow
mixins हून मूल्यें दी अनुमति दिंदे न ते मते सारे तर्कें थमांnull
ड्रॉप . दिक्खो # 30394 .none
-
मिक्सिन च
border-radius()
हुन इक डिफ़ॉल्ट वैल्यू ऐ।
रंग प्रणाली
-
रंग प्रणाली जेह् ड़ी इक नमीं रंग प्रणाली दे पक्ष च कम्म करदी ही
color-level()
ते हटाई दित्ती गेई ही। साढ़े कोडबेस च$theme-color-interval
सारेlighten()
ते फंक्शनें गी ते . एह् फंक्शनें कन्नै रंग गी इक निश्चित मात्रा च बदलने दे बजाय सफेद जां काले रंग कन्नै मिलान होग। द इक रंग गी या तां टिंट करग जां छाया करग इस गल्लै पर निर्भर करदा ऐ जे इसदा वजन पैरामीटर सकारात्मक ऐ जां नकारात्मक ऐ। होर मती जानकारी आस्तै दिक्खो #30622 ।darken()
tint-color()
shade-color()
shift-color()
-
हर रंग आस्तै नमें टिंट ते शेड्स जोड़े गे, हर आधार रंग आस्तै नौ बक्ख-बक्ख रंग उपलब्ध करोआंदे होई, नमें सस चर दे रूप च।
-
रंग विपरीतता च सुधार कीता गेआ। WCAG 2.1 एए कंट्रास्ट गी सुनिश्चित करने आस्तै 3:1 थमां 4.5: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 ते फ्लेक्स उपयोगिताएं दा पृष्ठ दिक्खो . -
तोड़ना
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
एस लेई व्यक्तिगत चर गी बी हटाई दित्ता । -
दो नमें
.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
. -
जोड़ेआ गेआ
$enable-smooth-scroll
, जेह् ड़ा वैश्विक रूप कन्नै लागू होंदा ऐ— मीडिया क्वेरीscroll-behavior: smooth
दे राहें घट्ट गति आह् ले बरतूनी गी छोड़ियै । दिक्खो # 31877prefers-reduced-motion
आर टी एल
- क्षैतिज दिशा विशिष्ट चर, उपयोगिताएं, ते मिक्सिन सारें दा नांऽ बदली दित्ता गेआ ऐ तां जे फ्लेक्सबॉक्स लेआउटें च पाए जाने आह् ले जनेह् तार्किक गुणें दा इस्तेमाल कीता जाई सकै-जियां,
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
no longer setsdisplay
, तुसेंगी सिर्फ एचटीएमएल तत्व गी बदलने कन्नै इनलाइन जां ब्लॉक मदद पाठ बनाने दी इजाजत दिंदा ऐ जिऱयां तुस चांह् दे ओ. -
<select>
सत्यापन चिह् न गी s कन्नै लागू नेईं कीता जंदा ऐmultiple
. -
scss/forms/
इनपुट समूह शैलियां समेत , दे अंतर्गत स्रोत Sass फाइलें गी पुनर्व्यवस्थित कीता गेआ ।
घटक ऐ
- साढ़े चर
padding
पर आधारत होने आस्तै अलर्ट, ब्रेडक्रंब, कार्ड, ड्रॉपडाउन, सूची समूह, मोडल, पोपोवर, ते टूलटिप्स आस्तै इकीकृत मूल्य। दिक्खो # 30564 .$spacer
अकॉर्डियन
- नया अकॉर्डियन घटक जोड़ा गया .
अलर्ट करदा ऐ
-
अलर्टें च हून आइकनें कन्नै उदाहरण न .
-
<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>
इसगी. दिक्खो # 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
इक दी बजाय इक (एम्बेडेड 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
एस च लपेटे दा समर्थन करदा<li>
ऐ।
जम्बोट्रॉन ने दी
- तोड़नाजंबोट्रॉन घटक गी छोड़ी दित्ता कीजे इसदी नकल उपयोगिताएं कन्नै कीती जाई सकदी ऐ। डेमो लेई साढ़ा नमां जंबोट्रॉन उदाहरण दिक्खो।
समूह दी सूची
- सूची समूहें च नमां
.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
.
- नाम बदली दित्ता
-
तोड़नाडिफाल्ट रूप कन्नै नकारात्मक मार्जिन गी अक्षम कीता गेआ ऐ।
-
'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, बड्डे थमां छोटे) दे समान पैमाने दा उपयोग करदे न, ते सैस मैप दे राहें संशोधित कीते जाई सकदे न। -
तोड़नासंक्षिप्तता ते स्थिरता आस्तै
.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 > *
। कोई होर क्लास दी लोड़ नेईं ऐ, ते अनुपात हेल्पर हून कुसै बी HTML तत्व कन्नै कम्म करदा ऐ. $embed-responsive-aspect-ratios
सस्स नक्शे दा नांऽ बदली दित्ता गेआ ऐ ते$aspect-ratios
इसदे मूल्यें गी सरल बनाया गेआ ऐ तां जे वर्ग दा नांऽ ते प्रतिशत गीkey: value
जोड़ी दे रूप च शामल कीता जाई सकै।- CSS चर हून पैदा कीते गेदे न ते सस्स नक्शे च हर इक मूल्य आस्तै शामल कीते गेदे न। कोई बी कस्टम पहलू अनुपात बनाने लेई
--bs-aspect-ratio
पर चर गी संशोधित करो ..ratio
- कक्षाएं दा नांऽ बदली दित्ता गेआ ऐ तां जे आस्पेक्ट रेशियो च बदलाव
-
तोड़ना “स्क्रीन रीडर” कक्षाएं हून “दृश्य रूप कन्नै छिपी दी” कक्षाएं न .
- Sass फाइल गी
scss/helpers/_screenreaders.scss
to थमां बदली दित्ता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()
.
- Sass फाइल गी
-
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
can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. Applies to dropdowns, popovers, and tooltips. -
The default value for the
fallbackPlacements
is changed to['top', 'right', 'bottom', 'left']
for better placement of Popper elements. Applies to dropdowns, popovers, and tooltips. -
Removed underscore from public static methods like
_getInstance()
→getInstance()
.