ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

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

బూట్‌స్ట్రాప్ సోర్స్ ఫైల్‌లు, డాక్యుమెంటేషన్ మరియు కాంపోనెంట్‌లలో మార్పులను ట్రాక్ చేయండి మరియు సమీక్షించండి.

ఈ పేజీలో

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

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

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

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

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

సాస్

  • అనవసరమైన విలువలను తీసివేయడాన్ని సులభతరం చేయడానికి మేము డిఫాల్ట్ 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-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/ఇన్‌పుట్ గ్రూప్ స్టైల్‌లతో సహా కింద పునఃవ్యవస్థీకరించబడిన సోర్స్ 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లో background-imageaకి బదులుగా (ఎంబెడెడ్ SVG)ని ఉపయోగిస్తాయి &times;, మీ మార్కప్‌ను తాకాల్సిన అవసరం లేకుండా సులభంగా అనుకూలీకరణను అనుమతిస్తుంది.

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

కుదించు

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

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

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

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

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

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

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

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

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

జంబోట్రాన్

జాబితా సమూహం

  • , , , మరియు తరగతికి కొత్త nullవేరియబుల్స్ జోడించబడ్డాయి .font-sizefont-weightcolor:hover color.nav-link
  • బ్రేకింగ్Navbar లకు ఇప్పుడు లోపల కంటైనర్ అవసరం (అంతరం అవసరాలు మరియు CSS అవసరం చాలా సులభతరం చేయడానికి).

ఆఫ్కాన్వాస్

పేజినేషన్

  • పేజినేషన్ లింక్‌లు ఇప్పుడు అనుకూలీకరించదగినవి 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 సెలెక్టర్‌ను పాస్ చేయవచ్చు:

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

  • popperConfigబూట్‌స్ట్రాప్ యొక్క డిఫాల్ట్ పాపర్ కాన్ఫిగరేషన్‌ను ఆర్గ్యుమెంట్‌గా అంగీకరించే ఫంక్షన్‌గా పాస్ చేయవచ్చు, తద్వారా మీరు ఈ డిఫాల్ట్ కాన్ఫిగరేషన్‌ను మీ మార్గంలో విలీనం చేయవచ్చు. డ్రాప్‌డౌన్‌లు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌లకు వర్తిస్తుంది.

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

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