v5 मध्ये प्रवासः

आश्रयाः

• jQuery छोड़ा।
• Popper v1.x तः Popper v2.x मध्ये उन्नतीकरणं कृतम् ।
• Libsass इत्यस्य स्थाने Dart Sass इत्यनेन प्रतिस्थापितम् यतः अस्माकं Sass संकलकः दत्तः Libsass अप्रचलितः आसीत् ।
• अस्माकं दस्तावेजनिर्माणार्थं Jekyll तः Hugo -नगरं प्रति प्रवासितम्

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

• Internet Explorer 10 तथा 11 पातितम्
• Microsoft Edge < 16 (Legacy Edge) पातितम् ।
• Firefox < 60 त्यक्तम्
• गिरा सफारी < 12
• iOS सफारी < 12 छोड़ा
• गिरा दिया क्रोम < 60

---

दस्तावेजीकरणं परिवर्तते

• पुनः डिजाइनं कृतम् मुखपृष्ठं, docs विन्यासः, पादलेखः च ।
• नूतनं Parcel guide योजितम् .
• नूतनं Customize विभागं योजितम् , v4 इत्यस्य Theming पृष्ठस्य स्थाने , Sass, वैश्विकविन्यासविकल्पाः, वर्णयोजनाः, CSS चराः, इत्यादिषु नूतनविवरणैः सह।
• सर्वाणि प्रपत्रदस्तावेजीकरणं नूतनप्रपत्रविभागे पुनर्गठितम् , सामग्रीं अधिककेन्द्रितपृष्ठेषु विभज्य ।
• तथैव, Layout विभागं अद्यतनं कृतम् , ग्रिड् सामग्रीं अधिकस्पष्टतया मांसं कर्तुं ।
• “Navs” घटकपृष्ठस्य नाम “Navs & Tabs” इति परिवर्तितम् ।
• “Checks” पृष्ठस्य नाम “Checks & radios” इति परिवर्तितम् ।
• navbar इत्यस्य पुनः परिकल्पनं कृत्वा नूतनं subnav योजितवान् यत् अस्माकं साइट्-मध्ये docs-संस्करणं च परितः गन्तुं सुलभं भवति ।
• अन्वेषणक्षेत्रस्य कृते नूतनं कीबोर्ड शॉर्टकट् योजितम्: Ctrl + /.

सस्स

• अनावश्यकमूल्यानां निष्कासनं सुलभं कर्तुं वयं पूर्वनिर्धारितं Sass मानचित्रविलयनं खादितवन्तः । मनसि धारयतु भवद्भिः इदानीं Sass maps इत्यत्र सर्वाणि मूल्यानि परिभाषितव्यानि यथा $theme-colors. Sass maps इत्यनेन सह कथं व्यवहारः कर्तव्यः इति पश्यन्तु .

• Breaking Renamed color-yiq()function and related variables to color-contrast()as इदं YIQ colorspace इत्यनेन सह सम्बद्धं नास्ति । देखें # 30168।

  • $yiq-contrasted-thresholdइति नामान्तरं कृत्वा $min-contrast-ratio.
  • $yiq-text-darkतथा $yiq-text-lightक्रमशः नाम परिवर्तित होते हैं $color-contrast-darkतथा $color-contrast-light.

• Breaking Media query mixins पैरामीटर्स् अधिकतार्किकदृष्टिकोणस्य कृते परिवर्तिताः सन्ति ।

  • media-breakpoint-down()अग्रिमस्य breakpoint इत्यस्य स्थाने एव breakpoint इत्यस्य उपयोगं करोति (उदा., targets viewports smaller than media-breakpoint-down(lg)इत्यस्य स्थाने ).media-breakpoint-down(md)lg
  • तथैव द्वितीयः पैरामीटर् in media-breakpoint-between()अपि अग्रिमस्य breakpoint इत्यस्य स्थाने breakpoint इत्यस्य एव उपयोगं करोति (उदा . targets viewports between and media-between(sm, lg)इत्यस्य स्थाने ) ।media-breakpoint-between(sm, md)smlg

• Breaking मुद्रणशैल्याः $enable-print-stylesचर च निष्कासिताः । मुद्रणप्रदर्शनवर्गाः अद्यापि परितः सन्ति । देखें # 28339 .

• Breaking Dropped color(), theme-color(), तथा gray()चर के पक्ष में कार्य करते हैं। देखें # 29083 .

• Breaking Renamed theme-color-level()function to color-level()इदानीं च केवलं वर्णानाम् स्थाने यत्किमपि वर्णं स्वीकुर्वति $theme-color। See #29083 Watch out: color-level() was later on dropped in v5.0.0-alpha3.

• Breaking Renamed $enable-prefers-reduced-motion-media-queryand $enable-pointer-cursor-for-buttonsto $enable-reduced-motionand $enable-button-pointersfor संक्षेपार्थम्।

• Breaking मिक्सिन को हटा दिया bg-gradient-variant()। .bg-gradientउत्पन्नवर्गाणां स्थाने एलिमेण्ट्स् मध्ये ग्रेडिएण्ट् योजयितुं क्लास् इत्यस्य उपयोगं कुर्वन्तु .bg-gradient-*।

• Breaking पूर्वं अप्रचलितानि mixins निष्कासितानि:

  • 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()

• Breaking Sass इत्यस्य स्वस्य color scaling function इत्यनेन सह टकरावं न कर्तुं Renamed scale-color()function to इति ।shift-color()

• box-shadowmixins इदानीं nullमूल्यानि अनुमन्यन्ते तथा च बहुविधतर्कात् पतन्ति none। देखें # 30394 .

• इदानीं border-radius()mixin इत्यस्य पूर्वनिर्धारितं मूल्यम् अस्ति ।

रंग प्रणाली

• वर्णव्यवस्था या नूतनवर्णव्यवस्थायाः पक्षे कार्यं कृतवती color-level(), निष्कासिता च। $theme-color-intervalअस्माकं कोडबेस् मध्ये सर्वाणि lighten()तथा darken()कार्याणि प्रतिस्थापितानि सन्ति tint-color()तथा च shade-color(). एते कार्याणि नियतमात्रायां लघुत्वं परिवर्तयितुं न अपितु श्वेतेन कृष्णेन वा वर्णं मिश्रयिष्यन्ति । तस्य shift-color()भारः पैरामीटर् सकारात्मकः नकारात्मकः वा इति अवलम्ब्य कस्यचित् वर्णस्य टिण्ट् वा छायाकरणं वा करिष्यति । अधिकविवरणार्थं #30622 पश्यन्तु।

• प्रत्येकं वर्णस्य कृते नूतनानि टिण्ट्-छायाः च योजिताः, प्रत्येकस्य आधार-रङ्गस्य कृते नव पृथक्-पृथक् वर्णाः प्रदातुं, नूतन-Sass-चर-रूपेण ।

• वर्णविपरीतता में सुधार। 3:1 तः 4.5:1 पर्यन्तं बम्पड् वर्णविपरीततानुपातः तथा च WCAG 2.1 AA विपरीततां सुनिश्चित्य नीले, हरिते, सियान, गुलाबी च वर्णानाम् अद्यतनीकरणं कृतम् । अपि च अस्माकं वर्णविपरीतवर्णं $gray-900परिवर्तितम् $black.

• tint-color()अस्माकं वर्णप्रणाल्याः समर्थनार्थं वयं नूतनानि कस्टम् तथा च कार्याणि योजितवन्तः shade-color()यत् अस्माकं वर्णानाम् समुचितरूपेण मिश्रणं भवति ।

ग्रिड अपडेट

• नयाँ ब्रेकपॉइंट ! xxlकृते अपि च उपरि नूतनं breakpoint योजितम् 1400px। अन्येषु सर्वेषु भङ्गबिन्दुषु परिवर्तनं नास्ति।

• सुधारित नाली। नाली इदानीं rems मध्ये सेट् भवति, तथा च v4 ( 1.5rem, or about 24px, down from 30px) इत्यस्मात् संकीर्णतरम् अस्ति । एतेन अस्माकं जालप्रणाल्याः नालिकाः अस्माकं अन्तराल-उपयोगिताभिः सह संरेखिताः भवन्ति ।

  • क्षैतिज/ऊर्ध्वाधरगटर, क्षैतिज गटर, ऊर्ध्वाधर नाली को नियंत्रित करने के लिए नया गटर वर्ग ( .g-*, .gx-*, और ) जोड़ा गया।.gy-*
  • Breaking नवीन नाली उपयोगिताओं के साथ मेल खाने के लिए पुनर्नाम .no-guttersकिया गया।.g-0

• स्तम्भाः पुनः न प्रयुक्ताः, अतः तत् व्यवहारं पुनः स्थापयितुं position: relativeभवद्भिः केषुचित् तत्त्वेषु योजयितुं शक्यते ।.position-relative

• Breaking अनेकाः .order-*वर्गाः पातिताः ये प्रायः अप्रयुक्ताः भवन्ति स्म। वयम् अधुना केवलं out of the box .order-1इति प्रदामः।.order-5

• Breaking घटकं पातितम् .mediaयतः तस्य उपयोगिताभिः सह सुलभतया प्रतिकृतिः कर्तुं शक्यते । उदाहरणार्थं #28265 तथा flex utilities पृष्ठं पश्यन्तु .

• bootstrap-grid.cssइदानीं भङ्गःbox-sizing: border-box वैश्विकपेटी-आकारं पुनः सेट् कर्तुं स्थाने केवलं स्तम्भे एव प्रवर्तते । एवं प्रकारेण अस्माकं जालशैल्याः अधिकस्थानेषु बाधां विना उपयोक्तुं शक्यन्ते ।

• $enable-grid-classesन पुनः पात्रवर्गाणां जननं निष्क्रियं करोति । देखें # 29146।

• make-colनिर्दिष्टाकारं विना समानस्तम्भेषु पूर्वनिर्धारितरूपेण mixin अद्यतनं कृतम् ।

सामग्री, रिबूट इत्यादयः

• RFS इदानीं पूर्वनिर्धारितरूपेण सक्षमम् अस्ति । mixin इत्यस्य उपयोगेन शीर्षकाणिfont-size()स्वयमेवfont-sizeviewport इत्यनेन सह तेषां to scale समायोजयिष्यन्ति । एतत् विशेषता पूर्वं v4 इत्यनेन सह opt-in आसीत् ।

• Breaking$display-* अस्माकं चरानाम् स्थाने $display-font-sizesSass मानचित्रेण च अस्माकं प्रदर्शनमुद्रणलेखनं ओवरहाल् कृतवान् । $display-*-weightएकस्य कृते व्यक्तिगतचराः अपि निष्कासिताः $display-font-weightसमायोजिताः च font-sizes।

• द्वौ नूतनौ शीर्षकाकारौ योजितः .display-*, .display-5तथा च .display-6.

• लिङ्कानि पूर्वनिर्धारितरूपेण रेखांकितानि भवन्ति (न केवलं होवर इत्यत्र), यावत् ते विशिष्टघटकानाम् भागः न भवन्ति ।

• तेषां शैलीं ताजगीं कर्तुं पुनः परिकल्पितानि सारणीनि तथा च शैलीकरणस्य अधिकनियन्त्रणार्थं CSS चरैः सह पुनर्निर्माणं कृतम् ।

• Breaking Nested tables इत्येतत् इतः परं शैल्याः उत्तराधिकारं न प्राप्नुवन्ति ।

• भङ्गः .thead-light तथा च सर्वेषां सारणीतत्त्वानां ( , , , , तथा ) कृते उपयोक्तुं शक्यमाणानां वेरिएण्ट्वर्गाणां .thead-darkपक्षे पातिताः भवन्ति ।.table-*theadtbodytfoottrthtd

• Breaking mixin इत्यस्य table-row-variant()नाम परिवर्तितं भवति table-variant()तथा च केवलं 2 पैरामीटर् स्वीकुर्वति: $color(color name) तथा $value(color code) । सीमावर्णस्य उच्चारणवर्णस्य च गणना स्वयमेव सारणीकारकचरानाम् आधारेण भवति ।

• तालिका कोशिका गद्दी चर को -yतथा में विभाजित करें -x।

• भङ्गः पतितः .pre-scrollableवर्गः। देखें # 29135

• ब्रेकिंग् .text-* यूटिलिटीज्स् इतः परं लिङ्क् मध्ये होवर तथा फोकस स्टेट्स् न योजयन्ति। .link-*तस्य स्थाने helper classes इत्यस्य उपयोगः कर्तुं शक्यते । देखें # 29267

• भङ्गः पतितः .text-justifyवर्गः। देखें # 29793

• भङ्गतत्त्वानि <hr> इदानीं विशेषतायाः उत्तमसमर्थनार्थं heightस्थाने उपयुज्यन्ते । एतेन स्थूलतरविभाजकानाम् (उदा., ) निर्माणार्थं गद्दी-उपयोगितायाः उपयोगः अपि सक्षमः भवति ।bordersize<hr class="py-1">

• पूर्वनिर्धारितं क्षैतिजं padding-leftचालू <ul>तथा च तत्त्वानि <ol>ब्राउजर् पूर्वनिर्धारितात् 40px.2rem

• Added $enable-smooth-scroll, यत् वैश्विकरूपेण प्रवर्तते — माध्यमप्रश्नद्वारा scroll-behavior: smoothन्यूनीकृतगतिं याचन्ते उपयोक्तारः व्यतिरिक्तम् । देखें # 31877prefers-reduced-motion

आर टी एल

• क्षैतिजदिशाविशिष्टचराः, उपयोगिताः, मिक्सिन् च सर्वेषां पुनर्नामकरणं कृतम् अस्ति यत् flexbox विन्यासेषु दृश्यमानानां इव तार्किकगुणानां उपयोगाय—उदा . , startतथा च तथा च endस्थानेleftright

रूपाणि

• नवीन प्लवमान रूप जोड़ा! वयं Floating labels उदाहरणं पूर्णतया समर्थितरूपघटकानाम् कृते प्रचारितवन्तः। नूतनं Floating labels पृष्ठं पश्यन्तु ।

• Breaking समेकित देशी एवं कस्टम रूप तत्व। चेकबॉक्स, रेडियो, सेलेक्ट्स्, अन्ये च निवेशाः येषु v4 मध्ये नेटिव् तथा कस्टम् क्लास् आसीत्, तेषां समेकनं कृतम् अस्ति । अधुना अस्माकं प्रायः सर्वे form elements पूर्णतया custom भवन्ति, अधिकांशः custom 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च इनपुट् समूहानां प्रत्यक्षबालरूपेण ।

• सत्यापनप्रतिक्रियादोषयुक्ते निवेशसमूहे दीर्घकालीनः Missing सीमात्रिज्या.has-validation अन्ततः प्रमाणीकरणसहितनिवेशसमूहेषु अतिरिक्तवर्गं योजयित्वा निराकृता भवति

• Breaking अस्माकं जालप्रणाल्याः कृते रूपविशिष्टानि विन्यासवर्गाणि त्यक्तवन्तः । .form-group, .form-row, अथवा इत्यस्य स्थाने अस्माकं जालस्य उपयोगितानां च उपयोगं कुर्वन्तु .form-inline।

• Breaking Form लेबल्स् इदानीं आवश्यकम् अस्ति .form-label.

• Breaking .form-text no longer sets display, केवलं HTML तत्त्वं परिवर्त्य यथा इच्छति तथा inline अथवा block help text निर्मातुं शक्नोति ।

• प्रमाणीकरणचिह्नानि <select>s with multiple.

• , इत्यस्य अन्तर्गतं स्रोत Sass सञ्चिकाः पुनः व्यवस्थिताः scss/forms/, निवेशसमूहशैल्याः सहितम् ।

---

घटकाः

• अस्माकं चरस्य आधारेण भवितुं अलर्ट्स्, ब्रेडक्रम्ब्स्, कार्ड्स्, ड्रॉप्डाउन्स् padding, सूचीसमूहाः, मोडाल्स्, पोपोवर्स्, टूल्टिप्स च कृते एकीकृतमूल्यानि । देखें # 30564 .$spacer

अकॉर्डियन

• नवीनं अकॉर्डियन घटकं योजितम् .

अलर्ट्स्

• अधुना अलर्ट्स् मध्ये चिह्नैः सह उदाहरणानि सन्ति .

• <hr>प्रत्येकस्मिन् अलर्ट् मध्ये s कृते कस्टम् शैल्याः निष्कासिताः यतः ते पूर्वमेव उपयुञ्जते currentColor.

बैज

• Breaking.badge-* पृष्ठभूमि-उपयोगितायाः कृते सर्वाणि वर्णवर्गाणि पातितानि (उदा., इत्यस्य .bg-primaryस्थाने उपयोगः .badge-primary) ।

• Breaking Dropped —तस्य स्थाने उपयोगितायाः .badge-pillउपयोगं कुर्वन्तु ।.rounded-pill

• Breaking Removed hover and focus styles for <a>and <button>एलिमेण्ट्स् इति ।

• / तः .25em/ पर्यन्तं बिल्लानां कृते पूर्वनिर्धारितपैडिंग् वर्धितम् ।.5em.35em.65em

ब्रेडक्रम्ब्स्

• padding, background-color, तथा border-radius.

• --bs-breadcrumb-dividerCSS पुनः संकलनस्य आवश्यकतां विना सुलभ-अनुकूलनार्थं नूतनं CSS कस्टम् गुणं योजितम् ।

बटन्स्

• Breaking Toggle buttons , चेकबॉक्स अथवा रेडियो इत्यनेन सह, जावास्क्रिप्ट् इत्यस्य आवश्यकता नास्ति तथा च नूतनं मार्कअपं भवति । अस्माकं कृते wrapping element इत्यस्य आवश्यकता नास्ति, , इत्यत्र योजयन्तु , तथा .btn-checkच , इत्यस्य उपरि केनचित् वर्गेण <input>सह युग्मीकरणं कुर्वन्तु । देखें # 30650 . अस्य कृते docs अस्माकं Buttons पृष्ठात् नूतन Forms विभागे गतानि सन्ति ।.btn<label>

• Breaking उपयोगितानां कृते पातितम् । .btn-block.btn-blockon the इत्यस्य उपयोगस्य स्थाने , आवश्यकतानुसारं स्थानं दातुं स्वस्य बटन्स् इत्यनेन सह .btnवेष्टयन्तु । तेषु अधिकं नियन्त्रणार्थं प्रतिक्रियाशीलवर्गेषु गच्छन्तु। केषाञ्चन उदाहरणानां कृते docs पठन्तु।.d-grid.gap-*

• अतिरिक्तमापदण्डानां समर्थनार्थं अस्माकं button-variant()तथा button-outline-variant()mixins अद्यतनं कृतम्।

• होवर तथा सक्रिय अवस्थाओं पर वर्धित विपरीतता सुनिश्चित करने के लिए अद्यतन बटन।

• अक्षम बटन्स् इदानीं pointer-events: none;.

कार्ड

• भङ्गः.card-deck अस्माकं जालस्य पक्षे पतितः । स्तम्भवर्गेषु स्वपत्तेः लपेटयन्तु तथा च .row-cols-*कार्डडेक् पुनः निर्मातुं मूलपात्रं योजयन्तु (किन्तु प्रतिक्रियाशीलसंरेखणस्य उपरि अधिकं नियन्त्रणं कृत्वा)।

• Breaking चिनाई .card-columnsके पक्ष में गिरा। देखें # 28922 .

• Breaking.card आधारितं accordion इत्यस्य स्थाने नूतनेन Accordion घटकेन प्रतिस्थापितम् |

हिंडोला

• कृष्णपाठस्य , नियन्त्रणानां, सूचकानाम् च कृते नूतनं .carousel-darkरूपान्तरं योजितम् (लघुपृष्ठभूमिषु महान्) ।

• हिंडोला नियन्त्रणानां कृते chevron चिह्नानि Bootstrap Icons इत्यस्मात् नूतनैः SVGs इत्यनेन प्रतिस्थापितानि |

बटन बंद करें

• Breaking न्यूनसामान्यनामस्य .closeकृते पुनर्नामकरणं कृतम् .btn-close।

• Close बटन्स् इदानीं HTML मध्ये background-imagea इत्यस्य स्थाने a (embedded SVG) इत्यस्य उपयोगं ×कुर्वन्ति, येन भवतः मार्कअप स्पर्शस्य आवश्यकतां विना सुलभतरं अनुकूलनं भवति ।

• .btn-close-whiteनूतनं रूपान्तरं योजितम् यत् filter: invert(1)गहरे पृष्ठभूमिविरुद्धं उच्चतरविपरीतनिवृत्तिचिह्नानि सक्षमीकरणाय उपयुज्यते।

संश्यान

• अकॉर्डियनस्य कृते स्क्रॉल एंकरिंग् निष्कासितम्।

ड्रॉपडाउन्स्

• .dropdown-menu-darkऑन-डिमाण्ड् डार्क ड्रॉप्डाउन्स् कृते नूतनं वेरिएण्ट् तथा सम्बद्धचरं योजितम् ।

• कृते नूतनं चरं योजितम् $dropdown-padding-x।

• उन्नत विपरीततायाः कृते ड्रॉपडाउन विभाजकं अन्धकारं कृतवान् ।

• Breaking इदानीं ड्रॉप्डाउन् कृते सर्वाणि इवेण्ट्स् ड्रॉप् डाउन टॉग्ल् बटन् मध्ये ट्रिगर भवन्ति ततः मूल एलिमेण्ट् यावत् बबल् भवन्ति ।

• इदानीं ड्रॉप्डाउन् मेन्यू मध्ये एकं data-bs-popper="static"एट्रिब्यूट् सेट् भवति यदा ड्रॉप् डाउन् इत्यस्य स्थितिः स्थिरः भवति तथा च data-bs-popper="none"यदा ड्रॉप् डाउन् नवबार मध्ये भवति । इदं अस्माकं जावास्क्रिप्ट् द्वारा योजितं भवति तथा च Popper इत्यस्य स्थितिनिर्धारणे बाधां विना कस्टम् स्थितिशैल्याः उपयोगं कर्तुं अस्मान् साहाय्यं करोति ।

• Breaking देशी Popper flipविन्यासस्य पक्षे ड्रॉपडाउन प्लगिन् कृते विकल्पः त्यक्तः। इदानीं भवन्तः flip modifier fallbackPlacementsमध्ये विकल्पस्य कृते रिक्तं सरणीं पारयित्वा flipping व्यवहारं निष्क्रियं कर्तुं शक्नुवन्ति ।

• इदानीं auto close व्यवहारंautoClose नियन्त्रयितुं नूतनविकल्पेन सह ड्रॉपडाउन मेनू क्लिक् कर्तुं शक्यते | भवन्तः एतस्य विकल्पस्य उपयोगेन ड्रॉप्-डाउन-मेनू-अन्तर्गतं वा बहिः वा क्लिक्-स्वीकारं कृत्वा तत् अन्तरक्रियाशीलं कर्तुं शक्नुवन्ति ।

• ड्रॉपडाउन्स् इदानीं .dropdown-items इत्यनेन वेष्टितं s समर्थयन्ति <li>।

जम्बोट्रोन्

• Breaking जम्बोट्रॉन् घटकं पातितम् यतः तस्य प्रतिकृतिः उपयोगिताभिः सह कर्तुं शक्यते । डेमो कृते अस्माकं नूतनं Jumbotron उदाहरणं पश्यन्तु।

सूची समूह

• सूचीसमूहेषु नूतनं .list-group-numberedपरिवर्तकं योजितम् ।

नवस् तथा टैब्स

• , , , तथा वर्गे नूतनानि nullचराः योजिताः ।font-sizefont-weightcolor:hover color.nav-link

नवबराः

• Navbars भङ्गयितुं इदानीं अन्तः एकं पात्रं आवश्यकं भवति (अन्तरालस्य आवश्यकतां घोररूपेण सरलीकर्तुं तथा च CSS आवश्यकम्) ।

ऑफकैनवास

• नूतनं offcanvas घटकं योजितम् .

पृष्ठकरणम्

• पृष्ठकरणलिङ्केषु इदानीं अनुकूलनीयानि margin-leftसन्ति ये परस्परं पृथक् कृत्वा सर्वेषु कोणेषु गतिशीलरूपेण गोलरूपेण भवन्ति ।

• पृष्ठलेखनलिङ्केषु transitions योजितम्।

पोपोवर्स इति

• Breaking अस्माकं पूर्वनिर्धारित popover टेम्पलेट् मध्ये Renamed .arrowto इति ।.popover-arrow

• नामकरणं whiteListविकल्पं कृत्वा allowList.

स्पिनरः

• स्पिनर् इदानीं prefers-reduced-motion: reduceएनिमेशनं मन्दं कृत्वा सम्मानं कुर्वन्ति। देखें # 31882 .

• स्पिनर ऊर्ध्वाधर संरेखण में सुधार।

टोस्ट्

• टोस्ट् इदानीं स्थितिकरणस्य उपयोगितानां.toast-container साहाय्येन एकस्मिन् स्थापयितुं शक्यते |

• पूर्वनिर्धारित टोस्ट अवधि 5 सेकण्ड में परिवर्तित।

• overflow: hiddenटोस्ट् तः निष्कास्य कार्यैः सह सम्यक् s border-radiusप्रतिस्थापितम् calc()।

टूलटिप्स

• Breaking अस्माकं पूर्वनिर्धारितं tooltip टेम्पलेट् मध्ये Renamed .arrowto इति ।.tooltip-arrow

• Breaking पोपर-तत्त्वानां उत्तम-स्थापनार्थं the कृते पूर्वनिर्धारितं मूल्यं fallbackPlacementsपरिवर्तितम् अस्ति ।['top', 'right', 'bottom', 'left']

• Breaking Renamed whiteListविकल्पः allowList.

उपयोगिताएँ

• Breaking RTL समर्थनस्य योजनेन सह दिशात्मकनामानां स्थाने तार्किकगुणनामानां उपयोगाय अनेकानाम् उपयोगितानां नामकरणं कृतम्:

  • पुनर्नामकरणं .left-*कृत्वा .right-*to .start-*and .end-*.
  • पुनर्नामकरणं .float-leftकृत्वा .float-rightto .float-startand .float-end.
  • पुनर्नामकरणं .border-leftकृत्वा .border-rightto .border-startand .border-end.
  • पुनर्नामकरणं .rounded-leftकृत्वा .rounded-rightto .rounded-startand .rounded-end.
  • पुनर्नामकरणं .ml-*कृत्वा .mr-*to .ms-*and .me-*.
  • पुनर्नामकरणं .pl-*कृत्वा .pr-*to .ps-*and .pe-*.
  • पुनर्नामकरणं .text-leftकृत्वा .text-rightto .text-startand .text-end.

• Breaking पूर्वनिर्धारितरूपेण ऋणात्मकमार्जिनं अक्षमम्।

• 's पृष्ठभूमिं अतिरिक्ततत्त्वेषु .bg-bodyशीघ्रं सेट् कर्तुं नूतनवर्गः योजितः ।<body>

• , , , तथा . _ _ मूल्येषु प्रत्येकस्य गुणस्य कृते , , तथा च अन्तर्भवति ।toprightbottomleft050%100%

• क्षैतिजरूपेण अथवा ऊर्ध्वाधररूपेण निरपेक्ष/नियतस्थानिततत्त्वेषु केन्द्रीकृत्य नवीनाः .translate-middle-x& उपयोगिताः योजिताः।.translate-middle-y

• नूतनानि border-widthउपयोगितानि योजिताः .

• Breaking.text-monospace नाम परिवर्तित .font-monospace.

• Breaking Removed .text-hideयतः एषा पाठस्य गोपनार्थं पुरातनपद्धतिः अस्ति यस्य उपयोगः इतः परं न कर्तव्यः।

• .fs-*उपयोगितानां कृते उपयोगितानि योजितानि (RFS सक्षमेन font-sizeसह)। एते HTML इत्यस्य पूर्वनिर्धारितशीर्षकाणां (1-6, बृहत्तः लघुपर्यन्तं) समानं स्केलम् उपयुञ्जते, तथा च Sass map मार्गेण परिवर्तयितुं शक्यते ।

• Breaking संक्षिप्तता एवं स्थिरता के .font-weight-*रूप में उपयोगिताओं को पुनर्नामित किया गया।.fw-*

• Breaking संक्षिप्तता एवं स्थिरता के .font-style-*रूप में उपयोगिताओं को पुनर्नामित किया गया।.fst-*

• CSS Grid तथा flexbox लेआउट् कृते उपयोगितानां तथा नूतनानां उपयोगितानां ( ) .d-gridप्रदर्शयितुं योजितम् ।gap.gap

• Breaking Removed .rounded-smand rounded-lg, तथा वर्गानां नूतनं स्केलम् प्रवर्तयत्, .rounded-0to .rounded-3. देखें # 31687 .

• नवीन line-heightउपयोगिताएँ योजित: .lh-1, .lh-sm, .lh-baseतथा .lh-lg. अत्र पश्यन्तु .

• .d-noneअन्येषां प्रदर्शन-उपयोगितायाः अपेक्षया अधिकं भारं दातुं अस्माकं CSS मध्ये उपयोगितायाः स्थानान्तरितम् ।

• सहायकं विस्तारितवान् .visually-hidden-focusableपात्रेषु अपि कार्यं कर्तुं, उपयुज्य :focus-within.

सहायकाः

• Breaking Responsive embed helpers इत्यस्य नाम परिवर्तितं नूतनवर्गनामसुधारितव्यवहारयुक्तैः ratio helpers इति कृत्वा, तथैव सहायकं CSS चरम्

  • वर्गाणां नाम परिवर्तनं byकृत्वा xआस्पेक्ट रेश्यो मध्ये परिवर्तनं कृतम् अस्ति । यथा, .ratio-16by9इदानीं अस्ति .ratio-16x9.
  • वयं .embed-responsive-itemand element group selector इत्येतत् सरलतरस्य selector इत्यस्य पक्षे त्यक्तवन्तः .ratio > *। अधिकं वर्गस्य आवश्यकता नास्ति, तथा च ratio helper इदानीं कस्यापि HTML एलिमेण्ट् इत्यनेन सह कार्यं करोति ।
  • $embed-responsive-aspect-ratiosSass मानचित्रस्य पुनर्नामकरणं कृतम् अस्ति $aspect-ratiosतथा च तस्य मूल्यानि सरलीकृतानि येन वर्गनाम प्रतिशतं च युग्मरूपेण समाविष्टम् अस्ति key: value।
  • इदानीं CSS चराः उत्पन्नाः भवन्ति तथा च Sass मानचित्रे प्रत्येकस्य मूल्यस्य कृते समाविष्टाः भवन्ति । किमपि कस्टम् आस्पेक्ट् रेश्यो निर्मातुं --bs-aspect-ratiothe इत्यत्र चरं परिवर्तयन्तु ..ratio

• भङ्गयन्तः “Screen reader” वर्गाः अधुना “दृश्यरूपेण निगूढाः” वर्गाः सन्ति .

  • Sass सञ्चिकां scss/helpers/_screenreaders.scssto तः परिवर्तितम्scss/helpers/_visually-hidden.scss
  • पुनर्नामकरणं .sr-onlyच .sr-only-focusableto .visually-hiddenand.visually-hidden-focusable
  • sr-only()पुनर्नामकरणं कृत्वा mixins sr-only-focusable()to visually-hidden()and visually-hidden-focusable().

• bootstrap-utilities.cssअधुना अस्माकं सहायकाः अपि समाविष्टाः सन्ति। इतः परं कस्टम् बिल्ड्स् इत्यत्र सहायकानां आयातस्य आवश्यकता नास्ति ।

जावास्क्रिप्ट्

• jQuery निर्भरतां त्यक्त्वा नियमितजावास्क्रिप्ट् मध्ये भवितुं प्लगिन्स् पुनः लिखितवान्।

• सर्वेषां JavaScript प्लगिन्स् कृते Breaking Data विशेषताः इदानीं namespaced भवन्ति यत् 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एकं कार्यं रूपेण पारयितुं शक्यते यत् Bootstrap इत्यस्य पूर्वनिर्धारितं Popper config तर्करूपेण स्वीकुर्वति, येन भवान् स्वमार्गे एतत् पूर्वनिर्धारितं विन्यासं विलीनीकरणं कर्तुं शक्नोति । ड्रॉपडाउन्स्, पोपोवर्स्, टूल्टिप्स् च इत्यत्र प्रवर्तते ।

• Popper तत्त्वानां उत्तमस्थापनार्थं the कृते पूर्वनिर्धारितं मूल्यं fallbackPlacementsपरिवर्तितम् अस्ति । ड्रॉपडाउन्स्, पोपोवर्स्, टूल्टिप्स् च इत्यत्र प्रवर्तते ।['top', 'right', 'bottom', 'left']

• _getInstance()→ इत्यादिभ्यः सार्वजनिकस्थिरविधिभ्यः अण्डरस्कोरं निष्कासितम् getInstance()।