v5 कडेन स्थलांतर करप

तुमकां v4 कडल्यान v5 कडेन स्थलांतरीत करपाक मदत करपाक Bootstrap स्त्रोत फायली, दस्तावेजीकरण, आनी घटकांत बदल ट्रॅक करात आनी पुनरावलोकन करात.

ह्या पानाचेर

v5.2.0 हें नांव

ताजें केल्लें डिझायन

Bootstrap v5.2.0 प्रकल्पभर मुठीभर घटक आनी गुणधर्मां खातीर सूक्ष्म डिझायन अद्ययावत वैशिश्ट्य करता, चड करून बटणां आनी फॉर्म नियंत्रणांचेर परिष्कृत मोलां वरवींborder-radius . आमचें दस्तावेजीकरणय नव्या मुखेल पान, आतां सायडबाराचे विभाग संकुचीत करपी सोपी डॉक्स मांडावळ, आनी बूटस्ट्रॅप चिन्नां ची चड म्हत्वाचीं उदाहरणां कडेन अद्ययावत केलां .

चड CSS चड-उणें

CSS चड वापरपाखातीर आमी आमचे सगळे घटक अद्ययावत केल्यात. Sass अजूनय सगळ्यांक आदार दिता आसतना, दरेक घटक घटक बेस वर्गांचेर CSS चड-उणें समाविष्ट करपाक अद्ययावत केला (देखीक, .btn), Bootstrap च्या चड रियल-टायम पसंतीची परवानगी दिता. उपरांतच्या प्रकाशनांत, आमी आमच्या मांडावळ, फॉर्म, मदतगार, आनी उपयुक्ततायांत CSS चड-उणें वापरपाचो विस्तार चालू दवरतले. दरेका घटकांतल्या CSS चयापचयां विशीं तांच्या तांच्या दस्तावेजीकरण पानांचेर चड वाचात.

आमचो CSS व्हेरिएबल वापर Bootstrap 6 मेरेन कांय प्रमाणांत अपूर्ण आसतलो.आमकां हीं पुराय बोर्डाचेर पुरायपणान चालीक लावपाक आवडटलीं, तरी ते मोडपी बदल घडोवन हाडपाचो धोको आसता. देखीक, आमच्या स्रोत कोडांत सेटिंग तुमी कांय कारणांक लागून $alert-border-width: var(--bs-border-width)करताले जाल्यार तुमच्या स्वताच्या कोडांत संभाव्य Sass मोडटा .$alert-border-width * 2

अशें म्हणून, शक्य आसल्यार, आमी चड CSS चड-उणें कडेन धुकलत रावतले, पूण उपकार करून वळखून घेयात आमची अंमलबजावणी v5 त मात्शी मर्यादीत आसूं येता.

नवें`_maps.scss`

बूटस्ट्रॅप v5.2.0 हांणी नवी Sass फायल सुरू केली _maps.scss. तो कितलेशेच Sass नकाशे काडटात _variables.scssएक समस्या सुटावी करपाक जंय मूळ नकाशाचे अद्ययावत तांकां विस्तार करपी दुय्यम नकाशांचेर लागू करूंक नाशिल्ले. देखीक, अद्ययावत $theme-colorsहेर थीम नकाशांक लागू जायनाशिल्ले जे चेर आदारीत आशिल्ले $theme-colors, कळ पसंती कार्यप्रवाह मोडून. थोडयाच उतरांनी, Sass कडेन एक मर्यादा आसा जंय एकदां मुलभूत चड वा नकासो वापरला उपरांत , तो अद्ययावत करूंक शकना. हेर CSS चडांत चड रचपाक वापरतात तेन्ना CSS चडांत चड अशीच उणीव आसा.

हाका लागून बूटस्ट्रॅपांत व्हेरिएबल कस्टमायझेशनां उपरांत येवचीं पडटात @import "functions", पूण आदीं @import "variables"आनी आमच्या आयात स्टॅकाचो उरिल्लो. Sass नकाशांकय तशेंच लागू जाता-तुमी मुलभूतांक वापरचे पयलीं तांकां ओव्हररायड करपाक जाय. फुडले नकाशे नव्यान व्हेल्यात _maps.scss: १.

$theme-colors-rgb
$utilities-colors
$utilities-text
$utilities-text-colors
$utilities-bg
$utilities-bg-colors
$negative-spacers
$gutters

तुमचीं सानुकूल Bootstrap CSS बिल्ड आतां वेगळ्या नकाशे आयात करून अशें कितें तरी दिसपाक जाय.

  // Functions come first
  @import "functions";

  // Optional variable overrides here
+ $custom-color: #df711b;
+ $custom-theme-colors: (
+   "custom": $custom-color
+ );

  // Variables come next
  @import "variables";

+ // Optional Sass map overrides here
+ $theme-colors: map-merge($theme-colors, $custom-theme-colors);
+
+ // Followed by our default maps
+ @import "maps";
+
  // Rest of our imports
  @import "mixins";
  @import "utilities";
  @import "root";
  @import "reboot";
  // etc

नवी उपयुक्तताय

अर्दबोल्ड फॉन्टांखातीर आस्पाव करपाक विस्तारीत font-weightउपयुक्तताय ..fw-semibold
दोन नवे आकार समाविष्ट करपाक विस्तारीत border-radiusउपयुक्तताय.rounded-4 , आनी .rounded-5, चड पर्यायां खातीर.

अतिरिक्त बदल केल्यात

नवो $enable-container-classesपर्याय सुरू केला. — आतां प्रायोगिक CSS ग्रिड मांडावळींत निवड करतना, .container-*वर्ग अजूनय संकलित जातले, जो मेरेन हो पर्याय सेट केल्लो ना false. तशेंच आतां कंटेनर आपलीं गटर मोलां दवरतात.
ऑफकॅनव्हास घटकांत आतां प्रतिसाद दिवपी बदल आसात . मूळ .offcanvasवर्ग बदलूंक नाशिल्लो उरता-तो सगळ्या दृश्यपोर्टांचेर सामुग्री लिपयता. ताका प्रतिसाद दिवपा खातीर, तो .offcanvasवर्ग खंयच्याय .offcanvas-{sm|md|lg|xl|xxl}वर्गांत बदलचो.
आतां दाट टेबल डिव्हायडर ऑप्ट-इन जाल्यात. — आमी कोश्टक गटां मदली दाट आनी चड कठीण ओव्हररायड करपाची शिमो काडून उडयल्या आनी ती तुमी लागू करूंक शकतात अशा पर्यायी वर्गांत व्हेल्या, .table-group-divider. एक उदाहरणाखातीर कोश्टक डॉक्स पळयात.
Scrollspy परतून बरयलां Intersection Observer API वापरपाक , म्हणल्यार तुमकां आतां सापेक्ष पालक रॅपरांची गरज ना,offsetकॉन्फिग डिप्रीकॅट करता, आनी हेर. तुमची Scrollspy कार्यान्वयन तांच्या nav हायलाइटिंगांत चड अचूक आनी सुसंगत आसपाक पळयात.
पॉपओव्हर आनी टूलटिप्स आतां CSS चड वापरतात. कांय CSS चडांत चड संख्या उणी करपाखातीर तांच्या Sass समकक्षांतल्यान अद्ययावत केल्यात. ताका लागून, ह्या प्रकाशनांत तीन चड-उणें नाका म्हण्टात: $popover-arrow-color, $popover-arrow-outer-color, आनी $tooltip-arrow-color.
नवे .text-bg-{color}मदतगार जोडले. वैयक्तीक .text-*आनी उपयुक्तताय सेट करचे बदला, तुमी आतां मदत करपी वापरूं.bg-* येता एक सेट करपाक एक विपरीत अग्रभूमि ..text-bg-*background-colorcolor
.form-check-reverseलेबल आनी संबंदीत चेकबॉक्स/रेडियोचो क्रम उलटपाक संशोधक जोडला .
नव्या वर्गा वरवीं कोश्टकांक आदार दिवपी पट्टेदार स्तंभ जोडले ..table-striped-columns

बदलांची पुराय वळेरी खातीर, GitHub चेर v5.2.0 प्रकल्प पळयात .

v5.1.0 हें नांव

CSS ग्रिड मांडावळीक प्रायोगिक आदार जोडला . — हें एक काम चालू आसा, आनी उत्पादन वापरा खातीर अजून तयार ना, पूण तुमी Sass वरवीं नव्या वैशिश्ट्यांत निवड करूंक शकतात. ताका सक्षम करपाक, मुलभूत ग्रिड अक्षम करात, सेट करून $enable-grid-classes: falseआनी सेट करून CSS ग्रिड सक्षम करात $enable-cssgrid: true.
ऑफकॅनव्हासाक तेंको दिवपाक नवबार अद्ययावत केल्यात. — प्रतिसाद दिवपी वर्ग आनी कांय ऑफकॅनव्हास मार्कअप आशिल्ल्या खंयच्याय नवबारांत ऑफकॅनव्हास ड्रॉअर जोडात ..navbar-expand-*
नवो प्लेसहोल्डर घटक जोडला . — आमचो सगळ्यांत नवो घटक, तुमच्या साइट वा ऍप्लिकेशनांत अजूनय कितेंय लोड जाता हें दाखोवपाक मदत करपाक खऱ्या सामुग्रीच्या बदला तात्पुरते ब्लॉक पुरवण करपाचो एक मार्ग.
संकुचीत प्लगइन आतां आडव्या संकुचीत करपाक तेंको दिता . — जोडचें .collapse-horizontalतुमच्या जाग्यार .collapseसंकुचीत करपाक . a वा सेट करून ब्राउझर परतून रंगोवप टाळचें .widthheightmin-heightheight
नवो स्टॅक आनी उबे नेम हेल्पर्स जोडले. — स्टॅक्सासयत बेगीन सानुकूल मांडावळ तयार करपाक जायते flexbox गुणधर्म बेगीन लागू करात . .hstackआडव्या ( ) आनी उब्या ( .vstack) स्टॅकांतल्यान निवडात . नव्या मदतगारांनी<hr> घटकांभशेन उबे विभाजक जोडात ..vr
नवे जागतीक :rootCSS चड-उणें जोडल्यात. — शैलींचेर :rootनियंत्रण दवरपाखातीर पातळेचेर जायते नवे CSS चड-उणें जोडल्यात . <body>आमच्या उपयुक्तताय आनी घटकां मदीं सयत चड कामांत आसात, पूण आतां खातीर CSS चड-उणें वाचात पसंतीचे विभागांत .
CSS चड वापरपाक रंग आनी पार्श्वभूंय उपयुक्तताय ओव्हरहाल केल्या, आनी नवी मजकूर अपारदर्शकता आनी पार्श्वभूंय अपारदर्शकता उपयुक्तताय जोडल्या. — .text-* आनी .bg-*उपयुक्तताय आतां CSS चड-उणें आनी rgba()रंग मोलां सयत तयार केल्यात, तुमकां नव्या अपारदर्शकता उपयुक्ततायेन खंयचीय उपयुक्तताय सहजतायेन पसंतीचे करपाक परवानगी दिता.
आमचे घटक कशे पसंतीचे करचे तें दाखोवपाक आदारीत नवे स्निपेट उदाहरणां जोडल्यात. — आमच्या नव्या स्निपेट उदाहरणां वांगडा सानुकूल केल्ले घटक आनी हेर सामान्य डिझायन नमुने वापरपाक तयार ओडचें . तळटीप , ड्रॉपडावन , यादी गट , आनी मोडल समाविष्ट करता .
पॉपओव्हर आनी टूलटिप्सांतल्यान वापरूंक नाशिल्लीं पोझिशनिंग शैली काडून उडयल्यात कारण हीं फकत पॉपरान हाताळटात. $tooltip-marginनाका म्हण्टात आनी nullप्रक्रियेंत सेट केला.

चड म्हायती जाय? v5.1.0 ब्लॉग पोस्ट वाचात.

हे थंय! Bootstrap 5 च्या आमच्या पयल्या मुखेल प्रकाशनांत बदल, v5.0.0, सकयल दस्तावेजीत केल्यात. वयर दाखयल्ले अतिरिक्त बदल ते प्रतिबिंबीत करिनात.

अवलंबून आशिल्लीं

jQuery सोडून दिल्लें.
Popper v1.x कडल्यान Popper v2.x कडेन अपग्रेड केला.
Libsass च्या जाग्यार Dart Sass वापरलो कारण Libsass दिल्लो आमचो Sass संकलक नाका आशिल्लो.
आमचें दस्तावेजीकरण तयार करपा खातीर जेकिलांतल्यान ह्यूगोक स्थलांतरीत केलां

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

इंटरनॅट एक्सप्लोरर 10 आनी 11 सोडले
मायक्रोसॉफ्ट एज < 16 (लेगसी एज) सोडला.
फायरफॉक्स < 60 सोडला
सोडून दिल्लें सफारी < 12
सोडले आयओएस सफारी < 12
सोडला क्रोम < 60

दस्तावेजीकरणांत बदल जाता

मुखेल पान, डॉक्स मांडावळ, आनी तळटीप परतून डिझायन केलां.
नवो पार्सल मार्गदर्शक जोडला .
नवो पसंतीचे विभाग जोडला , v4 च्या थीमिंग पानाचे सुवातेर , Sass, जागतीक संरचना पर्याय, रंग येवजण्यो, CSS चड-उणें, आनी हेर विशीं नव्या तपशीलांनी.
सगळ्या फॉर्म दस्तावेजीकरणाक नव्या फॉर्म विभागांत पुनर्गठित केला , सामुग्री चड केंद्रीत पानांनी वेगळी करून.
तेच प्रमाणें, मांडावळ विभाग अद्ययावत केला , ग्रिड सामुग्री चड स्पश्टपणान मांस करपाक.
“Navs” घटक पानाचे नांव “Navs & Tabs” अशें बदललां.
“Checks” पानाचे नांव “Checks & radios” अशें बदललां.
नावबाराची नवी रचना केल्या आनी आमच्या साइट आनी डॉक्स आवृत्त्यांनी भोंवपाक सोंपें करपाक नवो उपनॅव जोडला.
सोद क्षेत्राखातीर नवो कीबोर्ड शॉर्टकट जोडला: 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
- तेच प्रमाणें, दुसरो मापदंड in media-breakpoint-between()हो फुडल्या ब्रेकपॉइंटाच्या बदलाक स्वता ब्रेकपॉइंट वापरता (देखीक, आनी मदीं लक्ष्य दृश्यपोर्टां media-between(sm, lg)बदला ).media-breakpoint-between(sm, md)smlg
तोडणेंमुद्रण शैली आनी $enable-print-stylesचडांत चड काडून उडयल्यात. मुद्रण प्रदर्शन वर्ग अजूनय आसात. पळयात # 28339 .
तोडणेंसोडले color(), theme-color(), आनी gray()चयापचयाच्या फाटबळांत फंक्शनां. पळयात # 29083 .
तोडणें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-shadowmixins आतां nullमोलां परवानगी दितात आनी noneएका परस चड आर्ग्युमेंटांतल्यान सोडटात. पळयात # 30394 .
border-radius()मिक्सिनाक आतां मुलभूत मोल आसा .

रंग पद्दत

नव्या रंग पद्दतीच्या फाटबळांत जी रंग पद्दत काम करताली color-level()आनी काडून उडयली. आमच्या कोडबेसांतलीं $theme-color-intervalसगळीं lighten()आनी फंक्शनां आनी . हे कार्य थारावीक प्रमाणांत ताची हळुवारपण बदलचे बदला रंग एक तर धवो वा काळो रंग भरसतले. ताचो वजन मापदंड सकारात्मक वा नकारात्मक आसा हाचेर आदारून रंग एक तर टिंट वा सावळी दितले. चड म्हायती खातीर #30622 पळयात .darken()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हेर सगळ्या ब्रेकपॉइंटांत बदल जायनात.
सुदारीत गटर. गटर आतां rems मदीं सेट केल्यात, आनी v4 ( 1.5rem, वा सुमार 24px, down from 30px) परस अरुंद आसात. हाका लागून आमच्या ग्रिड प्रणालीचे गटर आमच्या स्पेसिंग उपयुक्तताय कडेन जुळटात.
- आडवे/उबे गटर, आडवे गटर, आनी उबे गटर नियंत्रीत करपाक नवो गटर वर्ग ( .g-*, .gx-*, आनी ) जोडला..gy-*
- तोडणेंनव्या गटर उपयुक्ततायांक जुळोवपा .no-guttersखातीर नांव बदललां ..g-0
स्तंभ आतां लागू जावंक नात, देखून ती वागणूक परतून मेळोवपाक position: relativeतुमकां कांय घटकांत जोडचें पडूं येता ..position-relative
तोडणें.order-*जायते फावट वापरांत नाशिल्ले कितलेशेच वर्ग सोडले . आमी आतां फकत बॉक्साच्या भायर पुरवण .order-1करतात ..order-5
तोडणें.mediaउपयुक्तताय कडेन सहज प्रतिकृती करूं येता म्हणून घटक सोडला . उदाहरणाखातीर #28265 आनी flex उपयुक्तताय पान पळयात .
तोडणें bootstrap-grid.cssआतां फकत box-sizing: border-boxजागतीक बॉक्स-आकार रिसेट करचे बदला स्तंभाक लागू जाता. अशे तरेन आमचीं ग्रिड शैलीं चड सुवातेर हस्तक्षेप करिनासतना वापरूं येतात.
$enable-grid-classesआतां आतां कंटेनर वर्गांची निर्मिती अक्षम करीना. पळयात # 29146.
make-colनिर्दिश्ट आकारा बगर समान स्तंभांक पूर्वनिर्धारीत करपाक mixin अद्ययावत केला .

सामुग्री, रिबूट, आदी

RFS आतां पूर्वनिर्धारीतपणान सक्षम केला. मिक्सिन वापरपी शीर्षकांfont-size()आपोआप तांचेंfont-sizeto scale viewport कडेन समायोजीत करतले. हें खाशेलपण आदीं v4 कडेन ऑप्ट-इन आशिल्लें.
तोडणें$display-*आमच्या व्हेरिएबल्स बदलपाक आनी $display-font-sizesसॅस नकाशान आमच्या प्रदर्शन टायपोग्राफींत सुदारणा केल्या. $display-*-weightतशेंच एकाच $display-font-weightआनी समायोजीत font-sizes खातीर वैयक्तीक चड-उणें काडून उडयले .
दोन नवे .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 त मुळ आनी सानुकूल वर्ग आशिल्ले चेकबॉक्स, रेडिओ, निवड, आनी हेर इनपुट एकठांय केल्यात. आतां आमचे लागीं लागीं सगळे फॉर्म एलिमेंट पुरायपणान कस्टम आसात, चडशे कस्टम HTML ची गरज नासतना.
- .custom-control.custom-checkboxआतां आसा .form-check.
- .custom-control.custom-custom-radioआतां आसा .form-check.
- .custom-control.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, तुमकां फकत HTML घटक बदलून तुमकां जाय तसो इनलायन वा ब्लॉक मदत मजकूर तयार करपाक परवानगी दिता.
फॉर्म नियंत्रण आतां heightशक्य आसल्यार स्थिर वापरनात, ताचे बदला min-heightहेर घटकां वांगडा पसंती आनी सुसंगती सुदारपाक स्थगीत करतात.
प्रमाणीकरण चिन्नां आतां <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>, आनी चेर खंयच्याय.btnवर्गां<label>. पळयात # 30650 . हाचे खातीर डॉक्स आमच्या बटणां पानांतल्यान नव्या फॉर्म विभागांत व्हेल्यात.
तोडणें उपयुक्तताय .btn-blockखातीर सोडून दिला. .btn-blockon the वापरचे बदला .btn, तुमचीं बटणां .d-gridआनी गरज पडल्यार तांकां स्पेस दिवपाक एक .gap-*उपयुक्तताय गुठलायात. तांचेर आनीकय चड नियंत्रण दवरपा खातीर प्रतिसाद दिवपी वर्गांत वचचें. कांय उदाहरणां खातीर डॉक्स वाचात.
अतिरिक्त मापदंडांक आदार दिवपाक आमचे button-variant()आनी मिक्सिन अद्ययावत केल्यात.button-outline-variant()
होवर आनी सक्रिय स्थितीचेर वाडिल्लो कॉन्ट्रास्ट सुनिश्चीत करपाक अद्ययावत बटण.
अक्षम बटणां आतां pointer-events: none;.

कार्ड

तोडणें.card-deckआमच्या ग्रिडाच्या फाटबळांत सोडलो . तुमचीं कार्डां स्तंभ वर्गांत गुठलावचीं आनी .row-cols-*कार्ड डेक परतून तयार करपाक पालक कंटेनर जोडात (पूण प्रतिसाद दिवपी संरेखणाचेर चड नियंत्रण दवरून).
तोडणेंमेसनरीच्या .card-columnsफाटबळांत सोडून दिलो. पळयात # 28922 .
तोडणें.cardआदारीत अकॉर्डियन बदलून नव्या अकॉर्डियन घटकाचो वापर केला .

हिंडोळ

काळो मजकूर, नियंत्रणां, आनी निर्देशकां खातीर नवो .carousel-darkवेरिएंट जोडला (हलक्या पार्श्वभूंय खातीर बरो).
हिंडोला नियंत्रणां खातीर शेवरॉन चिन्नां बदलून बूटस्ट्रॅप चिन्नां कडल्यान नव्या SVG कडेन केल्या .

बंद करचें बटण

तोडणेंउण्या सामान्य नांवाखातीर .closeअशें नांव बदललां ..btn-close
बंद बटणां आतां HTML त background-imagea बदला एक (एम्बेडेड SVG) वापरतात ×, तुमच्या मार्कअपाक स्पर्श करपाची गरज नासतना सोंपें पसंतीची परवानगी दिता.
गडद पार्श्वभूंयेर चड कॉन्ट्रास्ट डिसमिस चिन्न सक्षम करपाक .btn-close-whiteवापरपी नवो वेरिएंट जोडला .filter: invert(1)

कडसरावचें

अकॉर्डियनां खातीर स्क्रोल एंकरिंग काडून उडयलां.

ड्रॉपडावन करतात

.dropdown-menu-darkऑन-डिमांड डार्क ड्रॉपडावन खातीर नवी वेरिएंट आनी संबंदीत चड-उणें जोडल्यात.
खातीर नवी चड जोडल्या $dropdown-padding-x.
सुदारीत कॉन्ट्रास्ट खातीर ड्रॉपडावन डिव्हायडर काळोख केला.
तोडणेंड्रॉपडावन खातीर सगळ्यो घडणुको आतां ड्रॉपडावन टॉगल बटणाचेर ट्रिगर जातात आनी मागीर पालक घटका मेरेन बुडबुडें मारतात.
ड्रॉपडावन मेनूंत आतां data-bs-popper="static"ड्रॉपडावनाची सुवात स्थिर आसतना, वा ड्रॉपडावन नॅव्हबारांत आसतना एक गुणधर्म सेट केल्लो आसता. हें आमच्या जावास्क्रिप्टान जोडलां आनी Popper च्या पोझिशनिंगांत हस्तक्षेप करिनासतना सानुकूल स्थिती शैली वापरपाक आमकां मदत करता.
तोडणेंflipमुळ Popper संरचनेच्या फायद्या खातीर ड्रॉपडावन प्लगइन खातीर पर्याय सोडला . तुमी आतां फ्लिप संशोधकांत fallbackPlacementsपर्यायाखातीर रिकामी ऍरे पास करून फ्लिपिंग वर्तन अक्षम करूंक शकतात .
ड्रॉपडावन मेनू आतां ऑटो बंद वर्तनautoClose हाताळपाक नव्या पर्याया सयत क्लिक करपाक मेळटात . तुमी हो पर्याय वापरून ड्रॉपडावन मेनू भितर वा भायर क्लिक स्विकारूंक शकतात ताका परस्पर संवादात्मक करपाक.
ड्रॉपडावन आतां .dropdown-items मदीं गुठलायल्ले <li>s समर्थन करतात.

जंबोट्रॉन हें नांव

तोडणेंउपयुक्तताये वांगडा ताची प्रतिकृती करूं येता म्हणून जंबोट्रॉन घटक सोडला. डेमो खातीर आमचें नवें जंबोट्रॉन उदाहरण पळयात.

यादी गट

गटांची वळेरी करपाक नवो .list-group-numberedसंशोधक जोडला.

नवस आनी टॅब

, , , आनी वर्गांत नवे nullचडांत चड जोडल्यात .font-sizefont-weightcolor:hover color.nav-link

नवबरें

तोडणेंNavbars आतां भितर एक कंटेनर जाय (अंतराची गरज खरपणान सोंपे करपाक आनी CSS गरज आसा).
तोडणें.activeवर्ग आतां s कडेन लागू करपाक मेळचो ना , .nav-itemतो थेट .nav-links चेर लागू करचो पडटलो.

ऑफकॅनव्हास

नवो ऑफकॅनव्हास घटक जोडला .

पृष्ठांकन करप

पृष्ठांकन दुव्यांक आतां सानुकूल करपाक 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
तोडणेंपॉपर घटकांची चड बरी प्लेसमेंट करपाखातीर the खातीर मुलभूत मोल 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.
तोडणेंपूर्वनिर्धारीतपणान नकारात्मक मार्जिन अक्षम केल्यात.
's पार्श्वभूंय अतिरिक्त घटकांक .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 ग्रिड आनी flexbox मांडावळी खातीर उपयुक्तताय आनी नवी उपयुक्तताय ( ) .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 घटका वांगडा काम करता.
- $embed-responsive-aspect-ratiosSass नकाशाचें नांव बदललां आनी $aspect-ratiosताचीं मोलां सोंपी केल्यांत जाका लागून वर्ग नांव आनी टक्केवारी key: valueजोडी म्हणून आसपावीत केल्या.
- आतां CSS चड-उणें तयार केल्यात आनी Sass नकाशांत दरेक मोला खातीर समाविष्ट केल्यात. खंयचेंय सानुकूल आस्पॅक्ट रेशियो--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 अवलंबन सोडून दिल्या आनी प्लगइन नियमित जावास्क्रिप्टांत आसपाक परतून बरयल्यात.
तोडणेंसगळ्या JavaScript प्लगइनांखातीर डेटा गुणधर्म आतां नांवस्पेस केल्यात, जाका लागून Bootstrap कार्यक्षमताय तिसऱ्या पक्षां कडल्यान आनी तुमच्या स्वताच्या कोडांतल्यान वेगळी करपाक मदत जातली. देखीक, आमी data-bs-toggleबदला वापरतात data-toggle.
सगळे प्लगइन आतां पयलो आर्ग्युमेंट म्हणून CSS निवडपी स्वीकारूंक शकतात. प्लगइनाची नवी दृष्टांत तयार करपाक तुमी एक तर DOM घटक वा खंयचोय वैध CSS निवडपी पास करूंक शकतात:
```
const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
```
popperConfigबूटस्ट्रॅपाची मुलभूत Popper संरचना आर्ग्युमेंट म्हणून स्वीकारपी फंक्शन म्हणून पास करूंक शकता, जेणे करून तुमी ही मुलभूत संरचना तुमच्या मार्गान विलीन करूंक शकतात. ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्साक लागू जाता.
Popper घटकांची चड बरी प्लेसमेंट करपाखातीर the खातीर मुलभूत मोल fallbackPlacementsबदललां . ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्साक लागू जाता.['top', 'right', 'bottom', 'left']
_getInstance()→ सारकिल्या भौशीक स्थिर पद्दतींतल्यान अंडरस्कोर काडून उडयला getInstance().