v4కి మైగ్రేట్ అవుతోంది

బూట్‌స్ట్రాప్ 4 అనేది మొత్తం ప్రాజెక్ట్‌ను తిరిగి వ్రాయడం. అత్యంత ముఖ్యమైన మార్పులు దిగువన సంగ్రహించబడ్డాయి, సంబంధిత భాగాలకు మరింత నిర్దిష్టమైన మార్పులు ఉంటాయి.

స్థిరమైన మార్పులు

బీటా 3 నుండి మా స్థిరమైన v4.x విడుదలకు మారుతోంది, బ్రేకింగ్ మార్పులు లేవు, కానీ కొన్ని ముఖ్యమైన మార్పులు ఉన్నాయి.

ప్రింటింగ్

• విరిగిన ముద్రణ వినియోగాలు పరిష్కరించబడ్డాయి. ఇంతకు ముందు, ఒక .d-print-*తరగతిని ఉపయోగించడం ఊహించని విధంగా ఏదైనా ఇతర .d-*తరగతిని భర్తీ చేస్తుంది. ఇప్పుడు, అవి మా ఇతర డిస్‌ప్లే యుటిలిటీలకు సరిపోతాయి మరియు ఆ మీడియాకు మాత్రమే వర్తిస్తాయి ( @media print).

• ఇతర యుటిలిటీలతో సరిపోలడానికి అందుబాటులో ఉన్న ప్రింట్ డిస్‌ప్లే యుటిలిటీలను విస్తరించింది. బీటా 3 మరియు పాతవి మాత్రమే కలిగి ఉన్నాయి block, inline-block, inlineమరియు none. స్థిరమైన v4 జోడించబడింది flex, inline-flex, table, table-rowమరియు table-cell.

• నిర్దేశించే కొత్త ముద్రణ శైలులతో బ్రౌజర్‌లలో స్థిర ముద్రణ ప్రివ్యూ రెండరింగ్ @page size.

బీటా 3 మార్పులు

బీటా 2 బీటా దశలో మా బ్రేకింగ్ మార్పులను చూసింది, అయితే బీటా 3 విడుదలలో పరిష్కరించాల్సిన కొన్ని మా వద్ద ఇంకా ఉన్నాయి. మీరు బీటా 2 లేదా బూట్‌స్ట్రాప్ యొక్క ఏదైనా పాత వెర్షన్ నుండి బీటా 3కి అప్‌డేట్ చేస్తుంటే ఈ మార్పులు వర్తిస్తాయి.

ఇతరాలు

• $thumbnail-transitionఉపయోగించని వేరియబుల్ తీసివేయబడింది . మేము దేనినీ మార్చడం లేదు, కనుక ఇది కేవలం అదనపు కోడ్ మాత్రమే.
• npm ప్యాకేజీలో మా సోర్స్ మరియు డిస్ట్ ఫైల్‌లు తప్ప మరే ఇతర ఫైల్‌లు ఉండవు; మీరు వాటిపై ఆధారపడినట్లయితే మరియు node_modulesఫోల్డర్ ద్వారా మా స్క్రిప్ట్‌లను అమలు చేస్తుంటే, మీరు మీ వర్క్‌ఫ్లోను స్వీకరించాలి.

రూపాలు

• అనుకూల మరియు డిఫాల్ట్ చెక్‌బాక్స్‌లు మరియు రేడియోలు రెండింటినీ తిరిగి వ్రాశారు. ఇప్పుడు, రెండూ సరిపోలే HTML నిర్మాణాన్ని కలిగి ఉన్నాయి (అవుటర్ మరియు <div>తోబుట్టువులతో ) మరియు ఒకే లేఅవుట్ స్టైల్స్ (స్టాక్ చేయబడిన డిఫాల్ట్, మాడిఫైయర్ క్లాస్‌తో ఇన్‌లైన్). ఇది ఇన్‌పుట్ స్థితి ఆధారంగా లేబుల్‌ని స్టైల్ చేయడానికి, లక్షణానికి మద్దతుని సరళీకృతం చేయడానికి (గతంలో పేరెంట్ క్లాస్ అవసరం) మరియు మా ఫారమ్ ధ్రువీకరణకు మెరుగైన మద్దతునిస్తుంది.<input><label>disabled

  ఇందులో భాగంగా, మేము background-imageఅనుకూల ఫారమ్ చెక్‌బాక్స్‌లు మరియు రేడియోలలో బహుళ లను నిర్వహించడానికి CSSని మార్చాము. గతంలో, ఇప్పుడు తీసివేయబడిన .custom-control-indicatorమూలకం నేపథ్య రంగు, గ్రేడియంట్ మరియు SVG చిహ్నాన్ని కలిగి ఉంది. బ్యాక్‌గ్రౌండ్ గ్రేడియంట్‌ని అనుకూలీకరించడం అంటే మీరు ఒక్కటి మార్చాల్సిన ప్రతిసారీ వాటన్నింటినీ భర్తీ చేయడం. ఇప్పుడు, మేము .custom-control-label::beforeపూరక మరియు ప్రవణత కోసం కలిగి ఉన్నాము మరియు .custom-control-label::afterచిహ్నాన్ని నిర్వహిస్తాము.

  కస్టమ్ చెక్ ఇన్‌లైన్ చేయడానికి, జోడించండి .custom-control-inline.

• ఇన్‌పుట్ ఆధారిత బటన్ సమూహాల కోసం ఎంపిక సాధనం నవీకరించబడింది. [data-toggle="buttons"] { }శైలి మరియు ప్రవర్తనకు బదులుగా , మేము కేవలం JS ప్రవర్తనల కోసం లక్షణాన్ని ఉపయోగిస్తాము మరియు స్టైలింగ్ కోసం కొత్త తరగతిపై dataఆధారపడతాము ..btn-group-toggle

• .col-form-legendకొద్దిగా మెరుగుపడిన అనుకూలంగా తీసివేయబడింది .col-form-label. ఈ విధంగా .col-form-label-smమరియు సులభంగా మూలకాలపై .col-form-label-lgఉపయోగించవచ్చు .<legend>

• $custom-file-textకస్టమ్ ఫైల్ ఇన్‌పుట్‌లు వాటి Sass వేరియబుల్‌కు మార్పును పొందాయి . ఇది ఇకపై సమూహ సాస్ మ్యాప్ కాదు మరియు ఇప్పుడు ఒక స్ట్రింగ్‌కు Browseమాత్రమే శక్తినిస్తుంది-బటన్ ఇప్పుడు మా Sass నుండి ఉత్పత్తి చేయబడిన ఏకైక నకిలీ మూలకం. వచనం ఇప్పుడు Choose fileనుండి వచ్చింది .custom-file-label.

ఇన్‌పుట్ సమూహాలు

• ఇన్‌పుట్ గ్రూప్ యాడ్‌ఆన్‌లు ఇప్పుడు ఇన్‌పుట్‌కి సంబంధించి వాటి ప్లేస్‌మెంట్‌కు నిర్దిష్టంగా ఉంటాయి. మేము రెండు కొత్త తరగతుల కోసం తొలగించాము .input-group-addonమరియు . మీరు మా CSSలో చాలా వరకు సులభతరం చేస్తూ, ఇప్పుడు అనుబంధం లేదా ప్రీపెండ్‌ని స్పష్టంగా ఉపయోగించాలి. అనుబంధం లేదా ముందుగా ఉంచడంలో, మీ బటన్‌లు ఎక్కడైనా ఉన్నట్లుగా ఉంచండి, కానీ వచనాన్ని వ్రాప్ చేయండి ..input-group-btn.input-group-prepend.input-group-append.input-group-text

• బహుళ ఇన్‌పుట్‌ల వలె ధృవీకరణ శైలులకు ఇప్పుడు మద్దతు ఉంది (అయితే మీరు ఒక్కో సమూహానికి ఒక ఇన్‌పుట్‌ను మాత్రమే ధృవీకరించగలరు).

• సైజింగ్ తరగతులు తప్పనిసరిగా పేరెంట్‌పై ఉండాలి .input-groupమరియు వ్యక్తిగత ఫారమ్ ఎలిమెంట్‌లపై కాదు.

బీటా 2 మార్పులు

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

బ్రేకింగ్

• $badge-colorవేరియబుల్ మరియు దాని వినియోగం తీసివేయబడింది .badge. colorమేము ఆధారంగా ఎంచుకోవడానికి రంగు కాంట్రాస్ట్ ఫంక్షన్‌ని ఉపయోగిస్తాము background-color, కాబట్టి వేరియబుల్ అనవసరం.
• CSS స్థానిక ఫిల్టర్‌తో విభేదాలను నివారించడానికి grayscale()ఫంక్షన్ పేరు మార్చబడింది .gray()grayscale
• పేరు మార్చబడింది .table-inverse, .thead-inverse, మరియు .thead-defaultకు .*-darkమరియు .*-light, ఇతర చోట్ల ఉపయోగించిన మా రంగు పథకాలకు సరిపోలుతుంది.
• ప్రతిస్పందించే పట్టికలు ఇప్పుడు ప్రతి గ్రిడ్ బ్రేక్‌పాయింట్ కోసం తరగతులను రూపొందిస్తాయి. ఇది బీటా 1 నుండి విరిగిపోతుంది, ఎందుకంటే .table-responsiveమీరు ఉపయోగిస్తున్నది ఎక్కువగా ఉంటుంది .table-responsive-md. మీరు ఇప్పుడు ఉపయోగించవచ్చు .table-responsiveలేదా .table-responsive-{sm,md,lg,xl}అవసరం.
• ప్రత్యామ్నాయాల కోసం (ఉదా, నూలు లేదా npm) ప్యాకేజీ నిర్వాహకుడు నిలిపివేయబడినందున బోవర్ మద్దతు తొలగించబడింది. వివరాల కోసం bower/bower#2298ని చూడండి.
• బూట్‌స్ట్రాప్‌కి ఇప్పటికీ j క్వెరీ 1.9.1 లేదా అంతకంటే ఎక్కువ అవసరం, కానీ v3.x యొక్క మద్దతు ఉన్న బ్రౌజర్‌లు బూట్‌స్ట్రాప్‌కు మద్దతిచ్చేవి మరియు v3.x కొన్ని భద్రతా పరిష్కారాలను కలిగి ఉన్నందున మీరు వెర్షన్ 3.xని ఉపయోగించమని సలహా ఇస్తున్నారు.
• .form-control-labelఉపయోగించని తరగతిని తొలగించారు . మీరు ఈ తరగతిని ఉపయోగించినట్లయితే, సమాంతర ఫారమ్ లేఅవుట్‌లలో దాని అనుబంధిత ఇన్‌పుట్‌తో .col-form-labelనిలువుగా మధ్యలో ఉండే తరగతికి ఇది నకిలీ.<label>
• color-yiqప్రాపర్టీని కలిగి ఉన్న మిక్సిన్ నుండి విలువను అందించే ఫంక్షన్‌కి మార్చబడింది, colorఇది ఏదైనా CSS ప్రాపర్టీ కోసం దాన్ని ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది. ఉదాహరణకు, బదులుగా color-yiq(#000), మీరు వ్రాస్తారు color: color-yiq(#000);.

ముఖ్యాంశాలు

• మోడల్స్‌లో కొత్త pointer-eventsవినియోగాన్ని ప్రవేశపెట్టింది. బాహ్య కస్టమ్ క్లిక్ హ్యాండ్లింగ్ కోసం .modal-dialogఈవెంట్‌ల గుండా వెళుతుంది pointer-events: none(ఏదైనా క్లిక్‌ల కోసం వినడం సాధ్యమవుతుంది .modal-backdrop), ఆపై దానితో వాస్తవాన్ని .modal-contentప్రతిఘటిస్తుంది pointer-events: auto.

సారాంశం

v3 నుండి v4కి మారేటప్పుడు మీరు తెలుసుకోవాలనుకునే పెద్ద టికెట్ అంశాలు ఇక్కడ ఉన్నాయి.

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

• IE8, IE9 మరియు iOS 6 మద్దతును తొలగించారు. v4 ఇప్పుడు IE10+ మరియు iOS 7+ మాత్రమే. వాటిలో దేనినైనా అవసరమయ్యే సైట్‌ల కోసం, v3ని ఉపయోగించండి.
• Android v5.0 Lollipop యొక్క బ్రౌజర్ మరియు WebView కోసం అధికారిక మద్దతు జోడించబడింది. Android బ్రౌజర్ మరియు WebView యొక్క మునుపటి సంస్కరణలు అనధికారికంగా మాత్రమే మద్దతునిస్తాయి.

ప్రపంచ మార్పులు

• Flexbox డిఫాల్ట్‌గా ప్రారంభించబడింది. సాధారణంగా దీనర్థం ఫ్లోట్‌ల నుండి దూరంగా వెళ్లడం మరియు మా భాగాలలో మరిన్ని.
• మా సోర్స్ CSS ఫైల్‌ల కోసం Less నుండి Sass కి మార్చబడింది.
• pxపరికరం వీక్షణపోర్ట్‌లు రకం పరిమాణం ద్వారా ప్రభావితం కానందున మీడియా ప్రశ్నలు మరియు గ్రిడ్ ప్రవర్తన remకోసం పిక్సెల్‌లు ఇప్పటికీ ఉపయోగించబడుతున్నప్పటికీ, మా ప్రాథమిక CSS యూనిట్‌గా మార్చబడింది .
• 14pxనుండి గ్లోబల్ ఫాంట్-పరిమాణం పెరిగింది 16px.
• ఐదవ ఎంపికను జోడించడానికి గ్రిడ్ శ్రేణులను పునరుద్ధరించారు (చిన్న పరికరాల వద్ద 576pxమరియు దిగువన చిరునామా) మరియు -xsఆ తరగతుల నుండి ఇన్‌ఫిక్స్ తీసివేయబడింది. ఉదాహరణ: .col-6.col-sm-4.col-md-3.
• $enable-gradients: trueSCSS వేరియబుల్స్ (ఉదా, ) ద్వారా కాన్ఫిగర్ చేయదగిన ఎంపికలతో ప్రత్యేక ఐచ్ఛిక థీమ్ భర్తీ చేయబడింది .
• గ్రంట్‌కు బదులుగా npm స్క్రిప్ట్‌ల శ్రేణిని ఉపయోగించడానికి బిల్డ్ సిస్టమ్ ఓవర్‌హాల్ చేయబడింది. అన్ని స్క్రిప్ట్‌ల కోసం చూడండి package.jsonలేదా స్థానిక అభివృద్ధి అవసరాల కోసం మా ప్రాజెక్ట్ రీడ్‌మీని చూడండి.
• బూట్‌స్ట్రాప్ యొక్క ప్రతిస్పందించని వినియోగానికి ఇకపై మద్దతు లేదు.
• మరింత విస్తృతమైన సెటప్ డాక్యుమెంటేషన్ మరియు అనుకూలీకరించిన బిల్డ్‌లకు అనుకూలంగా ఆన్‌లైన్ కస్టమైజర్‌ను వదిలివేసింది.
• సాధారణ CSS ప్రాపర్టీ-వాల్యూ జతల మరియు మార్జిన్/ప్యాడింగ్ స్పేసింగ్ షార్ట్‌కట్‌ల కోసం డజన్ల కొద్దీ కొత్త యుటిలిటీ క్లాసులు జోడించబడ్డాయి .

గ్రిడ్ వ్యవస్థ

• ఫ్లెక్స్‌బాక్స్‌కి తరలించబడింది.
  • గ్రిడ్ మిక్సిన్‌లు మరియు ముందే నిర్వచించిన తరగతుల్లో ఫ్లెక్స్‌బాక్స్‌కు మద్దతు జోడించబడింది.
  • ఫ్లెక్స్‌బాక్స్‌లో భాగంగా, నిలువు మరియు క్షితిజ సమాంతర అమరిక తరగతులకు మద్దతు కూడా ఉంది.
• గ్రిడ్ క్లాస్ పేర్లు మరియు కొత్త గ్రిడ్ టైర్ అప్‌డేట్ చేయబడింది.
  • మరింత గ్రాన్యులర్ నియంత్రణ కోసం smదిగువన కొత్త గ్రిడ్ టైర్ జోడించబడింది . 768pxమేము ఇప్పుడు కలిగి xs, sm, md, lgమరియు xl. దీని అర్థం ప్రతి శ్రేణి ఒక స్థాయిని పెంచింది (కాబట్టి .col-md-6v3లో ఇప్పుడు .col-lg-6v4లో ఉంది).
  • xsmin-width: 0గ్రిడ్ తరగతులు వారు సెట్ పిక్సెల్ విలువలో కాకుండా శైలులను వర్తింపజేయడం ప్రారంభిస్తారని మరింత ఖచ్చితంగా సూచించడానికి infix అవసరం లేకుండా సవరించబడింది . బదులుగా .col-xs-6, ఇది ఇప్పుడు .col-6. అన్ని ఇతర గ్రిడ్ శ్రేణులకు infix అవసరం (ఉదా, sm).
• గ్రిడ్ పరిమాణాలు, మిక్సిన్‌లు మరియు వేరియబుల్‌లు నవీకరించబడ్డాయి.
  • గ్రిడ్ గట్టర్‌లు ఇప్పుడు సాస్ మ్యాప్‌ను కలిగి ఉన్నాయి కాబట్టి మీరు ప్రతి బ్రేక్‌పాయింట్ వద్ద నిర్దిష్ట గట్టర్ వెడల్పులను పేర్కొనవచ్చు.
  • make-col-readyప్రిపరేషన్ మిక్సిన్‌ని ఉపయోగించుకోవడానికి గ్రిడ్ మిక్సిన్‌లు అప్‌డేట్ చేయబడ్డాయి మరియు వ్యక్తిగత కాలమ్ సైజింగ్ కోసం make-colసెట్ చేయడానికి a.flexmax-width
  • కొత్త గ్రిడ్ టైర్‌ను లెక్కించడానికి గ్రిడ్ సిస్టమ్ మీడియా క్వెరీ బ్రేక్‌పాయింట్‌లు మరియు కంటైనర్ వెడల్పులను మార్చారు మరియు నిలువు వరుసలు 12వాటి గరిష్ట వెడల్పుతో సమానంగా విభజించబడతాయని నిర్ధారించుకోండి.
  • గ్రిడ్ బ్రేక్‌పాయింట్‌లు మరియు కంటైనర్ వెడల్పులు ఇప్పుడు కొన్ని ప్రత్యేక వేరియబుల్‌లకు బదులుగా సాస్ మ్యాప్‌లు ( $grid-breakpointsమరియు ) ద్వారా నిర్వహించబడతాయి. $container-max-widthsఇవి @screen-*వేరియబుల్స్‌ను పూర్తిగా భర్తీ చేస్తాయి మరియు గ్రిడ్ టైర్‌లను పూర్తిగా అనుకూలీకరించడానికి మిమ్మల్ని అనుమతిస్తాయి.
  • మీడియా ప్రశ్నలు కూడా మారాయి. ప్రతిసారీ అదే విలువతో మా మీడియా ప్రశ్న డిక్లరేషన్‌లను పునరావృతం చేయడానికి బదులుగా, ఇప్పుడు మనకు @include media-breakpoint-up/down/only. ఇప్పుడు, వ్రాయడానికి బదులుగా @media (min-width: @screen-sm-min) { ... }, మీరు వ్రాయవచ్చు @include media-breakpoint-up(sm) { ... }.

భాగాలు

• డ్రాప్ చేయబడిన ప్యానెల్‌లు, థంబ్‌నెయిల్‌లు మరియు బావులు కొత్త అన్నింటినీ చుట్టుముట్టే భాగం, కార్డ్‌లు .
• Glyphicons ఐకాన్ ఫాంట్‌ని వదిలివేసింది. మీకు చిహ్నాలు కావాలంటే, కొన్ని ఎంపికలు:
  • Glyphicons యొక్క అప్‌స్ట్రీమ్ వెర్షన్
  • ఆక్టికాన్స్
  • ఫాంట్ అద్భుతం
  • ప్రత్యామ్నాయాల జాబితా కోసం పొడిగింపు పేజీని చూడండి . అదనపు సూచనలు ఉన్నాయా? దయచేసి సమస్య లేదా PRని తెరవండి.
• Affix j క్వెరీ ప్లగ్ఇన్‌ని వదిలివేసింది.
  • position: stickyబదులుగా ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము . HTML5ని చూడండి, దయచేసి వివరాలు మరియు నిర్దిష్ట పాలీఫిల్ సిఫార్సుల కోసం నమోదు చేయండి. దానిని అమలు చేయడానికి ఒక నియమాన్ని ఉపయోగించడం ఒక సూచన @supports(ఉదా, @supports (position: sticky) { ... })/
  • మీరు అదనపు, నాన్ position-స్టైల్‌లను వర్తింపజేయడానికి Affixని ఉపయోగిస్తుంటే, పాలీఫిల్‌లు మీ వినియోగ కేసుకు మద్దతు ఇవ్వకపోవచ్చు. అటువంటి ఉపయోగాల కోసం ఒక ఎంపిక మూడవ పక్షం ScrollPos-Styler లైబ్రరీ.
• పేజర్ కాంపోనెంట్ తప్పనిసరిగా కొద్దిగా కస్టమైజ్ చేయబడిన బటన్‌లు అయినందున తొలగించబడింది.
• ఓవర్-స్పెసిఫిక్ చిల్డ్రన్ సెలెక్టర్‌లకు బదులుగా మరిన్ని అన్-నెస్టెడ్ క్లాస్ సెలెక్టర్‌లను ఉపయోగించడానికి దాదాపు అన్ని కాంపోనెంట్‌లను రీఫ్యాక్టర్డ్ చేసింది.

భాగం ద్వారా

ఈ జాబితా v3.xx మరియు v4.0.0 మధ్య కాంపోనెంట్ వారీగా కీలక మార్పులను హైలైట్ చేస్తుంది.

రీబూట్ చేయండి

బూట్‌స్ట్రాప్ 4కి కొత్తది రీబూట్ , ఇది మా స్వంత అభిప్రాయంతో కూడిన రీసెట్ స్టైల్‌లతో సాధారణీకరణపై రూపొందించే కొత్త స్టైల్‌షీట్. ఈ ఫైల్‌లో కనిపించే సెలెక్టర్లు ఎలిమెంట్‌లను మాత్రమే ఉపయోగిస్తాయి-ఇక్కడ తరగతులు లేవు. ఇది మరింత మాడ్యులర్ విధానం కోసం మా కాంపోనెంట్ స్టైల్స్ నుండి మా రీసెట్ స్టైల్‌లను వేరు చేస్తుంది. ఇందులో ఉండే కొన్ని ముఖ్యమైన రీసెట్‌లలో box-sizing: border-boxమార్పు, అనేక మూలకాలు, లింక్ స్టైల్‌లు మరియు అనేక ఫారమ్ ఎలిమెంట్ రీసెట్‌ల నుండి యూనిట్‌లకు emమారడం .rem

టైపోగ్రఫీ

• .text-అన్ని యుటిలిటీలను _utilities.scssఫైల్‌కి తరలించారు .
• దాని స్టైల్స్ యుటిలిటీస్ .page-headerద్వారా వర్తింపజేయవచ్చు కాబట్టి తొలగించబడింది.
• .dl-horizontalపడిపోయింది. బదులుగా, దాని మరియు .rowపిల్లలపై <dl>గ్రిడ్ కాలమ్ తరగతులను (లేదా మిక్సిన్‌లు) ఉపయోగించండి మరియు ఉపయోగించండి .<dt><dd>
• పునఃరూపకల్పన చేయబడిన బ్లాక్‌కోట్‌లు, వాటి శైలులను <blockquote>మూలకం నుండి ఒకే తరగతికి తరలించడం, .blockquote. .blockquote-reverseటెక్స్ట్ యుటిలిటీల కోసం మాడిఫైయర్ డ్రాప్ చేయబడింది.
• .list-inlineఇప్పుడు దాని పిల్లల జాబితా ఐటెమ్‌లకు కొత్త .list-inline-itemతరగతిని వర్తింపజేయడం అవసరం.

చిత్రాలు

• గా పేరు మార్చబడింది .img-responsive..img-fluid
• .img-roundedపేరు మార్చబడింది.rounded
• .img-circleపేరు మార్చబడింది.rounded-circle

పట్టికలు

• సెలెక్టర్ యొక్క దాదాపు అన్ని సందర్భాలు >తీసివేయబడ్డాయి, అంటే సమూహ పట్టికలు ఇప్పుడు వారి తల్లిదండ్రుల నుండి స్వయంచాలకంగా స్టైల్‌లను పొందుతాయి. ఇది మా ఎంపికదారులను మరియు సంభావ్య అనుకూలీకరణలను చాలా సులభతరం చేస్తుంది.
• .table-condensedస్థిరత్వం కోసం పేరు మార్చబడింది .table-sm.
• కొత్త .table-inverseఎంపికను జోడించారు.
• పట్టిక హెడర్ మాడిఫైయర్‌లు జోడించబడ్డాయి: .thead-defaultమరియు .thead-inverse.
• సందర్భోచిత తరగతులకు .table--ప్రిఫిక్స్ ఉండేలా పేరు మార్చబడింది. అందుకే .active, .success, .warning, .dangerమరియు .infoకు .table-active, .table-success, మరియు . .table-warning_.table-danger.table-info

రూపాలు

• తరలించబడిన మూలకం _reboot.scssఫైల్‌కి రీసెట్ చేయబడింది.
• గా పేరు మార్చబడింది .control-label..col-form-label
• వరుసగా పేరు మార్చబడింది .input-lgమరియు .input-smకు .form-control-lgమరియు .form-control-sm.
• సింప్లిసిటీ .form-group-*కోసం క్లాసులు మానేశారు. .form-control-*బదులుగా ఇప్పుడు తరగతులను ఉపయోగించండి .
• బ్లాక్-లెవల్ హెల్ప్ టెక్స్ట్ కోసం డ్రాప్ .help-blockచేయబడింది మరియు రీప్లేస్ చేయబడింది . .form-textఇన్‌లైన్ సహాయ వచనం మరియు ఇతర అనువైన ఎంపికల కోసం, వంటి యుటిలిటీ తరగతులను ఉపయోగించండి .text-muted.
• పడిపోయింది .radio-inlineమరియు .checkbox-inline.
• ఏకీకృత .checkboxమరియు వివిధ .radioతరగతులకు ..form-check.form-check-*
• క్షితిజ సమాంతర రూపాలు సరిదిద్దబడ్డాయి:
  • .form-horizontalతరగతి అవసరాన్ని తొలగించారు .
  • .form-groupమిక్సిన్ ద్వారా స్టైల్‌లు ఇకపై .rowవర్తించవు, కాబట్టి .rowఇప్పుడు క్షితిజ సమాంతర గ్రిడ్ లేఅవుట్‌ల కోసం అవసరం (ఉదా, <div class="form-group row">).
  • s .col-form-labelతో నిలువుగా మధ్యలో ఉన్న లేబుల్‌లకు కొత్త తరగతి జోడించబడింది ..form-control
  • .form-rowగ్రిడ్ క్లాస్‌లతో కూడిన కాంపాక్ట్ ఫారమ్ లేఅవుట్‌ల కోసం కొత్తది జోడించబడింది (మీ .rowకోసం మీని మార్చుకోండి .form-rowమరియు వెళ్లండి).
• అనుకూల ఫారమ్‌ల మద్దతు జోడించబడింది (చెక్‌బాక్స్‌లు, రేడియోలు, ఎంపికలు మరియు ఫైల్ ఇన్‌పుట్‌ల కోసం).
• CSS మరియు సూడో-క్లాస్‌ల ద్వారా HTML5 ఫారమ్ ధ్రువీకరణతో భర్తీ చేయబడిన .has-error, .has-warning, మరియు తరగతులు..has-success:invalid:valid
• గా పేరు మార్చబడింది .form-control-static..form-control-plaintext

బటన్లు

• గా పేరు మార్చబడింది .btn-default..btn-secondary
• v3ల కంటే దామాషా ప్రకారం చాలా చిన్నది కాబట్టి .btn-xsక్లాస్ పూర్తిగా తొలగించబడింది ..btn-sm
• j క్వెరీ ప్లగ్ఇన్ యొక్క స్టేట్‌ఫుల్ బటన్ ఫీచర్ button.jsతొలగించబడింది. ఇది $().button(string)మరియు $().button('reset')పద్ధతులను కలిగి ఉంటుంది. బదులుగా కస్టమ్ జావాస్క్రిప్ట్ యొక్క చిన్న బిట్‌ను ఉపయోగించమని మేము సలహా ఇస్తున్నాము, ఇది మీరు కోరుకున్న విధంగా ప్రవర్తించడం వల్ల ప్రయోజనం ఉంటుంది.
  • ప్లగ్ఇన్ యొక్క ఇతర ఫీచర్లు (బటన్ చెక్‌బాక్స్‌లు, బటన్ రేడియోలు, సింగిల్-టోగుల్ బటన్‌లు) v4లో అలాగే ఉంచబడ్డాయి.
• బటన్‌లను IE9+ సపోర్ట్‌గా మార్చండి [disabled]. అయినప్పటికీ స్థానిక డిసేబుల్ ఫీల్డ్‌సెట్‌లు IE11లో బగ్గీగా ఉన్నందున ఇప్పటికీ అవసరం .:disabled:disabledfieldset[disabled]

బటన్ సమూహం

• ఫ్లెక్స్‌బాక్స్‌తో కాంపోనెంట్‌ని తిరిగి వ్రాసారు.
• తీసివేయబడింది .btn-group-justified. ప్రత్యామ్నాయంగా మీరు <div class="btn-group d-flex" role="group"></div>మూలకాల చుట్టూ ర్యాపర్‌గా ఉపయోగించవచ్చు .w-100.
• యొక్క .btn-group-xsతీసివేయబడిన తరగతిని పూర్తిగా తొలగించారు .btn-xs.
• బటన్ టూల్‌బార్‌లలో బటన్ సమూహాల మధ్య స్పష్టమైన అంతరం తీసివేయబడింది; ఇప్పుడు మార్జిన్ యుటిలి��ీలను ఉపయోగించండి.
• ఇతర భాగాలతో ఉపయోగం కోసం మెరుగైన డాక్యుమెంటేషన్.

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

• అన్ని భాగాలు, మాడిఫైయర్‌లు మొదలైన వాటి కోసం పేరెంట్ సెలెక్టర్‌ల నుండి ఏకవచన తరగతులకు మార్చబడింది.
• డ్రాప్‌డౌన్ మెనుకి జోడించబడిన పైకి లేదా క్రిందికి ఎదురుగా ఉన్న బాణాలతో ఇకపై షిప్ చేయడానికి సరళీకృత డ్రాప్‌డౌన్ శైలులు.
• డ్రాప్‌డౌన్‌లను ఇప్పుడు <div>s లేదా s తో నిర్మించవచ్చు .<ul>
• డ్రాప్‌డౌన్ ఐటెమ్‌ల కోసం సులభమైన, అంతర్నిర్మిత మద్దతును అందించడానికి <a>మరియు <button>ఆధారిత డ్రాప్‌డౌన్ శైలులు మరియు మార్కప్‌లను పునర్నిర్మించండి.
• గా పేరు మార్చబడింది .divider..dropdown-divider
• డ్రాప్‌డౌన్ అంశాలు ఇప్పుడు అవసరం .dropdown-item.
• డ్రాప్‌డౌన్ టోగుల్‌లకు ఇకపై స్పష్టమైన అవసరం లేదు <span class="caret"></span>; ఇది ఇప్పుడు CSS ::afterఆన్ ద్వారా స్వయంచాలకంగా అందించబడుతుంది .dropdown-toggle.

గ్రిడ్ వ్యవస్థ

• వంటి కొత్త 576pxగ్రిడ్ బ్రేక్‌పాయింట్ జోడించబడింది sm, అంటే ఇప్పుడు మొత్తం ఐదు శ్రేణులు ( xs, sm, md, lgమరియు xl) ఉన్నాయి.
• సరళమైన గ్రిడ్ తరగతుల కోసం ప్రతిస్పందించే గ్రిడ్ మాడిఫైయర్ .col-{breakpoint}-{modifier}-{size}తరగతులకు పేరు మార్చబడింది ..{modifier}-{breakpoint}-{size}
• కొత్త ఫ్లెక్స్‌బాక్స్-పవర్డ్ క్లాస్‌ల కోసం పుష్ మరియు పుల్ మాడిఫైయర్ క్లాసులు తొలగించబడ్డాయి order. ఉదాహరణకు, బదులుగా .col-8.push-4మరియు .col-4.pull-8, మీరు ఉపయోగించే .col-8.order-2మరియు .col-4.order-1.
• గ్రిడ్ సిస్టమ్ మరియు భాగాల కోసం ఫ్లెక్స్‌బాక్స్ యుటిలిటీ క్లాసులు జోడించబడ్డాయి.

జాబితా సమూహాలు

• ఫ్లెక్స్‌బాక్స్‌తో కాంపోనెంట్‌ని తిరిగి వ్రాసారు.
• లిస్ట్ గ్రూప్ ఐటెమ్‌ల స్టైలింగ్ లింక్ మరియు బటన్ వెర్షన్‌ల కోసం a.list-group-itemస్పష్టమైన క్లాస్‌తో భర్తీ చేయబడింది ..list-group-item-action
• .list-group-flushకార్డ్‌లతో ఉపయోగించడానికి తరగతి జోడించబడింది .

మోడల్

• ఫ్లెక్స్‌బాక్స్‌తో కాంపోనెంట్‌ని తిరిగి వ్రాసారు.
• ఫ్లెక్స్‌బాక్స్‌కు తరలింపు కారణంగా, మేము ఇకపై ఫ్లోట్‌లను ఉపయోగించనందున హెడర్‌లోని డిస్మిస్ చిహ్నాల సమలేఖనం విచ్ఛిన్నమయ్యే అవకాశం ఉంది. ఫ్లోటెడ్ కంటెంట్ మొదట వస్తుంది, కానీ ఫ్లెక్స్‌బాక్స్‌తో ఇకపై అలా ఉండదు. పరిష్కరించడానికి మోడల్ శీర్షికల తర్వాత వచ్చేలా మీ తొలగింపు చిహ్నాలను నవీకరించండి.
• ఎంపిక ( ఇది remoteబాహ్య కంటెంట్‌ను స్వయంచాలకంగా లోడ్ చేయడానికి మరియు మోడల్‌లోకి ఇంజెక్ట్ చేయడానికి ఉపయోగించబడుతుంది) మరియు సంబంధిత loaded.bs.modalఈవెంట్ తీసివేయబడ్డాయి. బదులుగా క్లయింట్-సైడ్ టెంప్లేటింగ్ లేదా డేటా బైండింగ్ ఫ్రేమ్‌వర్క్‌ని ఉపయోగించమని లేదా మీరే jQuery.loadకి కాల్ చేయమని మేము సిఫార్సు చేస్తున్నాము.

నవ్స్

• ఫ్లెక్స్‌బాక్స్‌తో కాంపోనెంట్‌ని తిరిగి వ్రాసారు.
• అన్-నెస్టెడ్ క్లాస్‌ల ద్వారా సరళమైన స్టైలింగ్ కోసం దాదాపు అన్ని >సెలెక్టర్‌లను తొలగించారు.
• వంటి HTML-నిర్దిష్ట సెలెక్టర్‌లకు బదులుగా , మేము s, s మరియు s .nav > li > aకోసం ప్రత్యేక తరగతులను ఉపయోగిస్తాము . ఇది మీ HTMLని మరింత సౌకర్యవంతమైనదిగా చేస్తుంది, అయితే పొడిగింపును పెంచింది..nav.nav-item.nav-link

నవబార్

అమరిక, ప్రతిస్పందన మరియు అనుకూలీకరణకు మెరుగైన మద్దతుతో నావ్‌బార్ పూర్తిగా ఫ్లెక్స్‌బాక్స్‌లో తిరిగి వ్రాయబడింది.

• ప్రతిస్పందించే నావ్‌బార్ ప్రవర్తనలు ఇప్పుడు నావ్‌బార్‌ను ఎక్కడ కుదించాలో మీరు ఎంచుకున్న .navbarదాని ద్వారా తరగతికి వర్తింపజేయబడతాయి. గతంలో ఇది తక్కువ వేరియబుల్ సవరణ మరియు అవసరమైన రీకంపైలింగ్. .navbar-expand-{breakpoint}
• .navbar-defaultఇప్పుడు అలాగే .navbar-lightఉంది .navbar-dark. ప్రతి నావ్‌బార్‌లో వీటిలో ఒకటి అవసరం. అయితే, ఈ తరగతులు ఇకపై background-colors సెట్ చేయబడవు; బదులుగా అవి తప్పనిసరిగా ప్రభావితం చేస్తాయి color.
• Navbar లకు ఇప్పుడు ఒక రకమైన నేపథ్య ప్రకటన అవసరం. మా బ్యాక్‌గ్రౌండ్ యుటిలిటీస్ ( ) నుండి ఎంచుకోండి లేదా పిచ్చి అనుకూలీకరణ కోసం.bg-* పైన ఉన్న కాంతి/విలోమ తరగతులతో మీ స్వంతంగా సెట్ చేసుకోండి .
• ఫ్లెక్స్‌బాక్స్ స్టైల్‌లను బట్టి, నావ్‌బార్‌లు ఇప్పుడు సులభమైన అమరిక ఎంపికల కోసం ఫ్లెక్స్‌బాక్స్ యుటిలిటీలను ఉపయోగించవచ్చు.
• .navbar-toggleఇప్పుడు .navbar-togglerఉంది మరియు విభిన్న శైలులు మరియు అంతర్గత మార్కప్‌ను కలిగి ఉంది (మూడు <span>సెకన్లు లేవు).
• .navbar-formక్లాస్ పూర్తిగా మానేశాడు . ఇది ఇకపై అవసరం లేదు; బదులుగా, .form-inlineఅవసరమైన విధంగా మార్జిన్ యుటిలిటీలను ఉపయోగించండి మరియు వర్తింపజేయండి.
• Navbarలు ఇకపై చేర్చబడవు margin-bottomలేదా border-radiusడిఫాల్ట్‌గా ఉండవు. అవసరమైన విధంగా యుటిలిటీలను ఉపయోగించండి.
• నావ్‌బార్‌లను కలిగి ఉన్న అన్ని ఉదాహరణలు కొత్త మార్కప్‌ను చేర్చడానికి నవీకరించబడ్డాయి.

పేజినేషన్

• ఫ్లెక్స్‌బాక్స్‌తో కాంపోనెంట్‌ని తిరిగి వ్రాసారు.
• s యొక్క వారసులపై ఇప్పుడు స్పష్టమైన తరగతులు ( .page-item, .page-link) అవసరం.pagination
• .pagerఅనుకూలీకరించిన అవుట్‌లైన్ బటన్‌ల కంటే కొంచెం ఎక్కువగా ఉన్నందున కాంపోనెంట్ పూర్తిగా తొలగించబడింది .

బ్రెడ్ క్రంబ్స్

• s యొక్క వారసులపై ఇప్పుడు స్పష్టమైన తరగతి, .breadcrumb-item, అవసరం.breadcrumb

లేబుల్‌లు మరియు బ్యాడ్జ్‌లు

• ఏకీకృతం .labelమరియు మూలకం .badgeనుండి అస్పష్టత <label>మరియు సంబంధిత భాగాలను సరళీకృతం చేయడం.
• .badge-pillగుండ్రని "పిల్" లుక్ కోసం మాడిఫైయర్‌గా జోడించబడింది .
• జాబితా సమూహాలు మరియు ఇతర భాగాలలో బ్యాడ్జ్‌లు ఇకపై స్వయంచాలకంగా ఫ్లోట్ చేయబడవు. దాని కోసం ఇప్పుడు యుటిలిటీ తరగతులు అవసరం.
• .badge-defaultమరెక్కడా ఉపయోగించిన కాంపోనెంట్ మాడిఫైయర్ క్లాస్‌లను సరిపోల్చడానికి తొలగించబడింది మరియు .badge-secondaryజోడించబడింది.

ప్యానెల్లు, సూక్ష్మచిత్రాలు మరియు బావులు

కొత్త కార్డ్ కాంపోనెంట్ కోసం పూర్తిగా తొలగించబడింది.

ప్యానెల్లు

• .panelకు .card, ఇప్పుడు ఫ్లెక్స్‌బాక్స్‌తో నిర్మించబడింది.
• .panel-defaultతొలగించబడింది మరియు భర్తీ లేదు.
• .panel-groupతొలగించబడింది మరియు భర్తీ లేదు. .card-groupప్రత్యామ్నాయం కాదు, ఇది భిన్నంగా ఉంటుంది.
• .panel-headingకు.card-header
• .panel-titleకు .card-title. కావలసిన రూపాన్ని బట్టి, మీరు హెడ్డింగ్ ఎలిమెంట్స్ లేదా క్లాస్‌లను (ఉదా <h3>, .h3) లేదా బోల్డ్ ఎలిమెంట్స్ లేదా క్లాస్‌లను కూడా ఉపయోగించాలనుకోవచ్చు (ఉదా <strong>, <b>, .font-weight-bold). .card-titleఅదే విధంగా పేరు పెట్టబడినప్పుడు, కంటే భిన్నమైన రూపాన్ని ఉత్పత్తి చేస్తుందని గమనించండి .panel-title.
• .panel-bodyకు.card-body
• .panel-footerకు.card-footer
• .panel-primary, .panel-success, .panel-info, .panel-warning, మరియు మా సాస్ మ్యాప్ నుండి రూపొందించబడిన , , మరియు యుటిలిటీల .panel-dangerకోసం తొలగించబడ్డాయి ..bg-.text-.border$theme-colors

పురోగతి

• సందర్భోచిత .progress-bar-*తరగతులను .bg-*యుటిలిటీలతో భర్తీ చేసింది. ఉదాహరణకు, class="progress-bar progress-bar-danger"అవుతుంది class="progress-bar bg-danger".
• .activeతో యానిమేటెడ్ ప్రోగ్రెస్ బార్‌ల కోసం భర్తీ చేయబడింది .progress-bar-animated.

రంగులరాట్నం

• డిజైన్ మరియు స్టైలింగ్‌ను సులభతరం చేయడానికి మొత్తం భాగాన్ని సరిదిద్దారు. మీరు భర్తీ చేయడానికి మా వద్ద తక్కువ స్టైల్‌లు, కొత్త సూచికలు మరియు కొత్త చిహ్నాలు ఉన్నాయి.
• అన్ని CSSలు అన్-నెస్ట్ చేయబడ్డాయి మరియు పేరు మార్చబడ్డాయి, ప్రతి క్లాస్ తో ప్రిఫిక్స్ చేయబడిందని నిర్ధారిస్తుంది .carousel-.
  • రంగులరాట్నం అంశాల కోసం, .next, .prev, .left, మరియు .rightఇప్పుడు .carousel-item-next, .carousel-item-prev, .carousel-item-left, మరియు .carousel-item-right.
  • .itemఇప్పుడు కూడా ఉంది .carousel-item.
  • మునుపటి/తదుపరి నియంత్రణల కోసం, .carousel-control.rightమరియు .carousel-control.leftఇప్పుడు .carousel-control-nextమరియు .carousel-control-prev, అంటే వాటికి నిర్దిష్ట బేస్ క్లాస్ అవసరం లేదు.
• అన్ని ప్రతిస్పందించే స్టైలింగ్ తీసివేయబడింది, యుటిలిటీలకు వాయిదా వేయబడింది (ఉదా, నిర్దిష్ట వీక్షణపోర్ట్‌లలో శీర్షికలను చూపడం) మరియు అవసరమైన విధంగా అనుకూల శైలులు.
• రంగులరాట్నం ఐటెమ్‌లలోని చిత్రాల కోసం తీసివేసిన చిత్రం ఓవర్‌రైడ్‌లు, యుటిలిటీలను వాయిదా వేస్తుంది.
• కొత్త మార్కప్ మరియు స్టైల్‌లను చేర్చడానికి రంగులరాట్నం ఉదాహరణను సర్దుబాటు చేసారు.

పట్టికలు

• స్టైల్ చేసిన సమూహ పట్టికలకు మద్దతు తీసివేయబడింది. అన్ని పట్టిక శైలులు ఇప్పుడు సరళమైన సెలెక్టర్‌ల కోసం v4లో వారసత్వంగా పొందబడ్డాయి.
• విలోమ పట్టిక వేరియంట్ జోడించబడింది.

యుటిలిటీస్

• ప్రదర్శన, దాచడం మరియు మరిన్ని:
  • ప్రదర్శన యుటిలిటీలను ప్రతిస్పందించేలా చేసింది (ఉదా, .d-noneమరియు d-{sm,md,lg,xl}-none).
  • .hidden-*కొత్త డిస్‌ప్లే యుటిలిటీల కోసం చాలా వరకు యుటిలిటీలను తొలగించారు . ఉదాహరణకు, బదులుగా .hidden-sm-up, ఉపయోగించండి .d-sm-none. .hidden-printడిస్ప్లే యుటిలిటీ నేమింగ్ స్కీమ్‌ని ఉపయోగించడానికి యుటిలిటీల పేరు మార్చబడింది . ఈ పేజీలోని రెస్పాన్సివ్ యుటిలిటీస్ విభాగంలో మరింత సమాచారం .
  • .float-{sm,md,lg,xl}-{left,right,none}ప్రతిస్పందించే ఫ్లోట్‌ల కోసం తరగతులు జోడించబడ్డాయి మరియు తీసివేయబడ్డాయి .pull-leftమరియు .pull-rightఅవి అనవసరమైనవి .float-leftమరియు .float-right.
• రకం:
  • మా వచన అమరిక తరగతులకు ప్రతిస్పందించే వైవిధ్యాలు జోడించబడ్డాయి .text-{sm,md,lg,xl}-{left,center,right}.
• అమరిక మరియు అంతరం:
  • అన్ని వైపులా కొత్త ప్రతిస్పందించే మార్జిన్ మరియు పాడింగ్ యుటిలిటీలు జోడించబడ్డాయి , అలాగే నిలువు మరియు క్షితిజ సమాంతర షార్ట్‌హ్యాండ్‌లు.
  • ఫ్లెక్స్‌బాక్స్ యుటిలిటీల బోట్‌లోడ్ జోడించబడింది .
  • .center-blockకొత్త .mx-autoతరగతికి పడిపోయింది .
• పాత బ్రౌజర్ సంస్కరణలకు మద్దతును తగ్గించడానికి Clearfix నవీకరించబడింది.

విక్రేత ఉపసర్గ మిక్సిన్స్

v3.2.0లో విస్మరించబడిన బూట్‌స్ట్రాప్ 3 యొక్క విక్రేత ప్రిఫిక్స్ మిక్సిన్‌లు బూట్‌స్ట్రాప్ 4లో తీసివేయబడ్డాయి. మేము ఆటోప్రెఫిక్సర్‌ని ఉపయోగిస్తున్నందున , అవి ఇకపై అవసరం లేదు.

కింది మిక్సిన్‌లు తీసివేయబడ్డాయి : animation, animation-delay, animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-timing-function, backface-visibility, box-sizing, content-columns, hyphens_ opacity_ perspective_ perspective-origin_ rotate_ rotateX_ rotateY_ scale_ scaleX_ scaleY_ skew_ transform-origin_ transition-delay_ transition-duration_ transition-property_ transition-timing-function_transition-transformtranslatetranslate3duser-select

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

మా డాక్యుమెంటేషన్ బోర్డు అంతటా కూడా అప్‌గ్రేడ్ చేయబడింది. ఇక్కడ తక్కువగా ఉంది:

• మేము ఇప్పటికీ జెకిల్‌ని ఉపయోగిస్తున్నాము, కానీ మేము మిక్స్‌లో ప్లగిన్‌లను కలిగి ఉన్నాము:
  • bugify.rbమా బ్రౌజర్ బగ్‌ల పేజీలోని ఎంట్రీలను సమర్ధవంతంగా జాబితా చేయడానికి ఉపయోగించబడుతుంది .
  • example.rbడిఫాల్ట్ highlight.rbప్లగ్ఇన్ యొక్క అనుకూల ఫోర్క్, సులభంగా ఉదాహరణ-కోడ్ హ్యాండ్లింగ్‌ను అనుమతిస్తుంది.
  • callout.rbఅదే కస్టమ్ ఫోర్క్, కానీ మా ప్రత్యేక డాక్స్ కాల్‌అవుట్‌ల కోసం రూపొందించబడింది.
  • jekyll-toc మా విషయాల పట్టికను రూపొందించడానికి ఉపయోగించబడుతుంది.
• సులభంగా సవరించడం కోసం అన్ని డాక్స్ కంటెంట్ మార్క్‌డౌన్ (HTMLకి బదులుగా)లో తిరిగి వ్రాయబడింది.
• సరళమైన కంటెంట్ మరియు మరింత చేరుకోగల సోపానక్రమం కోసం పేజీలు పునర్వ్యవస్థీకరించబడ్డాయి.
• బూట్‌స్ట్రాప్ యొక్క వేరియబుల్స్, మిక్సిన్‌లు మరియు మరిన్నింటి యొక్క పూర్తి ప్రయోజనాన్ని పొందడానికి మేము సాధారణ CSS నుండి SCSSకి మార్చాము.

రెస్పాన్సివ్ యుటిలిటీస్

అన్ని @screen-వేరియబుల్స్ v4.0.0లో తీసివేయబడ్డాయి. బదులుగా media-breakpoint-up(), media-breakpoint-down(), లేదా media-breakpoint-only()Sass mixins లేదా $grid-breakpointsSass మ్యాప్‌ని ఉపయోగించండి.

displayమా ప్రతిస్పందించే యుటిలిటీ తరగతులు చాలా వరకు స్పష్టమైన యుటిలిటీలకు అనుకూలంగా తీసివేయబడ్డాయి .

• .hiddenమరియు తరగతులు j క్వెరీలు మరియు పద్ధతులతో .showవిభేదించినందున తీసివేయబడ్డాయి . బదులుగా, లక్షణాన్ని టోగుల్ చేయడానికి ప్రయత్నించండి లేదా మరియు వంటి ఇన్‌లైన్ స్టైల్‌లను ఉపయోగించండి .$(...).hide()$(...).show()[hidden]style="display: none;"style="display: block;"
• అన్ని .hidden-తరగతులు తీసివేయబడ్డాయి, పేరు మార్చబడిన ప్రింట్ యుటిలిటీల కోసం సేవ్ చేయండి.
  • v3 నుండి తీసివేయబడింది:.hidden-xs .hidden-sm .hidden-md .hidden-lg .visible-xs-block .visible-xs-inline .visible-xs-inline-block .visible-sm-block .visible-sm-inline .visible-sm-inline-block .visible-md-block .visible-md-inline .visible-md-inline-block .visible-lg-block .visible-lg-inline .visible-lg-inline-block
  • v4 ఆల్ఫాస్ నుండి తీసివేయబడింది:.hidden-xs-up .hidden-xs-down .hidden-sm-up .hidden-sm-down .hidden-md-up .hidden-md-down .hidden-lg-up .hidden-lg-down
• ప్రింట్ యుటిలిటీలు ఇకపై .hidden-లేదా తో ప్రారంభం కావు .visible-, కానీ .d-print-.
  • పాత పేర్లు: .visible-print-block, .visible-print-inline, .visible-print-inline-block,.hidden-print
  • కొత్త తరగతులు: .d-print-block, .d-print-inline, .d-print-inline-block,.d-print-none

స్పష్టమైన .visible-*తరగతులను ఉపయోగించకుండా, మీరు ఆ స్క్రీన్ పరిమాణంలో దానిని దాచకుండా ఒక మూలకాన్ని కనిపించేలా చేస్తారు. స్క్రీన్ పరిమాణాల యొక్క ఇచ్చిన విరామంలో మాత్రమే మూలకాన్ని చూపడానికి మీరు ఒక .d-*-noneతరగతిని ఒక తరగతితో కలపవచ్చు (ఉదా . మీడియం మరియు పెద్ద పరికరాలలో మాత్రమే మూలకాన్ని చూపుతుంది)..d-*-block.d-none.d-md-block.d-xl-none

v4లోని గ్రిడ్ బ్రేక్‌పాయింట్‌లకు మార్పులు అంటే అదే ఫలితాలను సాధించడానికి మీరు ఒక బ్రేక్‌పాయింట్ పెద్దదిగా వెళ్లవలసి ఉంటుందని గుర్తుంచుకోండి. కొత్త ప్రతిస్పందించే యుటిలిటీ క్లాస్‌లు తక్కువ సాధారణ సందర్భాలను ఉంచడానికి ప్రయత్నించవు, ఇక్కడ మూలకం యొక్క దృశ్యమానత వీక్షణపోర్ట్ పరిమాణాల యొక్క ఒకే వరుస పరిధిగా వ్యక్తీకరించబడదు; మీరు అలాంటి సందర్భాలలో అనుకూల CSSని ఉపయోగించాల్సి ఉంటుంది.