v5 कडेन स्थलांतर करप
तुमकां v4 कडल्यान v5 कडेन स्थलांतरीत करपाक मदत करपाक Bootstrap स्त्रोत फायली, दस्तावेजीकरण, आनी घटकांत बदल ट्रॅक करात आनी पुनरावलोकन करात.
अवलंबून आशिल्लीं
- 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 colorspace कडेन संबंदीत ना. पळयात # 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)
sm
lg
-
तोडणेंमुद्रण शैली आनी
$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-shadow
mixins आतां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 from30px
) परस अरुंद आसात. हाका लागून आमच्या ग्रिड प्रणालीचे गटर आमच्या स्पेसिंग उपयुक्तताय कडेन जुळटात.- आडवे/उबे गटर, आडवे गटर, आनी उबे गटर नियंत्रीत करपाक नवो गटर वर्ग (
.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-size
to scale viewport कडेन समायोजीत करतले. हें खाशेलपण आदीं v4 कडेन ऑप्ट-इन आशिल्लें. -
तोडणें
$display-*
आमच्या व्हेरिएबल्स बदलपाक आनी$display-font-sizes
सॅस नकाशान आमच्या प्रदर्शन टायपोग्राफींत सुदारणा केल्या.$display-*-weight
तशेंच एकाच$display-font-weight
आनी समायोजीतfont-size
s खातीर वैयक्तीक चड-उणें काडून उडयले . -
दोन नवे
.display-*
शीर्षक आकार जोडले,.display-5
आनी.display-6
. -
दुवे पूर्वनिर्धारीतपणान रेखांकित केल्यात (फकत होवराचेर न्हय), जो मेरेन ते विशिश्ट घटकांचो भाग नात.
-
तांची शैली ताजी करपाक आनी स्टायलिंगाचेर चड नियंत्रणाखातीर CSS चड-उणें कडेन परतून तयार करपाक कोश्टकांची नवी रचना केल्या.
-
तोडणेंनेस्टेड कोश्टक आतां शैली वारसा दिना.
-
तोडणें
.thead-light
आनी सगळ्या कोश्टक घटकांखातीर वापरूं येता.thead-dark
अशा वेरिएंट वर्गांच्या फाटबळांत सोडून दितात ( , , , , आनी )..table-*
thead
tbody
tfoot
tr
th
td
-
तोडणें
table-row-variant()
मिक्सिनाचें नांव बदललां आनीtable-variant()
फकत 2 मापदंड स्वीकारता:$color
(रंग नांव) आनी$value
(रंग कोड). कोश्टक घटक चयापचयाचेर आदारीत शिमेचो रंग आनी उच्चार रंग आपोआप मेजतात. -
कोश्टक कक्ष पॅडिंग चडांत चड
-y
आनी हातूंत विभागात-x
. -
तोडणें
.pre-scrollable
वर्ग सोडलो . पळयात # 29135 -
तोडणें
.text-*
उपयुक्तताय आतां दुव्यांक होवर आनी फोकस स्थिती जोडनात..link-*
ताचे बदला हेल्पर क्लास वापरूं येतात. पळयात # 29267 -
तोडणें
.text-justify
वर्ग सोडलो . पळयात # 29793 -
मुलभूत आडवें
padding-left
चालू<ul>
आनी<ol>
घटक ब्राउझर मुलभूतांतल्यान रीसेट40px
करात2rem
. -
जोडलां
$enable-smooth-scroll
, जें जागतीक पांवड्यार लागू जाता - माध्यम क्वेरीscroll-behavior: smooth
वरवीं उणी गती मागपी वापरप्यांक सोडल्यार . पळयात # 31877prefers-reduced-motion
आर टी एल
- आडव्या दिका विशिश्ट चड-उणें, उपयुक्तताय, आनी मिक्सिन सगळ्यांक फ्लेक्सबॉक्स मांडावळींनी मेळपी सारके तार्कीक गुणधर्म वापरपाखातीर नांव बदललां-देखीक,
start
आनी आनी च्याend
बदलाक .left
right
रूपां
-
नवे तरंगपी फॉर्म जोडले! आमी फ्लोटिंग लेबल्स उदाहरणाक पुरायपणान समर्थीत फॉर्म घटकांक प्रचार केला. नवे फ्लोटिंग लेबलां पान पळयात.
-
तोडणें एकत्रीत केल्ले मुळ आनी सानुकूल फॉर्म घटक. v4 त मुळ आनी सानुकूल वर्ग आशिल्ले चेकबॉक्स, रेडिओ, निवड, आनी हेर इनपुट एकठांय केल्यात. आतां आमचे लागीं लागीं सगळे फॉर्म एलिमेंट पुरायपणान कस्टम आसात, चडशे कस्टम 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
no longer setsdisplay
, तुमकां फकत HTML घटक बदलून तुमकां जाय तसो इनलायन वा ब्लॉक मदत मजकूर तयार करपाक परवानगी दिता. -
प्रमाणीकरण चिन्नां आतां
<select>
s कडेन लागू जायनातmultiple
. -
scss/forms/
, इनपुट गट शैली सयत, खाला स्त्रोत Sass फायलींची पुनर्रचना केल्या .
घटकांचो आस्पाव जाता
- आमच्या चक्राचेर
padding
आदारीत आसपाक सावधानताय, ब्रेडक्रंब, कार्ड, ड्रॉपडावन, यादी गट, मोडल, पोपोव्हर, आनी साधनसूचीं खातीर एकत्रीत मोलां. पळयात # 30564 .$spacer
अकॉर्डियन हें नांव
- नवो अकॉर्डियन घटक जोडला .
सावधानताय दिता
-
आतां अलर्टांक चिन्नां आशिल्लीं उदाहरणां आसात .
-
<hr>
ते पयलींच वापरतात देखून दरेक सावधानांत s खातीर सानुकूल शैली काडून उडयल्यातcurrentColor
.
बॅज घालतात
-
तोडणेंपार्श्वभूंय उपयुक्तताय खातीर सगळे
.badge-*
रंग वर्ग सोडले (देखीक,.bg-primary
बदला वापरात.badge-primary
). -
तोडणेंसोडला
.badge-pill
—ताचे.rounded-pill
बदला उपयुक्तताय वापरात. -
तोडणें
<a>
आनी<button>
घटकांखातीर होवर आनी फोकस शैली काडून उडयल्यात . -
.25em
/.5em
ते.35em
/ मेरेन बॅजांखातीर मुलभूत पॅडींग वाडयलां.65em
.
ब्रेडक्रंब हें नांव
-
padding
,background-color
, आनी काडून उडोवन ब्रेडक्रंबांचें मुलभूत रूप सोंपें केलांborder-radius
. -
--bs-breadcrumb-divider
CSS परतून संकलित करपाची गरज नासतना सोप्या पसंतीखातीर नवो CSS सानुकूल गुणधर्म जोडला .
बटणां घालतात
-
तोडणें टॉगल बटणां , चेकबॉक्स वा रेडिओ सयत, आतां जावास्क्रिप्टाची गरज ना आनी नवे मार्कअप आसा. आमकां आतां रॅपिंग एलिमेंटाची गरज ना,
.btn-check
- कडेन<input>
, आनी चेर खंयच्याय.btn
वर्गां<label>
. पळयात # 30650 . हाचे खातीर डॉक्स आमच्या बटणां पानांतल्यान नव्या फॉर्�� विभागांत व्हेल्यात. -
तोडणें उपयुक्तताय
.btn-block
खातीर सोडून दिला..btn-block
on 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-image
a बदला एक (एम्बेडेड SVG) वापरतात×
, तुमच्या मार्कअपाक स्पर्श करपाची गरज नासतना सोंपें पसंतीची परवानगी दिता. -
गडद पार्श्वभूंयेर चड कॉन्ट्रास्ट डिसमिस चिन्न सक्षम करपाक
.btn-close-white
वापरपी नवो वेरिएंट जोडला .filter: invert(1)
कडसरावचें
- अकॉर्डियनां खातीर स्क्रोल एंकरिंग काडून उडयलां.
ड्रॉपडावन करतात
-
.dropdown-menu-dark
ऑन-डिमांड डार्क ड्रॉपडावन खातीर नवी वेरिएंट आनी संबंदीत चड-उणें जोडल्यात. -
खातीर नवी चड जोडल्या
$dropdown-padding-x
. -
सुदारीत कॉन्ट्रास्ट खातीर ड्रॉपडावन डिव्हायडर काळोख केला.
-
तोडणेंड्रॉपडावनाखातीर सगळ्यो घडणुको आतां ड्रॉपडावन टॉगल बटणाचेर ट्रिगर जातात आनी मागीर पालक घटकामेरेन बुडबुडें मारतात.
-
ड्रॉपडावन मेनूंत आतां
data-bs-popper="static"
ड्रॉपडावनाची सुवात स्थिर आसता आनीdata-bs-popper="none"
ड्रॉपडावन नॅव्हबारांत आसतना एक गुणधर्म सेट केल्ली आसता. हें आमच्या जावास्क्रिप्टान जोडलां आनी Popper च्या पोझिशनिंगांत हस्तक्षेप करिनासतना सानुकूल स्थिती शैली वापरपाक आमकां मदत करता. -
तोडणें
flip
मुळ Popper संरचनेच्या फायद्या खातीर ड्रॉपडावन प्लगइन खातीर पर्याय सोडला . तुमी आतां फ्लिप संशोधकांतfallbackPlacements
पर्यायाखातीर रिकामी ऍरे पास करून फ्लिपिंग वर्तन अक्षम करूंक शकतात . -
ड्रॉपडावन मेनू आतां ऑटो बंद वर्तन
autoClose
हाताळपाक नव्या पर्याया सयत क्लिक करपाक मेळटात . तुमी हो पर्याय वापरून ड्रॉपडावन मेनू भितर वा भायर क्लिक स्विकारूंक शकतात ताका परस्पर संवादात्मक करपाक. -
ड्रॉपडावन आतां
.dropdown-item
s मदीं गुठलायल्ले<li>
s समर्थन करतात.
जंबोट्रॉन हें नांव
- तोडणेंउपयुक्तताये वांगडा ताची प्रतिकृती करूं येता म्हणून जंबोट्रॉन घटक सोडला. डेमो खातीर आमचें नवें जंबोट्रॉन उदाहरण पळयात.
यादी गट
- गटांची वळेरी करपाक नवो
.list-group-numbered
संशोधक जोडला.
नवस आनी टॅब
- , , , आनी वर्गांत नवे
null
चडांत चड जोडल्यात .font-size
font-weight
color
:hover
color
.nav-link
नवबरें
- तोडणेंNavbars आतां भितर एक कंटेनर जाय (अंतराची गरज खरपणान सोंपे करपाक आनी CSS गरज आसा).
ऑफकॅनव्हास
- नवो ऑफकॅनव्हास घटक जोडला .
पृष्ठांकन करप
-
पृष्ठांकन दुव्यांक आतां सानुकूल करपाक
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>
-
, , , आनी खातीर नवी स्थिती उपयुक्तताय जोडल्या . मोलांत , , आनी दरेक मालमत्ते खातीर आसपावीत आसा.
top
right
bottom
left
0
50%
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-ratios
Sass नकाशाचें नांव बदललां आनी$aspect-ratios
ताचीं मोलां सोंपी केल्यांत जाका लागून वर्ग नांव आनी टक्केवारीkey: value
जोडी म्हणून आसपावीत केल्या.- आतां CSS चड-उणें तयार केल्यात आनी Sass नकाशांत दरेक मोला खातीर समाविष्ट केल्यात. खंयचेंय सानुकूल आस्पॅक्ट रेशियो
--bs-aspect-ratio
तयार करपाक चेर व्हेरिएबल बदलचें ..ratio
- वर्गांचें नांव बदलून आस्पॅक्ट रेशियोंत बदल
-
तोडणें “स्क्रीन रीडर” वर्ग आतां “दृश्य लिपल्ले” वर्ग जाल्यात .
- Sass फायल पासून
scss/helpers/_screenreaders.scss
to बदलल्याscss/helpers/_visually-hidden.scss
- नांव बदलून
.sr-only
आनी.sr-only-focusable
ते.visually-hidden
आनी.visually-hidden-focusable
sr-only()
नांव बदलून आनी मिक्सिनsr-only-focusable()
करूनvisually-hidden()
आनीvisually-hidden-focusable()
.
- Sass फायल पासून
-
bootstrap-utilities.css
आतां आमच्या मदतगारांचोय आस्पाव जाता. आतां सानुकूल बिल्डांत मदतगार आयात करपाची गरज ना.
जावास्क्रिप्ट
-
jQuery अवलंबन सोडून दिल्या आनी प्लगइन नियमित जावास्क्रिप्टांत आसपाक परतून बरयल्यात.
-
तोडणेंसगळ्या JavaScript प्लगइनांखातीर डेटा गुणधर्म आतां नांवस्पेस केल्यात, जाका लागून Bootstrap कार्यक्षमताय तिसऱ्या पक्षां कडल्यान आनी तुमच्या स्वताच्या कोडांतल्यान वेगळी करपाक मदत जातली. देखीक, आमी
data-bs-toggle
बदला वापरतातdata-toggle
. -
सगळे प्लगइन आतां पयलो आर्ग्युमेंट म्हणून CSS निवडपी स्वीकारूंक शकतात. प्लगइनाची नवी दृष्टांत तयार करपाक तुमी एक तर DOM घटक वा खंयचोय वैध CSS निवडपी पास करूंक शकतात:
var modal = new bootstrap.Modal('#myModal') var dropdown = new bootstrap.Dropdown('[data-bs-toggle="dropdown"]')
-
popperConfig
बूटस्ट्रॅपाची मुलभूत Popper संरचना आर्ग्युमेंट म्हणून स्वीकारपी फंक्शन म्हणून पास करूंक शकता, जेणे करून तुमी ही मुलभूत संरचना तुमच्या मार्गान विलीन करूंक शकतात. ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्साक लागू जाता. -
Popper घटकांची चड बरी प्लेसमेंट करपाखातीर the खातीर मुलभूत मोल
fallbackPlacements
बदललां . ड्रॉपडावन, पॉपओव्हर, आनी टूलटिप्साक लागू जाता.['top', 'right', 'bottom', 'left']
-
_getInstance()
→ सारकिल्या भौशीक स्थिर पद्दतींतल्यान अंडरस्कोर काडून उडयलाgetInstance()
.