ወደ ዋናው ይዘት ዝለል ወደ ሰነዶች ዳሰሳ ዝለል
in English

ወደ v5 በመሰደድ ላይ

ከv4 ወደ v5 ለመሸጋገር እንዲረዳዎ በBootstrap ምንጭ ፋይሎች፣ ሰነዶች እና ክፍሎች ላይ የተደረጉ ለውጦችን ይከታተሉ እና ይገምግሙ።

በዚህ ገጽ ላይ

ጥገኛዎች

  • jQuery ተጥሏል።
  • ከፖፐር v1.x ወደ ፖፐር v2.x ተሻሽሏል።
  • Libsas የተሰጠው የኛ Sass አቀናባሪ ተቋርጧል።
  • ሰነዶቻችንን ለመስራት ከጄኪል ወደ ሁጎ ተሰደድን።

የአሳሽ ድጋፍ

  • ኢንተርኔት ኤክስፕሎረር 10 እና 11 ተጥሏል።
  • የማይክሮሶፍት ጠርዝ <16 (Legacy Edge) ተጥሏል
  • የወረደ ፋየርፎክስ <60
  • የወረደ Safari <12
  • iOS Safari ተጥሏል <12
  • Chrome <60 ተጥሏል።

የሰነድ ለውጦች

  • እንደገና የተነደፈ መነሻ ገጽ፣ የሰነዶች አቀማመጥ እና ግርጌ።
  • አዲስ የፓርሴል መመሪያ ታክሏል ።
  • አዲስ ታክሏል አዲስ አብጅ ክፍል ፣ v4's Theming page በመተካት ፣ በ Sass ላይ በአዲስ ዝርዝሮች፣ አለምአቀፍ የውቅር አማራጮች፣ የቀለም መርሃግብሮች፣ የሲኤስኤስ ተለዋዋጮች እና ሌሎችም።
  • ሁሉንም የቅጽ ሰነዶችን ወደ አዲስ የቅጾች ክፍል በማደራጀት ይዘቱን የበለጠ ትኩረት ወዳለው ገፆች በመከፋፈል።
  • በተመሳሳይ፣ የአቀማመጥ ክፍሉን አዘምኗል ፣ የፍርግርግ ይዘትን የበለጠ ግልጽ ለማድረግ።
  • የ"Navs" አካል ገጽ ወደ "Navs እና Tabs" ተቀይሯል።
  • የ«ቼኮች» ገጽ ወደ «ቼኮች እና ሬዲዮዎች» ተቀይሯል።
  • በጣቢያዎቻችን እና በሰነድ ስሪቶች ዙሪያ መዞርን ቀላል ለማድረግ የናቭባርን ድጋሚ ነድፎ አዲስ ንዑስ ናቭ አክሏል።
  • ለፍለጋ መስክ አዲስ የቁልፍ ሰሌዳ አቋራጭ ታክሏል Ctrl + /፡.

ሳስ

  • ተደጋጋሚ የሆኑ እሴቶችን ለማስወገድ ቀላል ለማድረግ ነባሪውን የSass ካርታ ውህደቶችን አውጥተናል። አሁን ሁሉንም ዋጋዎች በ Sass ካርታዎች ውስጥ መግለፅ እንዳለብዎት ያስታውሱ $theme-colors። ከ Sass ካርታዎች ጋር እንዴት እንደሚገናኙ ይመልከቱ ።

  • መስበርዳግም የተሰየመ 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()ከሚቀጥለው መግቻ ነጥብ ይልቅ መግቻ ነጥቡን ራሱ ይጠቀማል (ለምሳሌ፣ ከዒላማዎች 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-focushover-focus-active
    • float()
    • form-control-mixin()
    • nav-divider()
    • retina-img()
    • text-hide()(እንዲሁም የተጎዳኘውን የመገልገያ ክፍል ወድቋል፣ .text-hide)
    • visibility()
    • form-control-focus()

  • መስበርከ Sass የራሱ የቀለም ልኬት ተግባር ጋር ግጭትን ለማስወገድ እንደገና የተሰየመ scale-color()ተግባር ።shift-color()

  • box-shadowmixins አሁን እሴቶችን ይፈቅዳሉ እና ከብዙ ነጋሪ nullእሴቶች ይወድቃሉ ። #30394 ይመልከቱ ።none

  • ድብልቅው border-radius()አሁን ነባሪ እሴት አለው።

የቀለም ስርዓት

  • አዲስ የቀለም ስርዓትን በመደገፍ አብሮ የሰራ color-level()እና የተወገደው የቀለም ስርዓት። $theme-color-intervalበእኛ ኮድ ቤዝ ውስጥ ያሉት ሁሉም lighten()እና ተግባራት በ እና darken()ይተካሉ ። እነዚህ ተግባራት ብርሃኑን በቋሚ መጠን ከመቀየር ይልቅ ቀለሙን ከነጭ ወይም ጥቁር ጋር ያዋህዳሉ። ፈቃዱ የክብደቱ መለኪያው አወንታዊ ወይም አሉታዊ እንደሆነ ላይ በመመስረት ቀለሙን ይቀባል ወይም ይጨልማል ። ለበለጠ መረጃ #30622 ይመልከቱ።tint-color()shade-color()shift-color()

  • ለእያንዳንዱ ቀለም አዲስ ቀለሞች እና ጥላዎች ተጨምረዋል, ለእያንዳንዱ መሰረታዊ ቀለም ዘጠኝ የተለያዩ ቀለሞችን ያቀርባል, እንደ አዲስ የሳስ ተለዋዋጮች.

  • የተሻሻለ የቀለም ንፅፅር. የWCAG 2.1 AA ንፅፅርን ለማረጋገጥ ከ 3፡1 እስከ 4.5፡1 የተዳከመ የቀለም ንፅፅር እና የዘመነ ሰማያዊ፣ አረንጓዴ፣ ሲያን እና ሮዝ ቀለሞች። እንዲሁም የእኛን የቀለም ንፅፅር ቀለም $gray-900ወደ ቀይሮታል $black.

  • የቀለም ስርዓታችንን ለመደገፍ ቀለሞቻችንን በአግባቡ ለመደባለቅ አዲስ ብጁ tint-color()እና ተግባራትን አክለናል ።shade-color()

የፍርግርግ ዝማኔዎች

  • አዲስ መግቻ ነጥብ! ለ እና በላይ አዲስ xxlመግቻ ነጥብ ታክሏል ። 1400pxበሁሉም ሌሎች መግቻ ነጥቦች ላይ ምንም ለውጦች የሉም።

  • የተሻሻሉ ጉድጓዶች. 1.5remጉድጓዶች አሁን በሬም ውስጥ ተቀምጠዋል፣ እና ከ v4 ( ፣ ወይም ስለ 24px፣ ከ ታች ) ጠባቦች ናቸው 30px። ይህ የፍርግርግ ስርዓታችንን ጉድጓዶች ከክፍተት መገልገያዎቻችን ጋር ያስተካክላል።

    • አግድም/አቀባዊ/አቀባዊ/አቀባዊ/አግድም/አግድም/አግድም/ እና ቀጥ ያሉ ወራጆችን ለመቆጣጠር አዲስ የጅረት ክፍል ( .g-*፣ .gx-*እና ) ታክሏል።.gy-*
    • መስበርአዲስ የተሰየመ .no-guttersየጎተር .g-0መገልገያዎችን ለማዛመድ።

  • ዓምዶች ከአሁን በኋላ አልተተገበሩም፣ ስለዚህ ያንን ባህሪ ወደነበረበት ለመመለስ ወደ አንዳንድ አካላት position: relativeማከል ሊኖርብዎ ይችላል ።.position-relative

  • መስበር.order-*ብዙ ጊዜ ጥቅም ላይ ያልዋሉ ብዙ ትምህርቶችን ተወ። አሁን ከሳጥን ውጭ .order-1ብቻ እናቀርባለን ።.order-5

  • መስበርክፍሉን .mediaበቀላሉ ከመገልገያዎች ጋር ሊባዛ ስለሚችል ተጥሏል። ለአብነት #28265 እና ተጣጣፊ መገልገያዎችን ይመልከቱ ።

  • መስበር bootstrap-grid.cssአሁን box-sizing: border-boxአለምአቀፉን የሳጥን መጠን ማስተካከል ከማስጀመር ይልቅ በአምዱ ላይ ብቻ ተፈጻሚ ይሆናል። በዚህ መንገድ የእኛ የፍርግርግ ስልቶች ያለ ምንም ጣልቃ ገብነት በብዙ ቦታዎች ላይ ጥቅም ላይ ሊውሉ ይችላሉ.

  • $enable-grid-classesየመያዣ ክፍሎችን ማመንጨት ከእንግዲህ አያሰናክልም። #29146 ይመልከቱ።

  • make-colድብልቅውን ያለተወሰነ መጠን ወደ እኩል አምዶች ወደ ነባሪ አዘምኗል ።

ይዘት፣ ዳግም አስነሳ፣ ወዘተ

  • RFS አሁን በነባሪነት ነቅቷል። ማደባለቁን የሚጠቀሙ ርእሶችfont-size()በቀጥታ ከእይታ እይታ ጋር ወደ ሚዛናቸው ያስተካክላሉfont-size። ይህ ባህሪ ከዚህ ቀደም በ v4 መርጦ ገብቷል።

  • መስበር$display-*የእኛን ተለዋዋጮች እና በ $display-font-sizesSass ካርታ ለመተካት የእኛን የማሳያ ታይፕግራፊ ተሻሽሏል። እንዲሁም ነጠላ $display-*-weightተለዋዋጮችን ለአንድ ነጠላ $display-font-weightእና የተስተካከለ font-sizes ተወግዷል።

  • ሁለት አዲስ .display-*የርእስ መጠኖች ታክለዋል፣ .display-5እና .display-6.

  • ማገናኛዎች የተወሰኑ ክፍሎች አካል ካልሆኑ በስተቀር በነባሪነት (በማንዣበብ ላይ ብቻ ሳይሆን) የተሰመሩ ናቸው።

  • ስታይልን ለማደስ እና በሲኤስኤስ ተለዋዋጮች እንደገና ለመገንባት እንደገና የተነደፉ ጠረጴዛዎች የቅጥ አሰራርን የበለጠ ለመቆጣጠር።

  • መስበርየጎጆ ጠረጴዛዎች ከእንግዲህ ቅጦችን አይወርሱም።

  • መስበር .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

  • አግድም አቅጣጫ ልዩ ተለዋዋጮች፣ መገልገያዎች እና ድብልቅ ነገሮች ሁሉም በ flexbox አቀማመጦች ውስጥ የሚገኙትን አመክንዮአዊ ባህሪያትን ለመጠቀም ተቀይረዋል—ለምሳሌ፣ startእና በ እና endምትክ ።leftright

ቅጾች

  • አዲስ ተንሳፋፊ ቅጾች ታክለዋል! ተንሳፋፊ መሰየሚያዎችን ሙሉ ለሙሉ ወደሚደገፉ የቅጽ አካላት አስተዋውቀናል። አዲሱን ተንሳፋፊ መለያዎች ገጽ ይመልከቱ።

  • መስበር የተዋሃዱ ቤተኛ እና ብጁ የቅጽ ክፍሎች። በ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በመቀየር ልክ እንደፈለጋችሁት የእርዳታ ጽሑፍን እንድታግዱ ወይም እንዲከለክሉ ያስችልዎታል።

  • የማረጋገጫ አዶዎች ከአሁን በኋላ በ <select>s ላይ አይተገበሩም multiple።

  • የዳግም ዝግጅት ምንጭ Sass ፋይሎች በ ስር scss/forms/፣ የግቤት ቡድን ቅጦችን ጨምሮ።

አካላት

  • የተዋሃዱ paddingእሴቶች ለማንቂያዎች፣ የዳቦ ፍርፋሪ፣ ካርዶች፣ ተቆልቋይዎች፣ የዝርዝር ቡድኖች፣ ሞዳሎች፣ ፖፖቨር እና የመሳሪያ ምክሮች በተለዋዋጭያችን ላይ ይመሰረታሉ $spacer። #30564 ይመልከቱ ።

አኮርዲዮን

ማንቂያዎች

ባጆች

  • መስበርሁሉንም .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>እና በ ላይ ካሉ ከማንኛውም.btnክፍሎች<label>። #30650 ይመልከቱ ። የዚህ ሰነድ ሰነዶች ከአዝራሮች ገጻችን ወደ አዲሱ የቅጾች ክፍል ተንቀሳቅሰዋል።

  • መስበር ለፍጆታ እቃዎች ተጥሏል .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ተለዋጭ ታክሏል (ለቀላል ዳራዎች በጣም ጥሩ)።

  • የቼቭሮን አዶዎች ለካሩሰል መቆጣጠሪያዎች በአዲስ SVGs ከ Bootstrap Icons ተተኩ ።

ዝጋ አዝራር

  • መስበርባነሰ አጠቃላይ ስም ተቀይሯል .close።.btn-close

  • ዝጋ አዝራሮች አሁን በኤችቲኤምኤል ውስጥ ካለው background-imageይልቅ (የተከተተ SVG) ይጠቀማሉ &times;፣ ይህም ምልክትዎን መንካት ሳያስፈልግ በቀላሉ ለማበጀት ያስችላል።

  • ከፍ ያለ የንፅፅር አዶዎችን ከጨለማ ዳራዎች ጋር ለማሰናበት .btn-close-whiteየሚጠቀም አዲስ ተለዋጭ ታክሏል ።filter: invert(1)

ሰብስብ

  • ለአኮርዲዮን መልህቅ ተወግዷል።

  • .dropdown-menu-darkበትዕዛዝ ላይ ለጨለማ ተቆልቋይዎች አዲስ ተለዋጭ እና ተያያዥ ተለዋዋጮች ታክለዋል።

  • ለ አዲስ ተለዋዋጭ ታክሏል $dropdown-padding-x።

  • ለተሻሻለ ንፅፅር ተቆልቋይ መከፋፈሉን አጨልሟል።

  • መስበርየተቆልቋዩ ሁሉም ክስተቶች አሁን በተቆልቋይ መቀየሪያ አዝራሩ ላይ ይነሳሉ እና ከዚያም እስከ ወላጅ አካል ይደርሳሉ።

  • የተቆልቋይ ምናሌዎች አሁን የተቆልቋዩ data-bs-popper="static"አቀማመጥ የማይለዋወጥ ሲሆን እና data-bs-popper="none"ተቆልቋይ በ navbar ውስጥ በሚሆንበት ጊዜ የባህሪ ስብስብ አላቸው። ይህ በእኛ ጃቫ ስክሪፕት የተጨመረ ሲሆን በፖፐር አቀማመጥ ላይ ጣልቃ ሳንገባ ብጁ አቀማመጥ ቅጦችን እንድንጠቀም ይረዳናል።

  • መስበርተቆልቋይ ተሰኪ አማራጭ ተጥሏል flipቤተኛ Popper ውቅርን በመደገፍ። አሁን በገለባ መቀየሪያ fallbackPlacementsውስጥ ለአማራጭ ባዶ ድርድር በማለፍ የመገለባበጥ ባህሪን ማሰናከል ይችላሉ ።

  • ተቆልቋይ ምናሌዎች አሁን በራስ የመዝጋት ባህሪንautoClose ለመቆጣጠር በአዲስ አማራጭ ጠቅ ሊደረጉ ይችላሉ ። በይነተገናኝ ለማድረግ ከተቆልቋይ ሜኑ ውስጥ ወይም ውጪ ያለውን ጠቅ ለማድረግ ይህንን አማራጭ መጠቀም ይችላሉ።

  • ተቆልቋይ መውረጃዎች አሁን .dropdown-itemበs ተጠቅልለው ይደግፋሉ <li>።

Jumbotron

የዝርዝር ቡድን

  • ለ ፣፣፣ እና ለክፍል አዲስ nullተለዋዋጮች ታክለዋል ።font-sizefont-weightcolor:hover color.nav-link
  • መስበርNavbars አሁን በውስጡ መያዣ ያስፈልጋቸዋል (የክፍተት መስፈርቶችን በከፍተኛ ሁኔታ ለማቃለል እና CSS ያስፈልጋል)።

Offcanvas

ፔጅኒሽን

  • የገጽታ ማገናኛዎች አሁን margin-leftእርስ በርሳቸው ሲለያዩ ተለዋዋጭ በሆነ መልኩ በሁሉም ማዕዘኖች ላይ የተጠጋጉ ሊበጁ የሚችሉ አላቸው።

  • transitionወደ ገጽ ማያያዣዎች ታክሏል ።

ፖፖቨርስ

  • መስበር.arrowበእኛ ነባሪ ብቅ- .popover-arrowባይ አብነት ውስጥ እንደገና ተሰይሟል ።

  • ስም ተቀይሯል whiteListወደallowList

እሽክርክሪት

  • ስፒነሮች አሁን prefers-reduced-motion: reduceእነማዎችን በማቀዝቀዝ ያከብራሉ። #31882 ይመልከቱ ።

  • የተሻሻለ ስፒነር አቀባዊ አሰላለፍ።

ቶስትስ

  • Toasts አሁን በመገልገያዎች አቀማመጥ እርዳታ.toast-container በ ውስጥ ሊቀመጡ ይችላሉ .

  • ነባሪ የቶስት ቆይታ ወደ 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እነዚህ ከኤችቲኤምኤል ነባሪ ርእሶች (1-6፣ ከትልቅ እስከ ትንሽ) ተመሳሳይ ሚዛን ይጠቀማሉ እና በ Sass ካርታ ሊሻሻሉ ይችላሉ።

  • መስበርእንደ አጭርነት እና ወጥነት የተሰየሙ .font-weight-*መገልገያዎች ።.fw-*

  • መስበርእንደ አጭርነት እና ወጥነት የተሰየሙ .font-style-*መገልገያዎች ።.fst-*

  • ለሲኤስኤስ ግሪድ እና 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.

ረዳቶች

  • መስበር ምላሽ ሰጪ የተከተቱ ረዳቶች ወደ ሬሾ ረዳቶች አዲስ የክፍል ስሞች እና የተሻሻሉ ባህሪዎች እንዲሁም አጋዥ የሲኤስኤስ ተለዋዋጭ ተብለው ተቀይረዋል።

    • byክፍሎች ወደ xምጥጥነ ገጽታ ለመቀየር ተሰይመዋል ። ለምሳሌ .ratio-16by9አሁን .ratio-16x9ነው።
    • .embed-responsive-itemቀለል ያለ መራጭን በመደገፍ የቡድኑን እና ኤለመንቱን መራጭ .ratio > *ጥለነዋል። ተጨማሪ ክፍል አያስፈልግም፣ እና ሬሾ አጋዥ አሁን ከማንኛውም የኤችቲኤምኤል አባል ጋር ይሰራል።
    • የሳስ $embed-responsive-aspect-ratiosካርታ ተሰይሟል እና እሴቶቹ የክፍል ስሙን እና መቶኛን እንደ ጥንድ $aspect-ratiosለማካተት ቀላል ሆነዋል ።key: value
    • የCSS ተለዋዋጮች አሁን ተፈጥረዋል እና በእያንዳንዱ እሴት በሳስ ካርታ ውስጥ ተካተዋል። ማንኛውንም ብጁ ምጥጥን ለመፍጠር --bs-aspect-ratioበ ላይ ያለውን ተለዋዋጭ ያሻሽሉ ።.ratio

  • መስበር "ስክሪን አንባቢ" ክፍሎች አሁን "በምስላዊ የተደበቁ" ክፍሎች ናቸው.

    • የ Sass ፋይልን ከ scss/helpers/_screenreaders.scssወደ ቀይሮታል።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አሁን ደግሞ ረዳቶቻችንን ይጨምራል። ረዳቶች ከአሁን በኋላ በብጁ ግንባታዎች ማስመጣት አያስፈልጋቸውም።

ጃቫስክሪፕት

  • የ jQuery ጥገኝነት ተጥሏል እና ተሰኪዎችን በመደበኛ ጃቫስክሪፕት ውስጥ እንዲሆኑ እንደገና ጻፈ።

  • መስበርየቡትስትራፕ ተግባርን ከሶስተኛ ወገኖች እና ከራስዎ ኮድ ለመለየት እንዲረዳ የሁሉም የጃቫስክሪፕት ተሰኪዎች የውሂብ ባህሪያት አሁን በስም ተከፍለዋል። data-bs-toggleለምሳሌ, በምትኩ እንጠቀማለን data-toggle.

  • ሁሉም ተሰኪዎች አሁን የ CSS መራጭን እንደ መጀመሪያው መከራከሪያ ሊቀበሉ ይችላሉ። የተሰኪውን አዲስ ምሳሌ ለመፍጠር የDOM አባል ወይም ማንኛውንም የሚሰራ CSS መራጭ ማለፍ ይችላሉ፡-

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

  • popperConfigይህንን ነባሪ ውቅር በእርስዎ መንገድ ማዋሃድ እንዲችሉ የ Bootstrapን ነባሪ ፖፐር ውቅረት እንደ ክርክር የሚቀበል ተግባር ሆኖ ሊተላለፍ ይችላል። ተቆልቋይ፣ ብቅ-ባይ እና የመሳሪያ ምክሮች ላይ ተፈጻሚ ይሆናል።

  • የነባሪ እሴት ወደ ተሻለ የፖፐር አባሎች አቀማመጥ fallbackPlacementsተለውጧል ። ተቆልቋይ፣ ብቅ-ባይ እና የመሳሪያ ምክሮች ላይ ተፈጻሚ ይሆናል።['top', 'right', 'bottom', 'left']

  • _getInstance()እንደ → ካሉ ይፋዊ የማይንቀሳቀሱ ዘዴዎች ተወግዷል getInstance()።