v5 मा माइग्रेट गर्दै

बुटस्ट्र्याप स्रोत फाइलहरू, कागजातहरू, र कम्पोनेन्टहरूमा परिवर्तनहरू ट्र्याक र समीक्षा गर्नुहोस् तपाईंलाई v4 बाट v5 मा माइग्रेट गर्न मद्दत गर्न।

यस पृष्ठमा

v5.2.0

ताजा डिजाइन

बुटस्ट्र्याप v5.2.0 ले प्रोजेक्टमा मुट्ठीभर कम्पोनेन्ट र गुणहरूका लागि सूक्ष्म डिजाइन अद्यावधिक सुविधा दिन्छ, विशेष गरी border-radiusबटनहरू र फारम नियन्त्रणहरूमा परिष्कृत मानहरू मार्फत । हाम्रो कागजातहरू पनि नयाँ गृहपृष्ठको साथ अद्यावधिक गरिएको छ, सरल कागजात लेआउट जसले अब साइडबारको खण्डहरू पतन गर्दैन, र बुटस्ट्र्याप आइकनहरूको थप प्रख्यात उदाहरणहरू ।

थप CSS चरहरू

हामीले CSS चरहरू प्रयोग गर्न हाम्रा सबै कम्पोनेन्टहरू अद्यावधिक गरेका छौं। जब सासले अझै पनि सबै कुरालाई अन्डरपिन गर्दछ, प्रत्येक कम्पोनेन्टलाई कम्पोनेन्ट आधार वर्गहरूमा CSS चरहरू समावेश गर्न अद्यावधिक गरिएको छ (जस्तै, .btn), बुटस्ट्र्यापको थप वास्तविक-समय अनुकूलनको लागि अनुमति दिँदै। त्यसपछिका विमोचनहरूमा, हामी हाम्रो लेआउट, फारमहरू, सहयोगीहरू र उपयोगिताहरूमा CSS चरहरूको प्रयोगलाई विस्तार गर्न जारी राख्नेछौं। प्रत्येक कम्पोनेन्टमा CSS चरहरूको बारेमा तिनीहरूको सम्बन्धित कागजात पृष्ठहरूमा थप पढ्नुहोस्।

बुटस्ट्र्याप 6 सम्म हाम्रो CSS चर प्रयोग केही हदसम्म अपूर्ण हुनेछ। यद्यपि हामी यसलाई बोर्डमा पूर्ण रूपमा लागू गर्न चाहन्छौं, तिनीहरूले ब्रेकिङ परिवर्तनहरू निम्त्याउने जोखिम चलाउँछन्। उदाहरण को लागी, यदि तपाइँ केहि कारण $alert-border-width: var(--bs-border-width)को लागी गर्दै हुनुहुन्थ्यो भने हाम्रो स्रोत कोड मा सेटिङले तपाइँको आफ्नै कोड मा सम्भावित Sass लाई तोड्छ ।$alert-border-width * 2

यसरी, जहाँ सम्भव छ, हामी थप CSS चरहरू तर्फ धकेल्न जारी राख्नेछौं, तर कृपया हाम्रो कार्यान्वयन v5 मा थोरै सीमित हुन सक्छ भनेर बुझ्नुहोस्।

नयाँ`_maps.scss`

Bootstrap v5.2.0 ले एउटा नयाँ Sass फाइल प्रस्तुत गर्‍यो _maps.scss। यसले धेरै Sass नक्साहरू बाहिर निकाल्छ _variables.scssजहाँ समस्या समाधान गर्न मूल नक्शामा अद्यावधिकहरू माध्यमिक नक्साहरूमा लागू गरिएको थिएन जसले तिनीहरूलाई विस्तार गर्दछ। उदाहरणका लागि, कुञ्जी अनुकूलन कार्यप्रवाहहरू तोड्दै, $theme-colorsमा भर पर्ने अन्य विषयवस्तु नक्सामा अद्यावधिकहरू लागू गरिएन । $theme-colorsछोटकरीमा, Sass को एक सीमा छ जहाँ एक पटक पूर्वनिर्धारित चर वा नक्सा प्रयोग गरिसकेपछि , यसलाई अद्यावधिक गर्न सकिँदैन। त्यहाँ CSS चरहरूसँग समान कमी छ जब तिनीहरू अन्य CSS चरहरू रचना गर्न प्रयोग गरिन्छ।

यसैले बुटस्ट्र्यापमा चर अनुकूलनहरू पछि आउनु पर्छ @import "functions", तर पहिले @import "variables"र हाम्रो आयात स्ट्याकको बाँकी। उही सास नक्साहरूमा लागू हुन्छ - तपाईंले तिनीहरू प्रयोग गर्नु अघि पूर्वनिर्धारितहरूलाई ओभरराइड गर्नुपर्छ। निम्न नक्साहरूलाई नयाँमा सारिएको छ _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कक्षालाई कुनै पनि .offcanvas-{sm|md|lg|xl|xxl}कक्षामा परिवर्तन गर्नुहोस्।
बाक्लो टेबल डिभाइडरहरू अब अप्ट-इन छन्। — हामीले तालिका समूहहरू बीचको सिमाना ओभरराइड गर्नको लागि बाक्लो र अझ गाह्रोलाई हटाएका छौं र यसलाई तपाईंले आवेदन गर्न सक्ने वैकल्पिक कक्षामा सारियो .table-group-divider। उदाहरणका लागि तालिका कागजातहरू हेर्नुहोस्।
Scrollspy लाई Intersection Observer API प्रयोग गर्नको लागि पुन: लेखिएको छ , जसको मतलब तपाईलाई अब सापेक्ष अभिभावक र्यापरहरू,offsetकन्फिगरेसनहरू हटाउने, र थप आवश्यक पर्दैन। तपाईंको स्क्रोलस्पी कार्यान्वयनहरू तिनीहरूको एनएभि हाइलाइटिङमा अझ सटीक र एकरूप हुन खोज्नुहोस्।
Popovers र टूलटिपहरूले अब 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 मा अपग्रेड गरियो।
Libsass लाई हाम्रो Sass कम्पाइलरको रूपमा Dart Sass ले बदलियो Libsass लाई बहिष्कृत गरिएको थियो।
हाम्रो कागजात निर्माण गर्न Jekyll बाट Hugo मा बसाई

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

इन्टरनेट एक्सप्लोरर 10 र 11 छोडियो
ड्रप गरिएको Microsoft Edge < 16 (Legacy Edge)
फायरफक्स <60 छोडियो
सफारी <12 छोडियो
आईओएस सफारी <12 छोडियो
क्रोम <60 छोडियो

कागजात परिवर्तन

पुन: डिजाइन गरिएको गृहपृष्ठ, कागजात लेआउट, र फुटर।
नयाँ पार्सल गाइड थपियो ।
नयाँ अनुकूलन खण्ड थपियो , v4 को थिमिङ पृष्ठ प्रतिस्थापन गर्दै , Sass मा नयाँ विवरणहरू, विश्वव्यापी कन्फिगरेसन विकल्पहरू, रङ योजनाहरू, CSS चरहरू, र थप।
नयाँ फारम खण्डमा सबै फारम कागजातहरू पुन: संगठित गरियो , सामग्रीलाई थप केन्द्रित पृष्ठहरूमा विभाजन गर्नुहोस्।
त्यसै गरी, लेआउट खण्ड अपडेट गरियो , ग्रिड सामग्रीलाई अझ स्पष्ट रूपमा बाहिर निकाल्न।
"Navs" कम्पोनेन्ट पृष्ठलाई "Navs र ट्याबहरू" मा पुन: नामाकरण गरियो।
"चेकहरू" पृष्ठलाई "चेक र रेडियो" मा पुन: नामाकरण गरियो।
हाम्रो साइटहरू र कागजात संस्करणहरू वरिपरि जान सजिलो बनाउन navbar लाई पुन: डिजाइन गरियो र नयाँ subnav थपियो।
खोज क्षेत्रको लागि नयाँ किबोर्ड सर्टकट थपियो Ctrl + /:।

सास

अनावश्यक मानहरू हटाउन सजिलो बनाउन हामीले पूर्वनिर्धारित Sass नक्सा मर्जहरू खारेज गरेका छौं। दिमागमा राख्नुहोस् कि तपाईंले अब सास नक्सामा सबै मानहरू परिभाषित गर्नुपर्नेछ जस्तै $theme-colors। Sass नक्साहरूसँग कसरी व्यवहार गर्ने जाँच गर्नुहोस् ।
तोड्दैयो अब YIQ रङ स्पेससँग सम्बन्धित नभएको रूपमा प्रकार्य color-yiq()र सम्बन्धित चरहरूको नाम परिवर्तन गरियो। हेर्नुहोस् #30168।color-contrast()
- $yiq-contrasted-thresholdमा पुन: नामाकरण गरिएको छ $min-contrast-ratio।
- $yiq-text-darkर $yiq-text-lightक्रमशः र मा पुन: नामाकरण गरिएको $color-contrast-darkछ $color-contrast-light।
तोड्दैमिडिया क्वेरी mixins मापदण्डहरू थप तार्किक दृष्टिकोणको लागि परिवर्तन भएको छ।
- 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()प्रकार्यहरू । हेर्नुहोस् #२९०८३ ।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()र प्रकार्यहरू र 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अन्य सबै ब्रेकपोइन्टहरूमा कुनै परिवर्तनहरू छैनन्।
सुधारिएको नालीहरू। गटरहरू अब 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.cssbox-sizing: border-boxअब ग्लोबल बक्स साइजिङ रिसेट गर्नुको सट्टा स्तम्भमा मात्र लागू हुन्छ । यस तरिकाले, हाम्रो ग्रिड शैलीहरू हस्तक्षेप बिना धेरै ठाउँहरूमा प्रयोग गर्न सकिन्छ।
$enable-grid-classesअब उप्रान्त कन्टेनर वर्गहरूको उत्पादन असक्षम गर्दैन। हेर्नुहोस् #२९१४६।
make-colनिर्दिष्ट आकार बिना बराबर स्तम्भहरूमा पूर्वनिर्धारित रूपमा मिक्सिन अद्यावधिक गरियो ।

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

RFS अब पूर्वनिर्धारित रूपमा सक्षम छ। मिक्सिन प्रयोग गरीभ्युपोर्टको साथ मापनमाfont-size()स्वतः समायोजन गर्नेछयो सुविधा पहिले v4 सँग अप्ट-इन गरिएको थियो।font-size
तोड्दै$display-*हाम्रो चरहरू र $display-font-sizesSass नक्साको साथ बदल्नको लागि हाम्रो प्रदर्शन टाइपोग्राफीलाई ओभरहाल गरियो । $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कक्षा छोडियो । हेर्नुहोस् #२९१३५
तोड्दै .text-*उपयोगिताहरूले अब लिङ्कहरूमा होभर र फोकस राज्यहरू थप्दैनन्। .link-*यसको सट्टा सहायक कक्षाहरू प्रयोग गर्न सकिन्छ। हेर्नुहोस् #२९२६७
तोड्दै.text-justifyकक्षा छोडियो । हेर्नुहोस् #२९७९३
तोड्दै <hr>तत्वहरूले अब विशेषतालाई अझ राम्रो समर्थन गर्नको heightसट्टा प्रयोग गर्दछ। यसले बाक्लो डिभाइडरहरू (जस्तै, ) सिर्जना गर्न प्याडिङ उपयोगिताहरूको प्रयोगलाई पनि सक्षम बनाउँछ।bordersize<hr class="py-1">
पूर्वनिर्धारित तेर्सो रिसेट padding-leftगर्नुहोस् <ul>र <ol>ब्राउजर पूर्वनिर्धारितबाट 40pxतत्वहरूमा 2rem।
थपियो $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

एकॉर्डियन

नयाँ accordion कम्पोनेन्ट थपियो ।

अलर्टहरू

अलर्टहरूमा अब आइकनहरू सहित उदाहरणहरू छन् ।
<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-blockमा प्रयोग गर्नुको सट्टा .btn, आफ्नो बटनहरू र आवश्यकता अनुसार स्पेस गर्न .d-gridएक उपयोगिता लपेट्नुहोस्। .gap-*तिनीहरूमाथि अझ बढी नियन्त्रणको लागि उत्तरदायी कक्षाहरूमा स्विच गर्नुहोस्। केही उदाहरणका लागि कागजातहरू पढ्नुहोस्।
थप प्यारामिटर समर्थन गर्न हाम्रो button-variant()र mixins अद्यावधिक।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)

संक्षिप्त गर्नुहोस्

Accordions को लागि स्क्रोल एङ्करिङ हटाइयो।

ड्रपडाउनहरू

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

जम्बोट्रोन

तोड्दैजम्बोट्रोन कम्पोनेन्ट छोडियो किनकि यसलाई उपयोगिताहरूसँग नक्कल गर्न सकिन्छ। डेमोको लागि हाम्रो नयाँ Jumbotron उदाहरण हेर्नुहोस्।

सूची समूह

समूहहरूको सूचीमा नयाँ .list-group-numberedपरिमार्जनकर्ता थपियो ।

Navs र ट्याबहरू

, , , र कक्षामा नयाँ nullचर थपियो ।font-sizefont-weightcolor:hover color.nav-link

नवबारहरू

तोड्दैNavbars लाई अब भित्र कन्टेनर चाहिन्छ (स्पेसिङ आवश्यकताहरू र CSS आवश्यक पर्दा एकदम सरल बनाउन)।
तोड्दै.activeकक्षा अब s मा लागू गर्न सकिँदैन , .nav-itemयो सीधा s मा लागू गर्नुपर्छ .nav-link।

अफक्यानभास

नयाँ offcanvas कम्पोनेन्ट थपियो ।

पृष्ठांकन

पृष्ठांकन लिङ्कहरू अब अनुकूलन योग्य margin-leftछन् जुन एकअर्काबाट अलग हुँदा सबै कुनाहरूमा गतिशील रूपमा गोलाकार हुन्छन्।
transitionपृष्ठांकन लिङ्कहरूमा s थपियो ।

Popovers

तोड्दैहाम्रो पूर्वनिर्धारित पपओभर टेम्प्लेटमा पुन: नामाकरण .arrowगरियो ।.popover-arrow
whiteListमा विकल्प पुन: नामाकरण गरियो allowList।

स्पिनरहरू

स्पिनरहरू अब prefers-reduced-motion: reduceएनिमेसनहरू ढिलो गरेर सम्मान गर्छन्। हेर्नुहोस् #31882 ।
सुधारिएको स्पिनर ठाडो पङ्क्तिबद्धता।

टोस्टहरू

टोस्टहरू अब पोजिसनिङ युटिलिटीहरूको मद्दतले ए मा.toast-container राख्न सकिन्छ ।
पूर्वनिर्धारित टोस्ट अवधि 5 सेकेन्डमा परिवर्तन गरियो।
टोस्टहरूबाट हटाइयो र कार्यहरू overflow: hiddenसहित उचित border-radiuss को साथ प्रतिस्थापित गरियो।calc()

टूलटिप्स

तोड्दैहाम्रो पूर्वनिर्धारित टूलटिप टेम्प्लेटमा पुन: नामाकरण .arrowगरियो ।.tooltip-arrow
तोड्दैको लागि पूर्वनिर्धारित मान popper तत्वहरूको राम्रो स्थानको लागि 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 ग्रिड र flexbox लेआउटहरूको लागि .d-gridउपयोगिताहरू र नयाँ gapउपयोगिताहरू ( ) प्रदर्शन गर्न थपियो ।.gap
तोड्दैहटाइयो .rounded-smर rounded-lg, र कक्षाको नयाँ स्केल पेश गर्यो, .rounded-0मा .rounded-3। हेर्नुहोस् #३१६८७ ।
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.scssगरियो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 प्लगइनहरूका लागि डाटा विशेषताहरू अब तेस्रो पक्षहरू र तपाईंको आफ्नै कोडबाट बुटस्ट्र्याप कार्यात्मकता छुट्याउन मद्दतको लागि नेमस्पेस गरिएका छन्। उदाहरण को लागी, हामी 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 तत्वहरूको राम्रो स्थानको लागि fallbackPlacementsपरिवर्तन गरिएको छ । ड्रपडाउन, पपओभर र टूलटिपहरूमा लागू हुन्छ।['top', 'right', 'bottom', 'left']
_getInstance()सार्वजनिक स्थिर विधिहरू जस्तै → बाट अन्डरस्कोर हटाइयो getInstance()।