v5కి మారుతోంది

v5.2.0

రిఫ్రెష్ డిజైన్

బూట్‌స్ట్రాప్ v5.2.0 ప్రాజెక్ట్ అంతటా కొన్ని భాగాలు మరియు లక్షణాల కోసం సూక్ష్మమైన డిజైన్ అప్‌డేట్‌ను కలిగి ఉంది, ముఖ్యంగా border-radiusబటన్లు మరియు ఫారమ్ నియంత్రణలపై శుద్ధి చేసిన విలువల ద్వారా . మా డాక్యుమెంటేషన్ కొత్త హోమ్‌పేజీ, సైడ్‌బార్ యొక్క విభాగాలను ఇకపై కుదించని సరళమైన డాక్స్ లేఅవుట్ మరియు బూట్‌స్ట్రాప్ చిహ్నాల యొక్క మరిన్ని ప్రముఖ ఉదాహరణలతో కూడా నవీకరించబడింది .

మరిన్ని CSS వేరియబుల్స్

CSS వేరియబుల్‌లను ఉపయోగించడానికి మేము మా అన్ని భాగాలను నవీకరించాము. Sass ఇప్పటికీ అన్నింటినీ ఆధారం చేస్తున్నప్పటికీ, ప్రతి భాగం CSS వేరియబుల్స్‌ను కాంపోనెంట్ బేస్ క్లాస్‌లలో చేర్చడానికి నవీకరించబడింది (ఉదా, .btn), బూట్‌స్ట్రాప్ యొక్క మరింత నిజ-సమయ అనుకూలీకరణకు వీలు కల్పిస్తుంది. తదుపరి విడుదలలలో, మేము మా CSS వేరియబుల్స్ వినియోగాన్ని మా లేఅవుట్, ఫారమ్‌లు, హెల్పర్‌లు మరియు యుటిలిటీలలోకి విస్తరింపజేస్తాము. ప్రతి కాంపోనెంట్‌లోని CSS వేరియబుల్స్ గురించి వాటి సంబంధిత డాక్యుమెంటేషన్ పేజీలలో మరింత చదవండి.

బూట్‌స్ట్రాప్ 6 వరకు మా CSS వేరియబుల్ వినియోగం కొంతవరకు అసంపూర్ణంగా ఉంటుంది. మేము వీటిని బోర్డు అంతటా పూర్తిగా అమలు చేయాలనుకుంటున్నాము, అయితే అవి బద్దలయ్యే మార్పులకు కారణమయ్యే ప్రమాదం ఉంది. ఉదాహరణకు, మీరు కొన్ని కారణాల $alert-border-width: var(--bs-border-width)వల్ల మా సోర్స్ కోడ్‌లో సెట్ చేయడం వలన మీ స్వంత కోడ్‌లోని సంభావ్య Sassని విచ్ఛిన్నం చేస్తుంది .$alert-border-width * 2

అందుకని, సాధ్యమైన చోటల్లా, మేము మరిన్ని CSS వేరియబుల్స్ వైపు పుష్ చేస్తూనే ఉంటాము, కానీ దయచేసి మా అమలు v5లో కొద్దిగా పరిమితం కావచ్చని గుర్తించండి.

కొత్తది_maps.scss

బూట్‌స్ట్రాప్ v5.2.0 తో కొత్త Sass ఫైల్‌ని పరిచయం చేసింది _maps.scss. _variables.scssఅసలైన మ్యాప్‌కి అప్‌డేట్‌లు వాటిని విస్తరించే సెకండరీ మ్యాప్‌లకు వర్తించని సమస్యను పరిష్కరించడానికి ఇది అనేక సాస్ మ్యాప్‌లను తీసివేస్తుంది . ఉదాహరణకు, కీ అనుకూలీకరణ వర్క్‌ఫ్లోలను విచ్ఛిన్నం $theme-colorsచేస్తూ, ఆధారపడిన ఇతర థీమ్ మ్యాప్‌లకు నవీకరణలు వర్తించబడవు . $theme-colorsసంక్షిప్తంగా, Sass ఒక పరిమితిని కలిగి ఉంది, ఒకసారి డిఫాల్ట్ వేరియబుల్ లేదా మ్యాప్ ఉపయోగించబడితే , అది నవీకరించబడదు. ఇతర CSS వేరియబుల్స్‌ను కంపోజ్ చేయడానికి CSS వేరియబుల్‌లను ఉపయోగించినప్పుడు అదే విధమైన లోపం ఉంటుంది.

అందుకే బూట్‌స్ట్రాప్‌లోని వేరియబుల్ అనుకూలీకరణలు తర్వాత రావాలి @import "functions", కానీ ముందు @import "variables"మరియు మా దిగుమతి స్టాక్‌లో మిగిలినవి. Sass మ్యాప్‌లకు కూడా ఇది వర్తిస్తుంది-మీరు డిఫాల్ట్‌లను ఉపయోగించే ముందు వాటిని భర్తీ చేయాలి. కింది మ్యాప్‌లు కొత్త వాటికి తరలించబడ్డాయి _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. ఉదాహరణ కోసం టేబుల్ డాక్స్ చూడండి.

• ఇంటర్‌సెక్షన్ అబ్జర్వర్ APIని ఉపయోగించడానికి Scrollspy తిరిగి వ్రాయబడింది , అంటే మీకు ఇకపై సంబంధిత పేరెంట్ రేపర్‌లు అవసరం లేదు,offsetకాన్ఫిగర్‌ని రద్దు చేస్తుంది మరియు మరిన్ని. మీ Scrollspy అమలులు వాటి nav హైలైటింగ్‌లో మరింత ఖచ్చితమైనవి మరియు స్థిరంగా ఉండేలా చూడండి.

• 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

• :rootకొత్త గ్లోబల్ CSS వేరియబుల్స్ జోడించబడ్డాయి . — శైలులను :rootనియంత్రించడం కోసం అనేక కొత్త CSS వేరియబుల్స్ స్థాయికి జోడించబడ్డాయి . <body>మా యుటిలిటీలు మరియు కాంపోనెంట్‌లతో సహా మరిన్ని పనిలో ఉన్నాయి, అయితే ప్రస్తుతానికి అనుకూలీకరించు విభాగంలో CSS వేరియబుల్‌లను చదవండి .

• CSS వేరియబుల్స్‌ని ఉపయోగించడానికి రంగు మరియు బ్యాక్‌గ్రౌండ్ యుటిలిటీలను సరిదిద్దారు మరియు కొత్త టెక్స్ట్ అస్పష్టత మరియు నేపథ్య అస్పష్టత యుటిలిటీలను జోడించారు. — .text-* మరియు .bg-*యుటిలిటీస్ ఇప్పుడు CSS వేరియబుల్స్ మరియు rgba()కలర్ వాల్యూస్‌తో నిర్మించబడ్డాయి, కొత్త అస్పష్టత యుటిలిటీలతో ఏదైనా యుటిలిటీని సులభంగా అనుకూలీకరించడానికి మిమ్మల్ని అనుమతిస్తుంది.

• మా భాగాలను ఎలా అనుకూలీకరించాలో చూపించడానికి కొత్త స్నిప్పెట్ ఉదాహరణలు జోడించబడ్డాయి. — మా కొత్త స్నిప్పెట్‌ల ఉదాహరణలతో అనుకూలీకరించిన భాగాలు మరియు ఇతర సాధారణ డిజైన్ నమూనాలను ఉపయోగించడానికి సిద్ధంగా లాగండి . ఫుటర్‌లు , డ్రాప్‌డౌన్‌లు , జాబితా సమూహాలు మరియు మోడల్‌లను కలిగి ఉంటుంది .

• పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌ల నుండి ఉపయోగించని పొజిషనింగ్ స్టైల్‌లు తీసివేయబడ్డాయి , ఇవి కేవలం పాపర్ ద్వారా మాత్రమే నిర్వహించబడతాయి. $tooltip-marginవిస్మరించబడింది మరియు nullప్రక్రియలో సెట్ చేయబడింది.

మరింత సమాచారం కావాలా? v5.1.0 బ్లాగ్ పోస్ట్‌ను చదవండి.

డిపెండెన్సీలు

• j క్వెరీని తొలగించారు.
• Popper v1.x నుండి Popper v2.xకి అప్‌గ్రేడ్ చేయబడింది.
• లిబ్సాస్‌ను డార్ట్ సాస్‌తో భర్తీ చేసిన మా సాస్ కంపైలర్‌గా ఇచ్చిన లిబ్సాస్ నిలిపివేయబడింది.
• మా డాక్యుమెంటేషన్‌ను రూపొందించడం కోసం జెకిల్ నుండి హ్యూగోకు వలస వచ్చారు

బ్రౌజర్ మద్దతు

• ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 10 మరియు 11 తొలగించబడింది
• మైక్రోసాఫ్ట్ ఎడ్జ్ <16 (లెగసీ ఎడ్జ్) తొలగించబడింది
• Firefox <60 పడిపోయింది
• Safari <12 పడిపోయింది
• iOS Safari <12 తొలగించబడింది
• క్రోమ్ <60 పడిపోయింది

డాక్యుమెంటేషన్ మార్పులు

• పునఃరూపకల్పన చేయబడిన హోమ్‌పేజీ, డాక్స్ లేఅవుట్ మరియు ఫుటర్.
• కొత్త పార్శిల్ గైడ్ జోడించబడింది .
• సాస్, గ్లోబల్ కాన్ఫిగరేషన్ ఎంపికలు, రంగు పథకాలు, CSS వేరియబుల్స్ మరియు మరిన్నింటిపై కొత్త వివరాలతో v4 యొక్క థీమింగ్ పేజీ స్థానంలో కొత్త అనుకూలీకరించు విభాగం జోడించబడింది .
• అన్ని ఫారమ్ డాక్యుమెంటేషన్‌ను కొత్త ఫారమ్‌ల విభాగంలోకి పునర్వ్యవస్థీకరించారు , కంటెంట్‌ను మరింత కేంద్రీకృత పేజీలుగా విభజించారు.
• అదేవిధంగా, గ్రిడ్ కంటెంట్‌ను మరింత స్పష్టంగా బయటకు తీయడానికి లేఅవుట్ విభాగం నవీకరించబడింది.
• “Navs” భాగం పేజీని “Navs & Tabs”గా మార్చారు.
• "చెక్‌లు" పేజీని "చెక్‌లు & రేడియోలు"గా మార్చారు.
• మా సైట్‌లు మరియు డాక్స్ వెర్షన్‌లను సులభతరం చేయడానికి నావ్‌బార్‌ని మళ్లీ డిజైన్ చేసారు మరియు కొత్త సబ్‌నావ్‌ని జోడించారు.
• శోధన ఫీల్డ్ కోసం కొత్త కీబోర్డ్ సత్వరమార్గం జోడించబడింది: Ctrl + /.

సాస్

• అనవసరమైన విలువలను తీసివేయడాన్ని సులభతరం చేయడానికి మేము డిఫాల్ట్ Sass మ్యాప్ విలీనాలను తొలగించాము. మీరు ఇప్పుడు సాస్ మ్యాప్‌లలో అన్ని విలువలను నిర్వచించాలని గుర్తుంచుకోండి $theme-colors. సాస్ మ్యాప్‌లతో ఎలా వ్యవహరించాలో చూడండి .

• బ్రేకింగ్ఇది ఇకపై YIQ కలర్ స్పేస్‌కు సంబంధించినది కానందున color-yiq()ఫంక్షన్ మరియు సంబంధిత వేరియబుల్స్ పేరు మార్చబడింది . #30168 చూడండి.color-contrast()

  • $yiq-contrasted-thresholdగా పేరు మార్చబడింది $min-contrast-ratio.
  • $yiq-text-darkమరియు $yiq-text-lightవరుసగా పేరు మార్చబడ్డాయి $color-contrast-darkమరియు $color-contrast-light.

• బ్రేకింగ్మరింత లాజికల్ అప్రోచ్ కోసం మీడియా క్వెరీ మిక్సిన్స్ పారామీటర్‌లు మార్చబడ్డాయి.

  • media-breakpoint-down()తదుపరి బ్రేక్‌పాయింట్‌కు బదులుగా బ్రేక్‌పాయింట్‌ను ఉపయోగిస్తుంది (ఉదా, లక్ష్యాల కంటే చిన్న వీక్షణపోర్ట్‌లకు media-breakpoint-down(lg)బదులుగా ).media-breakpoint-down(md)lg
  • అదేవిధంగా, లో రెండవ పరామితి media-breakpoint-between()కూడా తదుపరి బ్రేక్‌పాయింట్‌కు బదులుగా బ్రేక్‌పాయింట్‌ను ఉపయోగిస్తుంది (ఉదా, మరియు మధ్య వ్యూపోర్ట్‌లను లక్ష్యాలకు media-between(sm, lg)బదులుగా ).media-breakpoint-between(sm, md)smlg

• బ్రేకింగ్ముద్రణ శైలులు మరియు $enable-print-stylesవేరియబుల్ తీసివేయబడ్డాయి. ప్రింట్ డిస్‌ప్లే తరగతులు ఇప్పటికీ అందుబాటులో ఉన్నాయి. #28339 చూడండి .

• బ్రేకింగ్డ్రాప్ చేయబడింది color(), theme-color()మరియు gray()వేరియబుల్స్ అనుకూలంగా విధులు. #29083 చూడండి .

• బ్రేకింగ్theme-color-level()ఫంక్షన్ పేరు మార్చబడింది color-level()మరియు ఇప్పుడు మీకు కావలసిన రంగులను మాత్రమే రంగులకు బదులుగా అంగీకరిస్తుంది $theme-color. #29083 చూడండి చూడండి: color-level() తర్వాత లో డ్రాప్ చేయబడింది v5.0.0-alpha3.

• బ్రేకింగ్పేరు మార్చబడింది $enable-prefers-reduced-motion-media-queryమరియు సంక్షిప్తత కోసం $enable-pointer-cursor-for-buttons.$enable-reduced-motion$enable-button-pointers

• బ్రేకింగ్bg-gradient-variant()మిక్సిన్ తొలగించారు . ఉత్పత్తి చేయబడిన తరగతులకు .bg-gradientబదులుగా మూలకాలకు గ్రేడియంట్‌లను జోడించడానికి తరగతిని ఉపయోగించండి ..bg-gradient-*

• బ్రేకింగ్ మునుపు నిలిపివేయబడిన మిక్సిన్‌లు తీసివేయబడ్డాయి:

  • hover, hover-focus, plain-hover-focus, మరియుhover-focus-active
  • float()
  • form-control-mixin()
  • nav-divider()
  • retina-img()
  • text-hide()(అనుబంధ యుటిలిటీ క్లాస్ కూడా తొలగించబడింది, .text-hide)
  • visibility()
  • form-control-focus()

• బ్రేకింగ్సాస్ యొక్క స్వంత రంగు స్కేలింగ్ ఫంక్షన్‌తో తాకిడిని నివారించడానికి scale-color()ఫంక్షన్ పేరు మార్చబడింది .shift-color()

• box-shadowmixins ఇప్పుడు బహుళ ఆర్గ్యుమెంట్‌ల నుండి nullవిలువలను మరియు డ్రాప్‌ను అనుమతిస్తాయి. #30394 చూడండి .none

• మిక్సిన్ border-radius()ఇప్పుడు డిఫాల్ట్ విలువను కలిగి ఉంది.

రంగు వ్యవస్థ

• కొత్త రంగు వ్యవస్థకు అనుకూలంగా పనిచేసిన color-level()మరియు $theme-color-intervalతీసివేయబడిన రంగు వ్యవస్థ. మా కోడ్‌బేస్‌లోని అన్ని lighten()మరియు darken()విధులు మరియు ద్వారా భర్తీ tint-color()చేయబడతాయి shade-color(). ఈ ఫంక్షన్‌లు రంగును నిర్ణీత మొత్తంలో తేలికగా మార్చడానికి బదులుగా తెలుపు లేదా నలుపుతో మిళితం చేస్తాయి. దాని shift-color()బరువు పరామితి సానుకూలంగా లేదా ప్రతికూలంగా ఉందా అనేదానిపై ఆధారపడి రంగును లేపనం చేస్తుంది లేదా షేడ్ చేస్తుంది. మరిన్ని వివరాల కోసం #30622 చూడండి .

• ప్రతి రంగుకు కొత్త రంగులు మరియు షేడ్స్ జోడించబడ్డాయి, కొత్త సాస్ వేరియబుల్స్‌గా ప్రతి బేస్ కలర్‌కు తొమ్మిది వేర్వేరు రంగులను అందిస్తుంది.

• మెరుగైన రంగు కాంట్రాస్ట్. బంప్డ్ కలర్ కాంట్రాస్ట్ రేషియో 3:1 నుండి 4.5:1 వరకు మరియు WCAG 2.1 AA కాంట్రాస్ట్‌ని నిర్ధారించడానికి బ్లూ, గ్రీన్, సియాన్ మరియు పింక్ కలర్స్ అప్‌డేట్ చేయబడింది. అలాగే మా రంగు కాంట్రాస్ట్ కలర్ నుండి $gray-900కు మార్చబడింది $black.

• మా రంగు వ్యవస్థకు మద్దతు ఇవ్వడానికి, మా రంగులను సముచితంగా కలపడానికి మేము కొత్త కస్టమ్ tint-color()మరియు ఫంక్షన్‌లను జోడించాము .shade-color()

గ్రిడ్ నవీకరణలు

• కొత్త బ్రేక్ పాయింట్! మరియు పైకి కొత్త xxlబ్రేక్ పాయింట్ జోడించబడింది . 1400pxఅన్ని ఇతర బ్రేక్‌పాయింట్‌లకు మార్పులు లేవు.

• మెరుగైన కాలువలు. గట్టర్‌లు ఇప్పుడు రెమ్స్‌లో సెట్ చేయబడ్డాయి మరియు 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ఇకపై కంటైనర్ తరగతుల ఉత్పత్తిని నిలిపివేయదు. #29146 చూడండి.

• make-colమిక్సిన్ నిర్దిష్ట పరిమాణం లేకుండా సమాన నిలువు వరుసలకు డిఫాల్ట్‌గా అప్‌డేట్ చేయబడింది.

కంటెంట్, రీబూట్, మొదలైనవి

• RFS ఇప్పుడు డిఫాల్ట్‌గా ప్రారంభించబడింది. మిక్సిన్‌ని ఉపయోగించే హెడ్డింగ్‌లువ్యూపోర్ట్‌తో స్కేల్‌కుfont-size()స్వయంచాలకంగా సర్దుబాటు చేయబడతాయిఈ ఫీచర్ మునుపు v4తో ప్రారంభించబడింది.font-size

• బ్రేకింగ్$display-*మా వేరియబుల్స్ మరియు $display-font-sizesసాస్ మ్యాప్‌తో భర్తీ చేయడానికి మా ప్రదర్శన టైపోగ్రఫీని సరిదిద్దాము. $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తరగతి పడిపోయింది . #29135 చూడండి

• బ్రేకింగ్ .text-*యుటిలిటీలు ఇకపై లింక్‌లకు హోవర్ మరియు ఫోకస్ స్టేట్‌లను జోడించవు. .link-*బదులుగా సహాయక తరగతులను ఉపయోగించవచ్చు. #29267 చూడండి

• బ్రేకింగ్.text-justifyతరగతి పడిపోయింది . #29793 చూడండి

• బ్రేకింగ్ <hr>ఎలిమెంట్స్ ఇప్పుడు లక్షణానికి మెరుగ్గా మద్దతు ఇవ్వడానికి heightబదులుగా ఉపయోగిస్తాయి. ఇది మందమైన డివైడర్‌లను సృష్టించడానికి పాడింగ్ యుటిలిటీల వినియోగాన్ని కూడా అనుమతిస్తుంది (ఉదా, ).bordersize<hr class="py-1">

• డిఫాల్ట్ క్షితిజ సమాంతర padding-leftఆన్ <ul>మరియు <ol>ఎలిమెంట్‌లను బ్రౌజర్ డిఫాల్ట్ నుండి 40pxకు రీసెట్ చేయండి 2rem.

• జోడించబడింది $enable-smooth-scroll, ఇది ప్రపంచవ్యాప్తంగా వర్తిస్తుంది — మీడియా ప్రశ్న scroll-behavior: smoothద్వారా తగ్గిన చలనం కోసం అడిగే వినియోగదారులు మినహా . #31877 చూడండిprefers-reduced-motion

RTL

• క్షితిజసమాంతర దిశ నిర్దిష్ట వేరియబుల్స్, యుటిలిటీలు మరియు మిక్సిన్‌లు అన్నీ ఫ్లెక్స్‌బాక్స్ లేఅవుట్‌లలో కనిపించే లాజికల్ ప్రాపర్టీలను ఉపయోగించడానికి పేరు మార్చబడ్డాయి-ఉదా, startమరియు endబదులుగా leftమరియు right.

రూపాలు

• కొత్త ఫ్లోటింగ్ ఫారమ్‌లు జోడించబడ్డాయి! మేము ఫ్లోటింగ్ లేబుల్స్ ఉదాహరణను పూర్తిగా సపోర్ట్ చేసే ఫారమ్ కాంపోనెంట్‌లకు ప్రచారం చేసాము. కొత్త ఫ్లోటింగ్ లేబుల్స్ పేజీని చూడండి.

• బ్రేకింగ్ ఏకీకృత స్థానిక మరియు అనుకూల ఫారమ్ అంశాలు. 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/ఇన్‌పుట్ సమూహ స్టైల్‌లతో సహా కింద పునఃవ్యవస్థీకరించబడిన సోర్స్ Sass ఫైల్‌లు .

భాగాలు

• paddingహెచ్చరికలు, బ్రెడ్‌క్రంబ్‌లు, కార్డ్‌లు, డ్రాప్‌డౌన్‌లు, జాబితా సమూహాలు, మోడల్‌లు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌ల కోసం ఏకీకృత విలువలు మా $spacerవేరియబుల్ ఆధారంగా ఉంటాయి. #30564 చూడండి .

అకార్డియన్

• కొత్త అకార్డియన్ భాగం జోడించబడింది .

హెచ్చరికలు

• హెచ్చరికలు ఇప్పుడు చిహ్నాలతో ఉదాహరణలను కలిగి ఉన్నాయి .

• <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>జత చేయండి. #30650 చూడండి . దీని కోసం డాక్స్ మా బటన్‌ల పేజీ నుండి కొత్త ఫారమ్‌ల విభాగానికి తరలించబడింది..btn<label>

• బ్రేకింగ్ .btn-blockయుటిలిటీస్ కోసం డ్రాప్ చేయబడింది. .btn-blockలో ఉపయోగించే బదులు, .btnమీ బటన్‌లను వ్రాప్ చేయండి మరియు అవసరమైన విధంగా వాటిని ఖాళీ చేయడానికి .d-gridఒక యుటిలిటీ. .gap-*వాటిపై మరింత నియంత్రణ కోసం ప్రతిస్పందించే తరగతులకు మారండి. కొన్ని ఉదాహరణల కోసం డాక్స్ చదవండి.

• అదనపు పారామితులకు మద్దతివ్వడానికి మా button-variant()మరియు button-outline-variant()మిక్సిన్‌లను నవీకరించారు.

• హోవర్ మరియు యాక్టివ్ స్టేట్‌లలో పెరిగిన కాంట్రాస్ట్‌ని నిర్ధారించడానికి బటన్‌లు నవీకరించబడ్డాయి.

• నిలిపివేయబడిన బటన్‌లు ఇప్పుడు కలిగి ఉన్నాయి pointer-events: none;.

కార్డ్

• బ్రేకింగ్.card-deckమా గ్రిడ్‌కు అనుకూలంగా పడిపోయింది . మీ కార్డ్‌లను కాలమ్ క్లాస్‌లలో వ్రాప్ చేయండి మరియు .row-cols-*కార్డ్ డెక్‌లను మళ్లీ సృష్టించడానికి పేరెంట్ కంటైనర్‌ను జోడించండి (కానీ ప్రతిస్పందించే అమరికపై మరింత నియంత్రణతో).

• బ్రేకింగ్.card-columnsతాపీపని అనుకూలంగా పడిపోయింది . #28922 చూడండి .

• బ్రేకింగ్.cardఆధారిత అకార్డియన్‌ని కొత్త అకార్డియన్ కాంపోనెంట్‌తో భర్తీ చేసింది .

రంగులరాట్నం

• ముదురు వచనం, నియంత్రణలు మరియు సూచికల కోసం కొత్త .carousel-darkవేరియంట్ జోడించబడింది (తేలికైన నేపథ్యాలకు గొప్పది).

• బూట్‌స్ట్రాప్ చిహ్నాల నుండి కొత్త SVGలతో రంగులరాట్నం నియంత్రణల కోసం చెవ్రాన్ చిహ్నాలు భర్తీ చేయబడ్డాయి .

మూసివేయి బటన్

• బ్రేకింగ్తక్కువ సాధారణ పేరు కోసం పేరు మార్చబడింది .close..btn-close

• మూసివేయి బటన్‌లు ఇప్పుడు HTMLలో Aకి background-imageబదులుగా (ఎంబెడెడ్ SVG)ని ఉపయోగిస్తాయి ×, మీ మార్కప్‌ను తాకాల్సిన అవసరం లేకుండా సులభంగా అనుకూలీకరణకు వీలు కల్పిస్తుంది.

• ముదురు నేపథ్యాలకు వ్యతిరేకంగా అధిక కాంట్రాస్ట్ డిస్మిస్ చిహ్నాలను ఎనేబుల్ చేయడానికి .btn-close-whiteఉపయోగించే కొత్త వేరియంట్ జోడించబడింది .filter: invert(1)

కుదించు

• అకార్డియన్‌ల కోసం స్క్రోల్ యాంకరింగ్ తీసివేయబడింది.

డ్రాప్‌డౌన్‌లు

• .dropdown-menu-darkఆన్-డిమాండ్ డార్క్ డ్రాప్‌డౌన్‌ల కోసం కొత్త వేరియంట్ మరియు అనుబంధ వేరియబుల్స్ జోడించబడ్డాయి .

• కోసం కొత్త వేరియబుల్ జోడించబడింది $dropdown-padding-x.

• మెరుగైన కాంట్రాస్ట్ కోసం డ్రాప్‌డౌన్ డివైడర్‌ను ముదురు చేసింది.

• బ్రేకింగ్డ్రాప్‌డౌన్ కోసం అన్ని ఈవెంట్‌లు ఇప్పుడు డ్రాప్‌డౌన్ టోగుల్ బటన్‌పై ట్రిగ్గర్ చేయబడి, ఆపై పేరెంట్ ఎలిమెంట్‌కు బబుల్ చేయబడతాయి.

• data-bs-popper="static"డ్రాప్‌డౌన్ యొక్క స్థానం స్థిరంగా ఉన్నప్పుడు లేదా డ్రాప్‌డౌన్ నావ్‌బార్‌లో ఉన్నప్పుడు డ్రాప్‌డౌన్ మెనులు ఇప్పుడు అట్రిబ్యూట్ సెట్‌ను కలిగి ఉంటాయి . ఇది మా JavaScript ద్వారా జోడించబడింది మరియు Popper యొక్క పొజిషనింగ్‌తో జోక్యం చేసుకోకుండా అనుకూల స్థాన శైలులను ఉపయోగించడంలో మాకు సహాయపడుతుంది.

• బ్రేకింగ్flipస్థానిక పాప్పర్ కాన్ఫిగరేషన్‌కు అనుకూలంగా డ్రాప్‌డౌన్ ప్లగిన్ కోసం ఎంపికను వదిలివేయబడింది . మీరు ఇప్పుడు ఫ్లిప్ మాడిఫైయర్‌లో fallbackPlacementsఎంపిక కోసం ఖాళీ శ్రేణిని పాస్ చేయడం ద్వారా ఫ్లిప్పింగ్ ప్రవర్తనను నిలిపివేయవచ్చు.

• ఆటో క్లోజ్ బిహేవియర్‌నిautoClose హ్యాండిల్ చేయడానికి డ్రాప్‌డౌన్ మెనులను ఇప్పుడు కొత్త ఆప్షన్‌తో క్లిక్ చేయవచ్చు . డ్రాప్‌డౌన్ మెనుని ఇంటరాక్టివ్‌గా చేయడానికి లోపల లేదా వెలుపల క్లిక్‌ని ఆమోదించడానికి మీరు ఈ ఎంపికను ఉపయోగించవచ్చు.

• డ్రాప్‌డౌన్‌లు ఇప్పుడు .dropdown-itemsలో చుట్టబడిన sకి మద్దతు ఇస్తాయి <li>.

జంబోట్రాన్

• బ్రేకింగ్జంబోట్రాన్ కాంపోనెంట్ తొలగించబడింది, ఎందుకంటే ఇది యుటిలిటీలతో ప్రతిరూపం అవుతుంది. డెమో కోసం మా కొత్త జంబోట్రాన్ ఉదాహరణను చూడండి.

జాబితా సమూహం

• జాబితా సమూహాలకు కొత్త .list-group-numberedమాడిఫైయర్ జోడించబడింది .

నవ్స్ మరియు ట్యాబ్‌లు

• , , , మరియు తరగతికి కొత్త nullవేరియబుల్స్ జోడించబడ్డాయి .font-sizefont-weightcolor:hover color.nav-link

నవబార్లు

• బ్రేకింగ్Navbar లకు ఇప్పుడు లోపల కంటైనర్ అవసరం (అంతరం అవసరాలు మరియు CSS అవసరం చాలా సులభతరం చేయడానికి).
• బ్రేకింగ్.activeతరగతిని ఇకపై sకి వర్తింపజేయలేరు , .nav-itemఇది నేరుగా .nav-linksపై వర్తింపజేయాలి.

ఆఫ్కాన్వాస్

• కొత్త ఆఫ్‌కాన్వాస్ భాగం జోడించబడింది .

పేజినేషన్

• పేజినేషన్ లింక్‌లు ఇప్పుడు అనుకూలీకరించదగినవి margin-left, అవి ఒకదానికొకటి వేరు చేయబడినప్పుడు అన్ని మూలల్లో డైనమిక్‌గా గుండ్రంగా ఉంటాయి.

• transitionపేజినేషన్ లింక్‌లకు లు జోడించబడ్డాయి .

Popovers

• బ్రేకింగ్మా డిఫాల్ట్ పాప్‌ఓవర్ టెంప్లేట్‌లో పేరు మార్చబడింది .arrow..popover-arrow

• whiteListఎంపికగా పేరు మార్చబడింది allowList.

స్పిన్నర్లు

• prefers-reduced-motion: reduceయానిమేషన్‌లను తగ్గించడం ద్వారా స్పిన్నర్లు ఇప్పుడు గౌరవిస్తున్నారు . #31882 చూడండి .

• మెరుగైన స్పిన్నర్ నిలువు అమరిక.

టోస్ట్‌లు

• పొజిషనింగ్ యుటిలిటీల.toast-container సహాయంతో టోస్ట్‌లను ఇప్పుడు a లో ఉంచవచ్చు .

• డిఫాల్ట్ టోస్ట్ వ్యవధి 5 ​​సెకన్లకు మార్చబడింది.

• టోస్ట్‌ల overflow: hiddenనుండి తీసివేయబడింది మరియు ఫంక్షన్‌లతో సరైన border-radiussతో భర్తీ చేయబడింది.calc()

ఉపకరణ చిట్కాలు

• బ్రేకింగ్మా డిఫాల్ట్ టూల్‌టిప్ టెంప్లేట్‌లో పేరు మార్చబడింది .arrow..tooltip-arrow

• బ్రేకింగ్యొక్క డిఫాల్ట్ విలువ పాపర్ ఎలిమెంట్‌ల మెరుగైన ప్లేస్‌మెంట్ కోసం 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 గ్రిడ్ మరియు ఫ్లెక్స్‌బాక్స్ లేఅవుట్‌ల కోసం .d-gridయుటిలిటీలు మరియు కొత్త gapయుటిలిటీలను ( ) ప్రదర్శించడానికి జోడించబడింది ..gap

• బ్రేకింగ్తీసివేయబడింది .rounded-smమరియు rounded-lg, మరియు కొత్త స్థాయి తరగతులను .rounded-0ప్రవేశపెట్టింది .rounded-3. #31687 చూడండి .

• line-heightకొత్త యుటిలిటీలు జోడించబడ్డాయి : .lh-1, .lh-sm, .lh-baseమరియు .lh-lg. ఇక్కడ చూడండి .

• .d-noneఇతర డిస్‌ప్లే యుటిలిటీల కంటే ఎక్కువ బరువును అందించడానికి మా CSS లో యుటిలిటీని తరలించాము.

• .visually-hidden-focusableఉపయోగించి, కంటైనర్‌లపై కూడా పని చేయడానికి సహాయకుడిని పొడిగించారు :focus-within.

సహాయకులు

• బ్రేకింగ్ ప్రతిస్పందించే పొందుపరిచిన సహాయకులు కొత్త తరగతి పేర్లు మరియు మెరుగైన ప్రవర్తనలు, అలాగే సహాయక CSS వేరియబుల్‌తో నిష్పత్తి సహాయకులుగా పేరు మార్చబడ్డారు.

  • కారక నిష్పత్తిలో byమార్చడానికి తరగతులు పేరు మార్చబడ్డాయి . xఉదాహరణకు, .ratio-16by9ఇప్పుడు .ratio-16x9.
  • మేము .embed-responsive-itemసరళమైన సెలెక్టర్‌కు అనుకూలంగా ఎలిమెంట్ గ్రూప్ సెలెక్టర్‌ని తొలగించాము .ratio > *. ఇక క్లాస్ అవసరం లేదు మరియు రేషియో హెల్పర్ ఇప్పుడు ఏదైనా HTML ఎలిమెంట్‌తో పని చేస్తుంది.
  • $embed-responsive-aspect-ratiosసాస్ మ్యాప్ పేరు మార్చబడింది మరియు తరగతి పేరు మరియు శాతాన్ని జతగా $aspect-ratiosచేర్చడానికి దాని విలువలు సరళీకృతం చేయబడ్డాయి .key: value
  • CSS వేరియబుల్స్ ఇప్పుడు ఉత్పత్తి చేయబడ్డాయి మరియు Sass మ్యాప్‌లోని ప్రతి విలువకు చేర్చబడ్డాయి. ఏదైనా అనుకూల కారక నిష్పత్తిని--bs-aspect-ratio సృష్టించడానికి వేరియబుల్‌ని సవరించండి ..ratio

• బ్రేకింగ్ “స్క్రీన్ రీడర్” తరగతులు ఇప్పుడు “దృశ్యమానంగా దాచబడిన” తరగతులు .

  • scss/helpers/_screenreaders.scssనుండి Sass ఫైల్ మార్చబడింది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ఇప్పుడు మా సహాయకులు కూడా ఉన్నారు. సహాయకులను ఇకపై అనుకూల బిల్డ్‌లలో దిగుమతి చేయవలసిన అవసరం లేదు.

జావాస్క్రిప్ట్

• j క్వెరీ డిపెండెన్సీని తొలగించారు మరియు సాధారణ జావాస్క్రిప్ట్‌లో ఉండేలా ప్లగిన్‌లను తిరిగి వ్రాశారు.

• బ్రేకింగ్థర్డ్ పార్టీలు మరియు మీ స్వంత కోడ్ నుండి బూట్‌స్ట్రాప్ కార్యాచరణను వేరు చేయడంలో సహాయపడటానికి అన్ని 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బూట్‌స్ట్రాప్ యొక్క డిఫాల్ట్ పాపర్ కాన్ఫిగరేషన్‌ను ఆర్గ్యుమెంట్‌గా అంగీకరించే ఫంక్షన్‌గా పాస్ చేయవచ్చు, తద్వారా మీరు ఈ డిఫాల్ట్ కాన్ఫిగరేషన్‌ను మీ మార్గంలో విలీనం చేయవచ్చు. డ్రాప్‌డౌన్‌లు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌లకు వర్తిస్తుంది.

• యొక్క డిఫాల్ట్ విలువ పాప్పర్ మూలకాల యొక్క మెరుగైన స్థానం కోసం fallbackPlacementsమార్చబడింది . డ్రాప్‌డౌన్‌లు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌లకు వర్తిస్తుంది.['top', 'right', 'bottom', 'left']

• _getInstance()→ వంటి పబ్లిక్ స్టాటిక్ పద్ధతుల నుండి అండర్‌స్కోర్ తీసివేయబడింది getInstance().