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

निर्भरताहरू

• jQuery छोडियो।
• Popper v1.x बाट Popper v2.x मा अपग्रेड गरियो।
• Libsass लाई हाम्रो Sass कम्पाइलरको रूपमा Dart Sass ले बदलियो Libsass लाई बहिष्कृत गरिएको थियो।
• हाम्रो कागजात निर्माणको लागि जेकिलबाट ह्युगोमा बसाइयो

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

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

---

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

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

सास

• अनावश्यक मानहरू हटाउन सजिलो बनाउन हामीले पूर्वनिर्धारित Sass नक्सा मर्जहरू खारेज गरेका छौं। ध्यानमा राख्नुहोस् कि तपाईंले अब सास नक्सामा सबै मानहरू परिभाषित गर्नुपर्नेछ जस्तै $theme-colors। Sass नक्साहरूसँग कसरी व्यवहार गर्ने जाँच गर्नुहोस् ।

• तोड्दै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।

• तोड्दैमिडिया क्वेरी 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()र केवल २ प्यारामिटरहरू स्वीकार गर्दछ: $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-checkअहिले छ .form-check।
  • .custom-check.custom-switchअहिले छ .form-check.form-switch।
  • .custom-selectअहिले छ .form-select।
  • .custom-fileर .form-fileमाथि अनुकूलन शैलीहरू द्वारा प्रतिस्थापित गरिएको छ .form-control।
  • .custom-rangeअहिले छ .form-range।
  • छाडेको स्वदेशी .form-control-fileर .form-control-range।

• तोड्दैखस्यो .input-group-appendर .input-group-prepend। तपाईं अब बटनहरू थप्न सक्नुहुन्छ र .input-group-textइनपुट समूहहरूको प्रत्यक्ष बच्चाहरूको रूपमा।

• प्रमाणिकरण प्रतिक्रिया बगको साथ इनपुट समूहमा लामो समयदेखि छुटेको सीमाना त्रिज्या अन्ततः .has-validationप्रमाणीकरणको साथ इनपुट समूहहरूमा अतिरिक्त वर्ग थपेर निश्चित गरिएको छ ।

• तोड्दै हाम्रो ग्रिड प्रणालीको लागि फारम-विशिष्ट लेआउट कक्षाहरू छोडियो। .form-group, .form-row, वा को सट्टा हाम्रो ग्रिड र उपयोगिताहरू प्रयोग गर्नुहोस् .form-inline।

• तोड्दैफारम लेबलहरू अब आवश्यक .form-labelछ।

• तोड्दै .form-textअब सेट गर्दैन display, तपाईंलाई HTML तत्व परिवर्तन गरेर आफ्नो इच्छा अनुसार इनलाइन वा ब्लक मद्दत पाठ सिर्जना गर्न अनुमति दिन्छ।

• प्रमाणीकरण आइकनहरू अब <select>s सँग लागू हुँदैनन् multiple।

• scss/forms/इनपुट समूह शैलीहरू सहित अन्तर्गत स्रोत सास फाइलहरू पुन: व्यवस्थित गरियो।

---

अवयवहरू

• अलर्टहरू, ब्रेडक्रम्बहरू, कार्डहरू, ड्रपडाउनहरू, सूची समूहहरू, मोडलहरू, पपओभरहरू, र टूलटिपहरूका लागि एकीकृत मानहरू हाम्रो चरमा paddingआधारित हुन । हेर्नुहोस् #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"एट्रिब्यूट सेट हुन्छ जब ड्रपडाउनको स्थिति स्थिर हुन्छ र data-bs-popper="none"जब ड्रपडाउन नेभबारमा हुन्छ। यो हाम्रो JavaScript द्वारा थपिएको छ र हामीलाई Popper को स्थितिमा हस्तक्षेप नगरी अनुकूलन स्थिति शैलीहरू प्रयोग गर्न मद्दत गर्दछ।

• तोड्दैनेटिभ पोपर flipकन्फिगरेसनको पक्षमा ड्रपडाउन प्लगइनको लागि ड्रप गरिएको विकल्प। तपाईं अब फ्लिप परिमार्जनकमा fallbackPlacementsविकल्पको लागि खाली एरे पास गरेर फ्लिपिङ व्यवहार असक्षम गर्न सक्नुहुन्छ।

• ड्रपडाउन मेनुहरू अब स्वत: बन्द व्यवहारautoClose ह्यान्डल गर्न नयाँ विकल्पको साथ क्लिक गर्न सकिन्छ । तपाइँ यसलाई अन्तरक्रियात्मक बनाउन ड्रपडाउन मेनु भित्र वा बाहिर क्लिक स्वीकार गर्न यो विकल्प प्रयोग गर्न सक्नुहुन्छ।

• ड्रपडाउनहरूले अब .dropdown-items मा बेरिएको s लाई समर्थन <li>गर्दछ।

जम्बोट्रोन

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

सूची समूह

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

Navs र ट्याबहरू

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

नवबारहरू

• तोड्दैNavbars लाई अब भित्र कन्टेनर चाहिन्छ (स्पेसिङ आवश्यकताहरू र CSS आवश्यक पर्दा एकदम सरल बनाउन)।

अफक्यानभास

• नयाँ 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 चयनकर्ता पास गर्न सक्नुहुन्छ:

  कापी

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

• popperConfigबुटस्ट्र्यापको पूर्वनिर्धारित पप्पर कन्फिगरेसनलाई तर्कको रूपमा स्वीकार गर्ने प्रकार्यको रूपमा पास गर्न सकिन्छ, ताकि तपाईँले यो पूर्वनिर्धारित कन्फिगरेसनलाई आफ्नो तरिकामा मर्ज गर्न सक्नुहुन्छ। ड्रपडाउन, पपओभर र टूलटिपहरूमा लागू हुन्छ।

• को लागि पूर्वनिर्धारित मान Popper तत्वहरूको राम्रो स्थानको लागि fallbackPlacementsपरिवर्तन गरिएको छ । ड्रपडाउन, पपओभर र टूलटिपहरूमा लागू हुन्छ।['top', 'right', 'bottom', 'left']

• _getInstance()सार्वजनिक स्थिर विधिहरू जस्तै → बाट अन्डरस्कोर हटाइयो getInstance()।