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

v५.२.० इति

ताज़ा डिजाइन

Bootstrap v5.2.0 परियोजनायाः सम्पूर्णे घटकानां गुणानाञ्च मुष्टिभ्यां कृते सूक्ष्मं डिजाइन-अद्यतनं दर्शयति, विशेषतया बटन्-मध्ये परिष्कृत-मूल्यानां माध्यमेनborder-radius तथा च रूप - नियन्त्रणेषु अस्माकं दस्तावेजीकरणम् अपि नूतनेन मुखपृष्ठेन, सरलतरेण docs विन्यासेन सह अद्यतनं कृतम् अस्ति यत् पार्श्वपट्टिकायाः ​​विभागान् न संकुचति, तथा च Bootstrap Icons इत्यस्य अधिकप्रमुखैः उदाहरणैः

अधिकानि CSS चर

वयं CSS चरानाम् उपयोगाय अस्माकं सर्वाणि घटकानि अद्यतनं कृतवन्तः । यद्यपि Sass अद्यापि सर्वं आधारयति, प्रत्येकं घटकं घटकाधारवर्गेषु (उदा., .btn) CSS चरानाम् समावेशार्थं अद्यतनं कृतम् अस्ति, यत् Bootstrap इत्यस्य अधिकं वास्तविकसमयस्य अनुकूलनस्य अनुमतिं ददाति अनन्तरविमोचनेषु वयं CSS चरस्य उपयोगं अस्माकं विन्यासे, रूपेषु, सहायकेषु, उपयोगिषु च विस्तारयिष्यामः । प्रत्येकस्मिन् घटके CSS चरस्य विषये अधिकं पठन्तु स्वस्वदस्तावेजपृष्ठेषु ।

अस्माकं CSS चरस्य उपयोगः Bootstrap 6 यावत् किञ्चित् अपूर्णः भविष्यति यद्यपि वयं एतानि पूर्णतया कार्यान्वितुं प्रीतिमान् भविष्यामः तथापि ते भङ्गपरिवर्तनस्य कारणस्य जोखिमं चालयन्ति। यथा, $alert-border-width: var(--bs-border-width)अस्माकं स्रोतसङ्केते सेटिङ्ग् कृत्वा स्वस्य कोडे सम्भाव्यं Sass भङ्गं करोति यदि भवान् $alert-border-width * 2केनचित् कारणेन करोति स्म ।

तथा च, यत्र यत्र सम्भवं तत्र, वयं अधिकानि CSS चर प्रति धक्कायन्तः भविष्यामः, परन्तु कृपया ज्ञातव्यं यत् अस्माकं कार्यान्वयनम् v5 मध्ये किञ्चित् सीमितं भवितुम् अर्हति ।

नूतनम्‌_maps.scss

Bootstrap v5.2.0 इत्यनेन नूतनं Sass सञ्चिकां प्रवर्तयितम् _maps.scss। _variables.scssइदं एकं समस्यां निवारयितुं तः अनेकाः Sass मानचित्रं बहिः आकर्षयति यत्र मूलनक्शे अद्यतनं गौणनक्शेषु न प्रयुक्तम् आसीत् ये तान् विस्तारयन्ति। उदाहरणार्थं, अद्यतनानि $theme-colorsअन्येषु विषयनक्शेषु न प्रयुक्तानि आसन् ये अवलम्बन्ते स्म $theme-colors, कुञ्जी अनुकूलनकार्यप्रवाहं भङ्गयन्ति स्म । संक्षेपेण, Sass इत्यस्य एकः सीमा अस्ति यत्र एकवारं पूर्वनिर्धारितं चरं वा नक्शा वा उपयुज्यते , तत् अद्यतनं कर्तुं न शक्यते । अन्येषां CSS चरानाम् रचनायै यदा तेषां उपयोगः भवति तदा CSS चरानाम् अपि एतादृशी एव दोषः अस्ति ।

अत एव Bootstrap मध्ये variable customizations इत्यस्य पश्चात् आगन्तुं भवति @import "functions", परन्तु पूर्वं @import "variables"अपि च अस्माकं import stack इत्यस्य शेषभागः । Sass maps इत्यत्र अपि तथैव प्रवर्तते—भवता पूर्वनिर्धारितानि अभ्यस्तस्य पूर्वं अधिलिखितव्यानि । निम्नलिखित मानचित्रं नूतने स्थानान्तरितम् अस्ति _maps.scss: १.

• $theme-colors-rgb
• $utilities-colors
• $utilities-text
• $utilities-text-colors
• $utilities-bg
• $utilities-bg-colors
• $negative-spacers
• $gutters

भवतः कस्टम् Bootstrap CSS निर्माणानि इदानीं पृथक् maps आयातेन सह किञ्चित् एतादृशं दृश्यन्ते ।

  // 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 Grid विन्यासं विकल्पयति समये, .container-*वर्गाः अद्यापि संकलिताः भविष्यन्ति, यावत् एषः विकल्पः false. पात्राणि अपि अधुना स्वस्य नालीमूल्यानि धारयन्ति।

• Offcanvas घटके अधुना प्रतिक्रियाशीलविविधताः सन्ति . मूलवर्गः .offcanvasअपरिवर्तितः एव तिष्ठति-सर्वेषु viewports मध्ये सामग्रीं गोपयति । प्रतिक्रियाशीलं कर्तुं तत् .offcanvasवर्गं कस्मिन् अपि .offcanvas-{sm|md|lg|xl|xxl}वर्गे परिवर्तयन्तु ।

• स्थूलतराः टेबलविभाजकाः अधुना ऑप्ट-इन् भवन्ति। — वयं सारणीसमूहानां मध्ये स्थूलतरं कठिनतरं च अधिलिखितुं सीमां निष्कास्य भवन्तः प्रयोक्तुं शक्नुवन्ति वैकल्पिकवर्गे स्थानान्तरितवन्तः, .table-group-divider. उदाहरणार्थं table docs पश्यन्तु ।

• Scrollspy इत्येतत् Intersection Observer API इत्यस्य उपयोगाय पुनर्लिखितम् अस्ति , यस्य अर्थः अस्ति यत् भवद्भ्यः सापेक्षिक-मातृपितृ-पुटस्य आवश्यकता नास्ति,offsetconfig इत्यस्य निराकरणं करोति, इत्यादीनि च । तेषां nav हाइलाइटिङ्ग् इत्यत्र अधिकं सटीकं सुसंगतं च भवितुं स्वस्य Scrollspy कार्यान्वयनम् अन्वेष्टुम् ।

• Popovers तथा tooltips इदानीं CSS variables इत्यस्य उपयोगं कुर्वन्ति । केचन CSS चराः तेषां Sass समकक्षेभ्यः अद्यतनं कृत्वा चरानाम् संख्यां न्यूनीकर्तुं शक्नुवन्ति । फलतः, ​​अस्मिन् विमोचने त्रयः चराः अप्रचलिताः सन्ति: $popover-arrow-color, $popover-arrow-outer-color, तथा च $tooltip-arrow-color।

• नूतनाः .text-bg-{color}सहायकाः योजिताः। व्यक्तिगतं उपयोगितां .text-*च सेट् कर्तुं स्थाने .bg-*, इदानीं भवान् सहायकानां उपयोगेन a.text-bg-* with background-colorcontrasting foreground सेट्color कर्तुं शक्नोति ।

• .form-check-reverseलेबल् तथा तत्सम्बद्धानां चेकबॉक्स्/रेडियोनां क्रमं पलटयितुं परिवर्तकः योजितः ।

• नूतनवर्गद्वारा सारणीषु समर्थनं धारयन्ति स्तम्भाः योजिताः.table-striped-columns ।

परिवर्तनस्य सम्पूर्णसूच्यर्थं GitHub इत्यत्र v5.2.0 परियोजना पश्यन्तु ।

v५.१.० इति

• CSS Grid विन्यासस्य प्रयोगात्मकं समर्थनं योजितम् . — एतत् कार्यं प्रचलति, तथा च अद्यापि उत्पादन-उपयोगाय सज्जं नास्ति, परन्तु भवान् Sass मार्गेण नूतन-विशेषतायां विकल्पं कर्तुं शक्नोति । तत् सक्षमीकरणाय, पूर्वनिर्धारितजालं निष्क्रियं कुर्वन्तु, सेट् $enable-grid-classes: falseकृत्वा CSS Grid इत्येतत् सेट् कृत्वा सक्षमं कुर्वन्तु $enable-cssgrid: true।

• offcanvas समर्थनार्थं navbars अद्यतनं कृतम्। — प्रतिक्रियाशीलवर्गैः सह कस्मिन् अपि नवबारमध्ये offcanvas drawers योजयन्तु .navbar-expand-*तथा च किञ्चित् offcanvas मार्कअपं कुर्वन्तु ।

• नूतनं स्थानधारकघटकं योजितम् . — अस्माकं नवीनतमः घटकः, वास्तविकसामग्रीणां स्थाने अस्थायीखण्डान् प्रदातुं एकः उपायः यत् भवतः साइट् अथवा एप् मध्ये किमपि अद्यापि लोड् भवति इति सूचयितुं साहाय्यं करोति।

• Collapse plugin इदानीं क्षैतिजं collapsing समर्थयति . — Add .collapse-horizontalto your .collapseto collapse the widthइत्यस्य स्थाने height. min-heighta वा सेट् कृत्वा ब्राउजर् पुनर्चित्रणं परिहरन्तु height।

• नूतनं स्टैकं तथा ऊर्ध्वाधरनियमसहायकाः योजिताः। — शीघ्रं stacks सह custom layouts निर्मातुं बहुविधं flexbox गुणं प्रयोजयन्तु . .hstackक्षैतिज ( ) तथा ऊर्ध्वाधर ( .vstack) ढेरों में से चुनें । नवीनसहायकैः<hr> सह तत्त्वानां सदृशाः ऊर्ध्वाधरविभाजकाः योजयन्तु |.vr

• नवीन वैश्विक :rootCSS चर जोड़ा गया। — शैल्याः :rootनियन्त्रणार्थं स्तरे अनेकाः नूतनाः CSS चराः योजिताः । <body>अधिकानि कार्येषु सन्ति, अस्माकं उपयोगितानां घटकानां च मध्ये अपि सन्ति, परन्तु अधुना कृते Customize विभागे CSS चराः पठन्तु ।

• CSS चरानाम् उपयोगाय वर्णस्य पृष्ठभूमिस्य च उपयोगितानां परिष्कारः कृतः, तथा च नूतनाः पाठस्य अस्पष्टता तथा पृष्ठभूमि अस्पष्टता उपयोगिताः योजिताः । — .text-* तथा च .bg-*उपयोगिताः इदानीं CSS चरैः सह rgba()वर्णमूल्यैः च निर्मिताः सन्ति, येन भवान् नूतनैः अस्पष्टता-उपयोगितैः सह कस्यापि उपयोगितायाः अनुकूलनं सुलभतया कर्तुं शक्नोति ।

• अस्माकं घटकान् कथं अनुकूलितं कर्तव्यम् इति दर्शयितुं आधारितानि नूतनानि स्निपेट् उदाहरणानि योजितानि । — अस्माकं नूतनेन Snippets उदाहरणैः सह अनुकूलितघटकानाम् अन्येषां च सामान्यानां डिजाइनप्रतिमानानाम् उपयोगाय सज्जाः आकर्षयन्तु . पादलेखाः , ड्रॉप्डाउन्स् , सूचीसमूहाः , मोडाल्स् च समाविष्टाः सन्ति |

• popovers तथा tooltips तः अप्रयुक्तानि स्थितिशैल्यानि निष्कासितानि यतः एतानि केवलं Popper द्वारा सम्पादितानि सन्ति। अप्रचलितं कृत्वा प्रक्रियायां $tooltip-marginसेट् कृतम् अस्ति ।null

अधिकानि सूचनानि इच्छन्ति वा? v5.1.0 ब्लॉग् पोस्ट् पठन्तु।

आश्रयाः

• 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 इत्यनेन सह कथं व्यवहारः कर्तव्यः इति पश्यन्तु .

• भङ्गःफंक्शन् color-yiq()तथा सम्बन्धित चर को पुनः नामित किया गया color-contrast()क्योंकि यह YIQ रंग स्थान से सम्बन्धित नहीं है। देखें # 30168।

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

• भङ्गःअधिकतार्किकदृष्टिकोणस्य कृते मीडियाक्वेरी मिक्सिन्स् मापदण्डाः परिवर्तिताः सन्ति ।

  • 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

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

• भङ्गःचरानाम् पक्षे color(), theme-color(), तथा कार्याणि त्यक्तवन्तः । देखें # 29083 .gray()

• भङ्गःRenamed theme-color-level()function to color-level()इदानीं च केवलं वर्णानाम् स्थाने यत्किमपि वर्णं स्वीकुर्वति $theme-color। पश्यन्तु #29083 पश्यन्तु: color-level() was later on dropped in 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 इत्यस्य स्वस्य color scaling function इत्यनेन सह टकरावं न कर्तुं 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-*
  • भङ्गःनूतनानां गटर-उपयोगितानां मेलनं .no-guttersकर्तुं पुनर्नामकरणं कृतम् ।.g-0

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

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

• भङ्गःघटकं पातितम् .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 आसीत् ।

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

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

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

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

• भङ्गःनेस्टेड् टेबल्स् इतः परं शैल्याः उत्तराधिकारं न प्राप्नुवन्ति ।

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

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

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

• भङ्गः.pre-scrollableकक्षा छोड़ा । देखें # 29135

• भङ्गः .text-*utilities इतः परं लिङ्क् मध्ये hover तथा focus अवस्थाः न योजयन्ति । .link-*तस्य स्थाने helper classes इत्यस्य उपयोगः कर्तुं शक्यते । देखें # 29267

• भङ्गः.text-justifyकक्षा छोड़ा । देखें # 29793

• भङ्गः <hr>elements इदानीं attribute इत्यस्य उत्तमं समर्थनार्थं इत्यस्य 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 पृष्ठं पश्यन्तु ।

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

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

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

• भङ्गःइदानीं प्रपत्रलेबल् आवश्यकम् अस्ति .form-label.

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

• प्रपत्रनियन्त्रणानि सम्भवसमये स्थिररूपेण न प्रयुज्यन्ते height, तस्य स्थाने min-heightअन्यघटकैः सह अनुकूलनं संगततां च सुधारयितुम् स्थगयन्ति ।

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

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

घटकाः

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

अकॉर्डियन

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

अलर्ट्स्

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

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

बैज

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

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

• भङ्गः<a>and <button>elements इत्यस्य कृते hover तथा focus शैल्याः निष्कासिताः ।

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

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

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

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

बटन्स्

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

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

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

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

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

कार्ड

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

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

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

हिंडोला

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

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

बटन बंद करें

• भङ्गःअल्पसामान्यनामस्य .closeकृते पुनर्नामकरणं कृतम् .btn-close।

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

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

संश्यान

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

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

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

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

• उन्नत विपरीततायै ड्रॉपडाउन विभाजकं कृष्णं कृतवान् ।

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

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

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

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

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

जम्बोट्रोन्

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

सूची समूह

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

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

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

नवबराः

• भङ्गःनवबार्स् इदानीं अन्तः एकं पात्रं आवश्यकं भवति (अन्तरालस्य आवश्यकतां घोररूपेण सरलीकर्तुं तथा च CSS आवश्यकम्) ।
• भङ्गः.activeवर्गः s इत्यत्र प्रयोक्तुं न शक्यते , s .nav-itemइत्यत्र प्रत्यक्षतया प्रयोक्तव्यः .nav-link।

ऑफकैनवास

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

पृष्ठकरणम्

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

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

पोपोवर्स इति

• भङ्गःअस्माकं पूर्वनिर्धारित popover टेम्पलेट् मध्ये पुनर्नामकरणं .arrowकृतम् ।.popover-arrow

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

स्पिनरः

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

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

टोस्ट्

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

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

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

टूलटिप्स

• भङ्गःअस्माकं पूर्वनिर्धारित- उपकरण -सूचिकायां पुनर्नामकरणं .arrowकृतम् ।.tooltip-arrow

• भङ्गःthe कृते पूर्वनिर्धारितं मूल्यं fallbackPlacementsपरिवर्तितं भवति ['top', 'right', 'bottom', 'left']popper तत्त्वानां उत्तमस्थापनार्थं ।

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

उपयोगिताएँ

• भङ्गः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.

• भङ्गःपूर्वनिर्धारितरूपेण नकारात्मकमार्जिनं अक्षमम्।

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

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

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

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

• भङ्गःनामान्तरितम् . .text-monospace_.font-monospace

• भङ्गःपाठस्य गोपनार्थं पुरातनपद्धतिः इति कारणेन निष्कासितम् .text-hideयस्य उपयोगः इतः परं न कर्तव्यः ।

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

• भङ्गःसंक्षिप्ततायाः स्थिरतायाः च कृते .font-weight-*उपयोगितानां पुनर्नामकरणम् ।.fw-*

• भङ्गःसंक्षिप्ततायाः स्थिरतायाः च कृते .font-style-*उपयोगितानां पुनर्नामकरणम् ।.fst-*

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

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

  • 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 प्लगिन्स् कृते आँकडा विशेषताः इदानीं नामस्थानं कृत्वा Bootstrap कार्यक्षमतां तृतीयपक्षेभ्यः भवतः स्वस्य कोड् च भेदयितुं सहायकं भवति । यथा, वयं data-bs-toggleस्थाने उपयुञ्ज्महे data-toggle।

• सर्वे प्लगिन्स् इदानीं प्रथमतर्करूपेण CSS चयनकर्तारं स्वीकुर्वितुं शक्नुवन्ति । प्लगिन् इत्यस्य नूतनं उदाहरणं निर्मातुं भवान् DOM तत्त्वं वा कोऽपि वैधः CSS चयनकर्ता वा पारयितुं शक्नोति:

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

• popperConfigएकं कार्यं रूपेण पारयितुं शक्यते यत् Bootstrap इत्यस्य पूर्वनिर्धारितं Popper config तर्करूपेण स्वीकुर्वति, येन भवान् स्वमार्गे एतत् पूर्वनिर्धारितं विन्यासं विलीनीकरणं कर्तुं शक्नोति । ड्रॉपडाउन्स्, पोपोवर्स्, टूल्टिप्स् च इत्यत्र प्रवर्तते ।

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

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