मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
in English

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)smlg

  • तोड़नाप्रिंट शैलियां ते $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-shadowmixins हून मूल्यें दी अनुमति दिंदे न ते मते सारे तर्कें थमां 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-*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बदले च .leftright

रूप दे

  • नए फ्लोटिंग फार्म जोड़े गए ! अस फ्लोटिंग लेबल उदाहरण गी पूरी चाल्ली समर्थत फार्म घटकें च बढ़ावा दित्ता ऐ। नमां फ्लोटिंग लेबल पेज दिक्खो।

  • तोड़ना समेकित देशी ते कस्टम रूप तत्व। चेकबॉक्स, रेडियो, चयनित, ते होर इनपुटें गी इकट्ठा कीता गेआ ऐ जेह् ड़े 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-textno longer sets display, तुसेंगी सिर्फ एचटीएमएल तत्व गी बदलने कन्नै इनलाइन जां ब्लॉक मदद पाठ बनाने दी इजाजत दिंदा ऐ जिऱयां तुस चांह् दे ओ.

  • <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-dividerCSS गी दुबारा संकलित करने दी लोड़ दे बगैर आसान अनुकूलन आस्तै नमीं 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) दा इस्तेमाल करदे &times;न , जेह् ड़ा तुंदे मार्कअप गी छूने दी लोड़ दे बगैर बी आसान अनुकूलन दी अनुमति दिंदा ऐ .

  • नमां .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>ऐ।

जम्बोट्रॉन ने दी

समूह दी सूची

  • , , , ते क्लास च नमें nullचर जोड़े गे।font-sizefont-weightcolor: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>

  • , , , ते लेई नमीं स्थिति उपयोगिताएं गी जोड़ेआ गेआ । मूल्यें च , , ते हर इक संपत्ति आस्तै शामल न।toprightbottomleft050%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.scssto थमां बदली दित्ता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()।