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

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

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

या पृष्ठावर

v5.2.0

ताजेतवाने डिझाइन

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

अधिक CSS व्हेरिएबल्स

CSS व्हेरिएबल्स वापरण्यासाठी आम्ही आमचे सर्व घटक अपडेट केले आहेत. Sass अजूनही सर्वकाही अंडरपिन करत असताना, प्रत्येक घटकाला घटक बेस क्लासेसवर (उदा., .btn) CSS व्हेरिएबल्स समाविष्ट करण्यासाठी अद्यतनित केले गेले आहे, ज्यामुळे बूटस्ट्रॅपचे अधिक रिअल-टाइम कस्टमायझेशन करता येईल. त्यानंतरच्या प्रकाशनांमध्ये, आम्ही आमच्या लेआउट, फॉर्म, मदतनीस आणि उपयोगितांमध्ये CSS व्हेरिएबल्सचा आमचा वापर वाढवणे सुरू ठेवू. प्रत्येक घटकातील CSS व्हेरिएबल्सबद्दल त्यांच्या संबंधित दस्तऐवजीकरण पृष्ठांवर अधिक वाचा.

Bootstrap 6 पर्यंत आमचा CSS व्हेरिएबल वापर काहीसा अपूर्ण असेल. आम्हांला ते संपूर्ण बोर्डवर लागू करायला आवडेल, तरीही ते बदल घडवून आणण्याचा धोका पत्करतात. उदाहरणार्थ, जर तुम्ही काही कारणास्तव $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

तुमचे सानुकूल बूटस्ट्रॅप 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. उदाहरणासाठी टेबल डॉक्स पहा.

  • इंटरसेक्शन ऑब्झर्व्हर API वापरण्यासाठी Scrollspy पुन्हा लिहिण्यात आले आहे , याचा अर्थ तुम्हाला यापुढे संबंधित पॅरेंट रॅपर्स,offsetआणि बरेच काही आवश्यक नाही. तुमची Scrollspy अंमलबजावणी त्यांच्या एनएव्ही हायलाइटिंगमध्ये अधिक अचूक आणि सुसंगत होण्यासाठी पहा.

  • पॉपओव्हर्स आणि टूलटिप्स आता 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करण्यासाठी तुमच्यामध्ये जोडा . ए किंवा सेट करून ब्राउझर पुन्हा रंगवणे टाळा ..collapsewidthheightmin-heightheight

  • नवीन स्टॅक आणि अनुलंब नियम मदतनीस जोडले. — स्टॅकसह सानुकूल लेआउट द्रुतपणे तयार करण्यासाठी एकाधिक फ्लेक्सबॉक्स गुणधर्म द्रुतपणे लागू करा . क्षैतिज ( .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 वर अपग्रेड केले.
  • लिबसासला डार्ट सासने बदलले कारण आमचे सास कंपाइलर लिबसास नापसंत केले गेले.
  • आमचे दस्तऐवज तयार करण्यासाठी जेकिलहून ह्यूगो येथे स्थलांतरित झाले

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

  • इंटरनेट एक्सप्लोरर 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-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-textयापुढे सेट होत नाही display, HTML घटक बदलून तुम्हाला इनलाइन किंवा ब्लॉक मदत मजकूर तयार करण्याची परवानगी देते.

  • फॉर्म नियंत्रणे यापुढे heightशक्य असेल तेव्हा निश्चित वापरली जात नाहीत, त्याऐवजी min-heightइतर घटकांसह सानुकूलन आणि सुसंगतता सुधारण्यासाठी पुढे ढकलतात.

  • प्रमाणीकरण चिन्ह यापुढे <select>s वर लागू केले जाणार नाहीत multiple.

  • scss/forms/इनपुट गट शैलींसह, अंतर्गत स्रोत सास फाइल्सची पुनर्रचना .

घटक

  • आमच्या व्हेरिएबलवर paddingआधारित अलर्ट, ब्रेडक्रंब, कार्ड, ड्रॉपडाउन, सूची गट, मॉडेल्स, पॉपओव्हर्स आणि टूलटिपसाठी एकत्रित मूल्ये . #30564 पहा .$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"विशेषता सेट असते जेव्हा ड्रॉपडाउनची स्थिती स्थिर असते किंवा ड्रॉपडाउन नॅव्हबारमध्ये असते. हे आमच्या JavaScript द्वारे जोडले गेले आहे आणि आम्हाला पॉपरच्या स्थितीत हस्तक्षेप न करता सानुकूल स्थिती शैली वापरण्यास मदत करते.

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

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

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

जंबोट्रॉन

यादी गट

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

ऑफकॅनव्हास

पृष्ठांकन

  • पृष्ठांकन दुवे आता सानुकूल करण्यायोग्य 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 निवडक पास करू शकता:

    const modal = new bootstrap.Modal('#myModal')
const dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')

  • popperConfigएक फंक्शन म्हणून पास केले जाऊ शकते जे बूटस्ट्रॅपचे डीफॉल्ट पॉपर कॉन्फिगरेशन आर्ग्युमेंट म्हणून स्वीकारते, जेणेकरून तुम्ही हे डीफॉल्ट कॉन्फिगरेशन तुमच्या पद्धतीने विलीन करू शकता. ड्रॉपडाउन, पॉपओव्हर आणि टूलटिपवर लागू होते.

  • साठी डीफॉल्ट मूल्य पॉपर घटकांच्या चांगल्या स्थानासाठी fallbackPlacementsबदलले आहे . ड्रॉपडाउन, पॉपओव्हर आणि टूलटिपवर लागू होते.['top', 'right', 'bottom', 'left']

  • सार्वजनिक स्थिर पद्धतींमधून अंडरस्कोर काढला जसे की _getInstance()→ getInstance().