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

v5 वर स्थलांतर करत आहे

बूटस्ट्रॅप स्त्रोत फाइल्स, दस्तऐवजीकरण आणि घटकांमधील बदलांचा मागोवा घ्या आणि पुनरावलोकन करा जेणेकरून तुम्हाला v4 वरून v5 वर स्थलांतरित करण्यात मदत होईल.

या पृष्ठावर

अवलंबित्व

  • jQuery टाकली.
  • Popper v1.x वरून Popper v2.x वर अपग्रेड केले.
  • लिबसासला डार्ट सासने बदलले कारण आमचे सास कंपाइलर लिबसास नापसंत केले गेले.
  • आमचे दस्तऐवज तयार करण्यासाठी जेकिलहून ह्यूगो येथे स्थलांतरित झाले

ब्राउझर समर्थन

  • इंटरनेट एक्सप्लोरर 10 आणि 11 सोडले
  • ड्रॉप्ड मायक्रोसॉफ्ट एज < 16 (लेगसी एज)
  • फायरफॉक्स <60 सोडला
  • सफारी < 12 सोडली
  • iOS सफारी < 12 सोडला
  • Chrome <60 सोडले

दस्तऐवजीकरण बदल

  • मुख्यपृष्ठ, डॉक्स लेआउट आणि तळटीप पुन्हा डिझाइन केले.
  • नवीन पार्सल मार्गदर्शक जोडले .
  • नवीन सानुकूलित विभाग जोडला , v4 चे थीमिंग पृष्ठ बदलून , Sass वर नवीन तपशील, जागतिक कॉन्फिगरेशन पर्याय, रंग योजना, CSS व्हेरिएबल्स आणि बरेच काही.
  • नवीन फॉर्म विभागात सर्व फॉर्म दस्तऐवजांची पुनर्रचना केली, सामग्रीला अधिक केंद्रित पृष्ठांमध्ये विभाजित केले.
  • त्याचप्रमाणे, ग्रिड सामग्री अधिक स्पष्टपणे बाहेर काढण्यासाठी लेआउट विभाग अद्यतनित केला .
  • "Navs" घटक पृष्ठाचे नाव बदलून "Navs आणि टॅब" केले.
  • "चेक्स" पृष्ठाचे नाव बदलून "चेक आणि रेडिओ" केले.
  • आमच्या साइट्स आणि दस्तऐवजांच्या आवृत्त्यांवर जाणे सोपे करण्यासाठी नॅव्हबार पुन्हा डिझाइन केले आणि नवीन सबनॅव्ह जोडले.
  • शोध फील्डसाठी नवीन कीबोर्ड शॉर्टकट जोडला: Ctrl + /.

सस

  • अनावश्यक मूल्ये काढून टाकणे सोपे करण्यासाठी आम्ही डीफॉल्ट Sass नकाशा विलीनीकरण सोडले आहे. लक्षात ठेवा की तुम्हाला आता Sass नकाशे मधील सर्व मूल्ये परिभाषित करावी लागतील $theme-colors. Sass नकाशे कसे हाताळायचे ते पहा .

  • ब्रेकिंगcolor-yiq()फंक्शन आणि संबंधित व्हेरिएबल्सचे नाव बदलले color-contrast()कारण ते यापुढे YIQ कलरस्पेसशी संबंधित नाही. #३०१६८ पहा.

    • $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व्हेरिएबल काढले. प्रिंट डिस्प्लेचे वर्ग अजूनही आहेत. #२८३३९ पहा .

  • ब्रेकिंगड्रॉप color(), theme-color(), आणि 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मिक्सन्स आता व्हॅल्यूला परवानगी देतात आणि एकाधिक वितर्कांमधून nullड्रॉप करतात. #३०३९४ पहा .none

  • मिक्सिनमध्ये border-radius()आता डीफॉल्ट मूल्य आहे.

रंग प्रणाली

  • नवीन रंग प्रणालीच्या बाजूने काम करणारी color-level()आणि $theme-color-intervalकाढून टाकलेली रंग प्रणाली. आमच्या कोडबेसमधील सर्व lighten()आणि फंक्शन्स आणि darken()ने बदलले आहेत . ही फंक्शन्स ठराविक प्रमाणात रंग बदलण्याऐवजी पांढऱ्या किंवा काळ्या रंगात मिसळतील. त्याचे वजन मापदंड सकारात्मक किंवा नकारात्मक आहे यावर अवलंबून रंग एकतर टिंट किंवा सावली करेल . अधिक माहितीसाठी #30622 पहा.tint-color()shade-color()shift-color()

  • प्रत्येक रंगासाठी नवीन टिंट्स आणि शेड्स जोडल्या, प्रत्येक बेस कलरसाठी नऊ वेगळे रंग प्रदान केले, नवीन Sass व्हेरिएबल्स म्हणून.

  • सुधारित रंग कॉन्ट्रास्ट. 3:1 ते 4.5:1 पर्यंत कलर कॉन्ट्रास्ट रेशो आणि WCAG 2.1 AA कॉन्ट्रास्ट सुनिश्चित करण्यासाठी निळे, हिरवे, निळसर आणि गुलाबी रंग अपडेट केले. तसेच आमचा कलर कॉन्ट्रास्ट कलर वरून $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यापुढे कंटेनर वर्गांची निर्मिती अक्षम करत नाही. #२९१४६ पहा.

  • make-colनिर्दिष्ट आकाराशिवाय समान स्तंभांमध्ये मिक्सिनला डीफॉल्टवर अद्यतनित केले .

सामग्री, रीबूट इ

  • RFS आता डीफॉल्टनुसार सक्षम आहे. मिक्सिन वापरूनव्ह्यूपोर्टसह त्यांचे स्केलfont-size()आपोआप समायोजित करतीलहे वैशिष्ट्य पूर्वी v4 सह निवडले होते.font-size

  • ब्रेकिंग$display-*आमचे व्हेरिएबल्स बदलण्यासाठी आणि $display-font-sizesSass नकाशासह आमच्या डिस्प्ले टायपोग्राफीची दुरुस्ती केली. एकल आणि समायोजित s $display-*-weightसाठी वैयक्तिक व्हेरिएबल्स देखील काढले .$display-font-weightfont-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. #२९१३५ पहा

  • ब्रेकिंग .text-*युटिलिटी यापुढे लिंक्सवर होव्हर आणि फोकस स्टेट जोडत नाहीत. .link-*त्याऐवजी मदतनीस वर्ग वापरले जाऊ शकतात. #२९२६७ पहा

  • ब्रेकिंगक्लास सोडला .text-justify. #२९७९३ पहा

  • ब्रेकिंग <hr>घटक आता गुणधर्माला चांगले समर्थन heightदेण्याऐवजी वापरतात. हे दाट दुभाजक (उदा., ) तयार करण्यासाठी पॅडिंग युटिलिटीचा वापर करण्यास देखील सक्षम करते .bordersize<hr class="py-1">

  • डीफॉल्ट क्षैतिज padding-leftचालू <ul>आणि ब्राउझर डीफॉल्ट वरून <ol>घटकांवर रीसेट करा .40px2rem

  • जोडले $enable-smooth-scroll, जे जागतिक स्तरावर लागू होते — मीडिया क्वेरीद्वारे scroll-behavior: smoothकमी गतीसाठी विचारणाऱ्या वापरकर्त्यांशिवाय . #३१८७७ पहाprefers-reduced-motion

RTL

  • क्षैतिज दिशा विशिष्ट व्हेरिएबल्स, युटिलिटीज आणि मिक्सिन्स या सर्वांचे नाव फ्लेक्सबॉक्स लेआउट्समध्ये आढळणारे तार्किक गुणधर्म वापरण्यासाठी पुनर्नामित करण्यात आले आहे—उदा. startआणि आणि च्या endबदल्यात .leftright

फॉर्म

  • नवीन फ्लोटिंग फॉर्म जोडले! आम्ही फ्लोटिंग लेबल्सच्या उदाहरणाला पूर्णपणे समर्थित फॉर्म घटकांसाठी प्रोत्साहन दिले आहे. नवीन फ्लोटिंग लेबल्स पृष्ठ पहा.

  • ब्रेकिंग एकत्रित मूळ आणि सानुकूल फॉर्म घटक. चेकबॉक्सेस, रेडिओ, सिलेक्ट्स आणि 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/इनपुट गट शैलींसह, अंतर्गत स्रोत सास फाइल्सची पुनर्रचना .

घटक

  • आमच्या व्हेरिएबलवर paddingआधारित अलर्ट, ब्रेडक्रंब, कार्ड, ड्रॉपडाउन, सूची गट, मॉडेल्स, पॉपओव्हर्स आणि टूलटिपसाठी एकत्रित मूल्ये . #३०५६४ पहा .$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-dividerCSS पुन्हा संकलित न करता सुलभ सानुकूलनासाठी नवीन CSS सानुकूल मालमत्ता जोडली .

बटणे

  • ब्रेकिंग टॉगल बटणे , चेकबॉक्सेस किंवा रेडिओसह, यापुढे JavaScript आणि नवीन मार्कअपची आवश्यकता नाही. आम्हाला यापुढे रॅपिंग एलिमेंटची आवश्यकता नाही, मध्ये जोडा.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बांधकामाच्या बाजूने सोडले. #२८९२२ पहा .

  • ब्रेकिंग.cardआधारित एकॉर्डियनला नवीन एकॉर्डियन घटकाने बदलले .

  • गडद मजकूर, नियंत्रणे आणि निर्देशकांसाठी नवीन .carousel-darkप्रकार जोडला (फिकट पार्श्वभूमीसाठी उत्तम).

  • बूटस्ट्रॅप चिन्हांवरील नवीन SVG सह कॅरोसेल नियंत्रणासाठी शेवरॉन चिन्ह बदलले .

बटण बंद करा

  • ब्रेकिंगकमी सामान्य नावासाठी पुनर्नामित .closeकेले ..btn-close

  • बंद करा बटणे आता HTML मध्ये background-imagea ऐवजी (एम्बेडेड SVG) वापरतात &times;, जे तुमच्या मार्कअपला स्पर्श न करता सुलभ सानुकूलनास अनुमती देतात.

  • गडद पार्श्वभूमीवर उच्च कॉन्ट्रास्ट डिसमिस आयकॉन सक्षम करण्यासाठी .btn-close-whiteवापरणारे नवीन प्रकार जोडले .filter: invert(1)

संकुचित करा

  • accordions साठी स्क्रोल अँकरिंग काढले.

  • ऑन-डिमांड गडद ड्रॉपडाउनसाठी नवीन .dropdown-menu-darkप्रकार आणि संबंधित व्हेरिएबल्स जोडले.

  • साठी नवीन व्हेरिएबल जोडले $dropdown-padding-x.

  • सुधारित कॉन्ट्रास्टसाठी ड्रॉपडाउन डिव्हायडर गडद केले.

  • ब्रेकिंगड्रॉपडाउनसाठी सर्व इव्हेंट्स आता ड्रॉपडाउन टॉगल बटणावर ट्रिगर केले जातात आणि नंतर मूळ घटकापर्यंत बबल केले जातात.

  • ड्रॉपडाउन मेनूमध्ये आता एक data-bs-popper="static"विशेषता सेट आहे जेव्हा ड्रॉपडाउनची स्थिती स्थिर असते आणि data-bs-popper="none"जेव्हा ड्रॉपडाउन नॅव्हबारमध्ये असते. हे आमच्या JavaScript द्वारे जोडले गेले आहे आणि आम्हाला पॉपरच्या स्थितीत हस्तक्षेप न करता सानुकूल स्थिती शैली वापरण्यास मदत करते.

  • ब्रेकिंगमूळ पॉपर flipकॉन्फिगरेशनच्या बाजूने ड्रॉपडाउन प्लगइनसाठी ड्रॉप केलेला पर्याय. तुम्ही आता फ्लिप मॉडिफायरमधील fallbackPlacementsपर्यायासाठी रिक्त अॅरे पास करून फ्लिपिंग वर्तन अक्षम करू शकता .

  • ड्रॉपडाउन मेनू आता ऑटो क्लोज वर्तनautoClose हाताळण्यासाठी नवीन पर्यायासह क्लिक करण्यायोग्य असू शकतात . तुम्ही या पर्यायाचा वापर करून ड्रॉपडाउन मेनूच्या आत किंवा बाहेर क्लिक स्वीकारून ते परस्परसंवादी बनवू शकता.

  • ड्रॉपडाउन आता .dropdown-items मध्ये गुंडाळलेल्या <li>s ला समर्थन देतात.

जंबोट्रॉन

यादी गट

  • , , , आणि वर्गासाठी नवीन nullचल जोडले .font-sizefont-weightcolor:hover color.nav-link
  • ब्रेकिंगNavbars ला आता कंटेनरची आवश्यकता आहे (स्पेसिंग आवश्यकता आणि CSS आवश्यक आहे हे अत्यंत सुलभ करण्यासाठी).

ऑफकॅनव्हास

पृष्ठांकन

  • पृष्ठांकन दुवे आता सानुकूल करण्यायोग्य margin-leftआहेत जे एकमेकांपासून वेगळे केल्यावर सर्व कोपऱ्यांवर गतिशीलपणे गोलाकार असतात.

  • transitionपृष्ठांकन दुव्यांमध्ये s जोडले .

Popovers

  • ब्रेकिंगआमच्या डीफॉल्ट पॉपओव्हर टेम्पलेटमध्ये पुनर्नामित .arrowकेले ..popover-arrow

  • whiteListपर्यायाचे नाव बदलले allowList.

फिरकीपटू

  • स्पिनर आता prefers-reduced-motion: reduceअॅनिमेशन कमी करून सन्मान करतात. #31882 पहा .

  • सुधारित स्पिनर अनुलंब संरेखन.

टोस्ट

  • पोझिशनिंग युटिलिटीजच्या.toast-container मदतीने टोस्ट्स आता ए मध्ये ठेवता येतात .

  • डीफॉल्ट टोस्ट कालावधी 5 सेकंदांवर बदलला.

  • टोस्टमधून काढले आणि फंक्शन्ससह योग्य s overflow: hiddenने बदलले .border-radiuscalc()

टूलटिप्स

  • ब्रेकिंगआमच्या डीफॉल्ट टूलटिप टेम्पलेटमध्ये पुनर्नामित .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.

  • ब्रेकिंगडीफॉल्टनुसार नकारात्मक मार्जिन अक्षम केले.

  • ची पार्श्वभूमी अतिरिक्त घटकांवर .bg-bodyत्वरित सेट करण्यासाठी नवीन वर्ग जोडला .<body>

  • , , , आणि साठी नवीन पोझिशन युटिलिटी जोडल्या . मूल्यांमध्ये , , आणि प्रत्येक मालमत्तेसाठी समाविष्ट आहे.toprightbottomleft050%100%

  • क्षैतिज किंवा अनुलंब मध्यभागी निरपेक्ष/निश्चित स्थितीत घटकांमध्ये नवीन .translate-middle-xआणि उपयुक्तता जोडल्या..translate-middle-y

  • नवीन border-widthउपयुक्तता जोडल्या .

  • ब्रेकिंगअसे पुनर्नामित .text-monospaceकेले .font-monospace.

  • ब्रेकिंग.text-hideमजकूर लपवण्यासाठी ही एक पुरातन पद्धत असल्याने ती आता वापरली जाऊ नये म्हणून काढून टाकली.

  • युटिलिटिजसाठी .fs-*उपयुक्तता font-sizeजोडल्या (RFS सक्षम सह). हे 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इतर डिस्प्ले युटिलिटींपेक्षा अधिक वजन देण्यासाठी आमच्या CSS मध्ये उपयुक्तता हलवली .

  • .visually-hidden-focusableवापरून कंटेनरवर देखील काम करण्यासाठी मदतनीस वाढवले :focus-within.

मदतनीस

  • ब्रेकिंग रिस्पॉन्सिव्ह एम्बेड हेल्पर्सना नवीन क्लास नाव आणि सुधारित वर्तन, तसेच उपयुक्त CSS व्हेरिएबलसह रेशो हेल्पर असे नाव दिले गेले आहे.

    • गुणोत्तरामध्ये byबदलण्यासाठी वर्गांचे नाव बदलले आहे . xउदाहरणार्थ, .ratio-16by9आता आहे .ratio-16x9.
    • आम्ही .embed-responsive-itemसोप्या निवडकर्त्याच्या बाजूने आणि घटक गट निवडक सोडला आहे .ratio > *. अधिक वर्गाची आवश्यकता नाही, आणि गुणोत्तर मदतनीस आता कोणत्याही HTML घटकासह कार्य करते.
    • Sass नकाशाचे $embed-responsive-aspect-ratiosनाव बदलले गेले आहे $aspect-ratiosआणि त्याची मूल्ये वर्गाचे नाव आणि key: valueजोडी म्हणून टक्केवारी समाविष्ट करण्यासाठी सरलीकृत केली गेली आहेत.
    • CSS व्हेरिएबल्स आता व्युत्पन्न केले आहेत आणि Sass नकाशामधील प्रत्येक मूल्यासाठी समाविष्ट केले आहेत. कोणतेही सानुकूल गुणोत्तर--bs-aspect-ratio तयार करण्यासाठी वर व्हेरिएबल सुधारित करा ..ratio

  • ब्रेकिंग "स्क्रीन रीडर" वर्ग आता "दृश्यदृष्ट्या लपवलेले" वर्ग आहेत .

    • scss/helpers/_screenreaders.scssवरून Sass फाईल बदलली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आता आमच्या मदतनीसांचाही समावेश आहे. सानुकूल बिल्डमध्ये मदतनीस आयात करण्याची आवश्यकता नाही.

JavaScript

  • jQuery अवलंबित्व सोडले आणि नियमित JavaScript मध्ये प्लगइन पुनर्लेखन केले.

  • ब्रेकिंगसर्व JavaScript प्लगइन्ससाठी डेटा विशेषता आता तृतीय पक्ष आणि तुमच्या स्वतःच्या कोडमधील बूटस्ट्रॅप कार्यक्षमता वेगळे करण्यात मदत करण्यासाठी नेमस्पेस केली आहेत. उदाहरणार्थ, आम्ही 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().