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

ወደ v5 በመሰደድ ላይ

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

በዚህ ገጽ ላይ

v5.2.0

የታደሰ ንድፍ

Bootstrap v5.2.0 በፕሮጀክቱ ውስጥ በጣት ለሚቆጠሩ አካላት እና ንብረቶች ስውር የንድፍ ማሻሻያ አለው፣ በተለይም በተጣሩ border-radiusአዝራሮች እና የቅጽ መቆጣጠሪያዎች ። የእኛ ሰነድ በተጨማሪ በአዲስ መነሻ ገጽ፣ የጎን አሞሌ ክፍሎችን በማይፈርስ ቀላል የሰነዶች አቀማመጥ እና ይበልጥ ታዋቂ በሆኑ የቡትስትራፕ አዶዎች ተዘምኗል ።

ተጨማሪ የሲኤስኤስ ተለዋዋጮች

የሲኤስኤስ ተለዋዋጮችን ለመጠቀም ሁሉንም ክፍሎቻችንን አዘምነናል። Sass አሁንም ሁሉንም ነገር እየደገፈ እያለ፣ እያንዳንዱ አካል የCSS ተለዋዋጮችን በክፍል ቤዝ ክፍሎች (ለምሳሌ፣ .btn) ለማካተት ተዘምኗል፣ ይህም የBootstrapን በእውነተኛ ጊዜ ለማበጀት ያስችላል። በሚቀጥሉት ልቀቶች፣ የCSS ተለዋዋጮችን ወደ አቀማመጥ፣ ቅጾች፣ ረዳቶች እና መገልገያዎች ማስፋፋታችንን እንቀጥላለን። ስለ CSS ተለዋዋጮች በእያንዳንዱ ክፍል በየራሳቸው የሰነድ ገፆች ላይ የበለጠ ያንብቡ።

የእኛ የሲኤስኤስ ተለዋዋጭ አጠቃቀም እስከ Bootstrap 6 ድረስ በተወሰነ ደረጃ ያልተጠናቀቀ ይሆናል። እነዚህን በቦርዱ ውስጥ ሙሉ በሙሉ መተግበር ብንፈልግም፣ መሰበር ለውጦችን የመፍጠር አደጋ አለባቸው። ለምሳሌ፣ በእኛ የምንጭ ኮድ ውስጥ ማቀናበር በሆነ ምክንያት $alert-border-width: var(--bs-border-width)እየሰሩ ከሆነ በራስዎ ኮድ Sassን ይሰብራል ።$alert-border-width * 2

ስለዚህ፣ በሚቻልበት ጊዜ፣ ወደ ተጨማሪ የCSS ተለዋዋጮች መግፋታችንን እንቀጥላለን፣ ነገር ግን እባካችሁ የእኛ ትግበራ በ v5 ውስጥ በትንሹ የተገደበ ሊሆን እንደሚችል ይገንዘቡ።

አዲስ_maps.scss

Bootstrap v5.2.0 አዲስ የ Sass ፋይልን ከ ጋር አስተዋወቀ _maps.scss። _variables.scssየመጀመሪያውን ካርታ ዝማኔዎች በሚያስረዝሙ ሁለተኛ ደረጃ ካርታዎች ላይ ያልተተገበሩበትን ችግር ለማስተካከል ብዙ የሳስ ካርታዎችን ያወጣል ። ለምሳሌ፣ ቁልፍ የማበጀት የስራ ፍሰቶችን በመስበር $theme-colorsላይ ባሉ ሌሎች የገጽታ ካርታዎች ላይ የተደረጉ ዝማኔዎች አልተተገበሩም ። $theme-colorsበአጭሩ፣ Sass አንድ ጊዜ ነባሪ ተለዋዋጭ ወይም ካርታ ጥቅም ላይ ከዋለ ሊዘመን የማይችልበት ገደብ አለው። ሌሎች የሲኤስኤስ ተለዋዋጮችን ለመጻፍ ጥቅም ላይ በሚውሉበት ጊዜ ከሲኤስኤስ ተለዋዋጮች ጋር ተመሳሳይ ጉድለት አለ።

ለዚህ ነው በBootstrap ውስጥ ያሉ ተለዋዋጭ ማበጀቶች ከ በኋላ መምጣት ያለባቸው @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

የእርስዎ ብጁ Bootstrap 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

አዲስ መገልገያዎች

ተጨማሪ ለውጦች

  • አዲስ $enable-container-classesአማራጭ አስተዋውቋል። — አሁን ወደ የሙከራ CSS ግሪድ አቀማመጥ መርጠው ሲገቡ .container-*፣ ይህ አማራጭ ካልተዋቀረ በስተቀር ክፍሎች አሁንም ይዘጋጃሉ false። ኮንቴይነሮችም አሁን የጋተር እሴቶቻቸውን ይጠብቃሉ።

  • Offcanvas ክፍል አሁን ምላሽ ሰጪ ልዩነቶች አሉት ። የመጀመሪያው .offcanvasክፍል ሳይለወጥ ይቆያል - በሁሉም የእይታ ቦታዎች ላይ ይዘትን ይደብቃል። ምላሽ ሰጪ ለማድረግ፣ ያንን .offcanvasክፍል ወደ ማንኛውም .offcanvas-{sm|md|lg|xl|xxl}ክፍል ይቀይሩት።

  • ወፍራም የጠረጴዛ አካፋዮች አሁን መርጠው ገብተዋል። - በጠረጴዛ ቡድኖች መካከል ያለውን ድንበር ለመሻር ወፍራም እና ይበልጥ አስቸጋሪ የሆነውን አስወግደነዋል እና ወደ አማራጭ ክፍል ወስደነዋል፣ .table-group-divider. ለምሳሌ የሰንጠረዡን ሰነዶች ይመልከቱ።

  • Scrollspy የኢንተርሴክሽን ታዛቢ ኤፒአይን ለመጠቀም እንደገና ተጽፏል ፣ ይህ ማለት ከአሁን በኋላ ዘመድ የወላጅ መጠቅለያዎችን፣offsetእና ሌሎችንም አያስፈልጎትም ማለት ነው። የ Scrollspy አተገባበርዎ የበለጠ ትክክለኛ እና ወጥነት ያለው እንዲሆን በናቪ ማድመቂያቸው ላይ ይፈልጉ።

  • ፖፖቨር እና የመሳሪያ ምክሮች አሁን የሲኤስኤስ ተለዋዋጮችን ይጠቀማሉ። አንዳንድ የሲኤስኤስ ተለዋዋጮች የተለዋዋጮችን ብዛት ለመቀነስ ከ Sass አቻዎቻቸው ተዘምነዋል። በውጤቱም፣ በዚህ ልቀት ውስጥ ሶስት ተለዋዋጮች ተቋርጠዋል $popover-arrow-color፡፣፣ $popover-arrow-outer-colorእና $tooltip-arrow-color.

  • አዲስ .text-bg-{color}ረዳቶች ታክለዋል። ግለሰባዊ .text-*እና .bg-*መገልገያዎችን ከማቀናበር ይልቅ አሁን ረዳቶቹን በመጠቀም.text-bg-*background-color ከተቃራኒ የፊት ገጽታ ጋር ማዘጋጀት ይችላሉ color።

  • .form-check-reverseየመለያዎችን እና ተያያዥ አመልካች ሳጥኖችን/ራዲዮዎችን ለመገልበጥ መቀየሪያ ታክሏል ።

  • የታከሉ ባለ መስመር አምዶች.table-striped-columns በአዲሱ ክፍል በኩል ወደ ጠረጴዛዎች ይደግፋሉ ።

ለተሟላ ለውጦች ዝርዝር በ GitHub ላይ ያለውን v5.2.0 ፕሮጀክት ይመልከቱ ።

v5.1.0

  • ለሲኤስኤስ ግሪድ አቀማመጥ የሙከራ ድጋፍ ታክሏል ። — ይህ በሂደት ላይ ያለ ስራ ነው፣ እና ለምርት አገልግሎት ገና ዝግጁ አይደለም፣ ግን በ Sass በኩል ወደ አዲሱ ባህሪ መርጠው መግባት ይችላሉ። እሱን ለማንቃት $enable-grid-classes: falseየ CSS ግሪድን በማቀናበር ነባሪው ፍርግርግ አሰናክል $enable-cssgrid: true።

  • ከሸራ ውጭ ለመደገፍ የተሻሻሉ navbars። — ምላሽ ሰጪ ክፍሎች እና አንዳንድ ከሸራ ውጪ ምልክት ማድረጊያዎች ጋር በማንኛውም የናቭባር ላይ Offcanvas መሳቢያዎችን ያክሉ ።.navbar-expand-*

  • አዲስ የቦታ ያዥ አካል ታክሏል ። — የእኛ አዲሱ አካል፣ የሆነ ነገር አሁንም በጣቢያዎ ወይም መተግበሪያዎ ላይ እየተጫነ መሆኑን ለማመልከት በእውነተኛ ይዘት ምትክ ጊዜያዊ ብሎኮችን የምናቀርብበት መንገድ።

  • ተሰኪን ሰብስብ አሁን አግድም መሰባበርን ይደግፋል ። - በምትኩ ለመደርመስ .collapse-horizontalወደ እርስዎ ያክሉ ። a ወይም በማቀናበር የአሳሹን ዳግም መቀባትን ያስወግዱ ።.collapsewidthheightmin-heightheight

  • አዲስ ቁልል እና ቋሚ ደንብ ረዳቶች ታክለዋል። - ብጁ አቀማመጦችን ከቁልል ጋር በፍጥነት ለመፍጠር ብዙ የፍሌክስቦክስ ንብረቶችን በፍጥነት ይተግብሩ ። ከአግድም ( .hstack) እና ቋሚ ( .vstack) ቁልል ይምረጡ። ከአዲሶቹ ረዳቶች<hr> ጋር ተመሳሳይ የሆኑ አቀባዊ አካፋዮችን ያክሉ ።.vr

  • አዲስ ዓለም አቀፍ :rootየሲኤስኤስ ተለዋዋጮች ታክለዋል። - ቅጦችን :rootለመቆጣጠር በርካታ አዲስ የሲኤስኤስ ተለዋዋጮችን ወደ ደረጃው ታክሏል ። <body>በመገልገያዎቻችን እና ክፍሎቻችን ላይ ጨምሮ ብዙ ተጨማሪ ስራዎች አሉ፣ አሁን ግን የ CSS ተለዋዋጮችን አብጅ በሚለው ክፍል ውስጥ ያንብቡ ።

  • የሲኤስኤስ ተለዋዋጮችን ለመጠቀም የተሻረ ቀለም እና የበስተጀርባ መገልገያዎች፣ እና አዲስ የፅሁፍ ግልጽነት እና የጀርባ ግልጽነት መገልገያዎችን አክለዋል። — .text-* እና .bg-*መገልገያዎች አሁን በሲኤስኤስ ተለዋዋጮች እና rgba()የቀለም እሴቶች ተገንብተዋል፣ ይህም ማንኛውንም መገልገያ በአዲስ ግልጽነት የሌላቸው መገልገያዎች በቀላሉ እንዲያበጁ ያስችልዎታል።

  • ክፍሎቻችንን እንዴት ማበጀት እንደምንችል ለማሳየት አዲስ ቅንጣቢ ምሳሌዎችን ታክሏል። — የተበጁ ክፍሎችን እና ሌሎች የተለመዱ የንድፍ ንድፎችን በአዲሱ የቅንጥብ ምሳሌዎች ለመጠቀም ዝግጁ ያድርጉ ። ግርጌዎችን ፣ ተቆልቋይዎችን ፣ የዝርዝር ቡድኖችን እና ሞዳልን ያካትታል ።

  • ጥቅም ላይ ያልዋሉ የአቀማመጥ ስልቶችን ከፖፖቨርስ እና ከመሳሪያ ምክሮች ተወግደዋል ምክንያቱም እነዚህ በፖፐር ብቻ ስለሚያዙ። $tooltip-marginተቋርጧል እና nullበሂደቱ ላይ ተቀምጧል.

ተጨማሪ መረጃ ይፈልጋሉ? v5.1.0 ብሎግ ልጥፉን ያንብቡ።

ሄይ! በ Bootstrap 5፣ v5.0.0 የመጀመሪያ ዋና ልቀት ላይ የተደረጉ ለውጦች ከዚህ በታች ተመዝግበዋል። ከላይ የሚታዩትን ተጨማሪ ለውጦች አያንጸባርቁም።

ጥገኛዎች

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

  • የቅጽ መቆጣጠሪያዎች ከተቻለ ተስተካክለው ጥቅም ላይ አይውሉም height፣ ይልቁንስ min-heightማበጀትን እና ከሌሎች አካላት ጋር ተኳሃኝነትን ለማሻሻል ማስተላለፍ።

  • የማረጋገጫ አዶዎች ከአሁን በኋላ በ <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"አቀማመጥ የማይለዋወጥ ሲሆን ወይም ተቆልቋይ በ navbar ውስጥ ሲሆን ነው። ይህ በእኛ ጃቫ ስክሪፕት የተጨመረ ሲሆን በፖፐር አቀማመጥ ላይ ጣልቃ ሳንገባ ብጁ አቀማመጥ ቅጦችን እንድንጠቀም ይረዳናል።

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

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

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

Jumbotron

የዝርዝር ቡድን

  • ለ ፣፣፣ እና ለክፍል አዲስ nullተለዋዋጮች ታክለዋል ።font-sizefont-weightcolor:hover color.nav-link
  • መስበርNavbars አሁን በውስጡ መያዣ ያስፈልጋቸዋል (የክፍተት መስፈርቶችን በከፍተኛ ሁኔታ ለማቃለል እና CSS ያስፈልጋል)።
  • መስበርክፍሉ .activeከአሁን በኋላ በ s ላይ ሊተገበር አይችልም, በቀጥታ በ s .nav-itemላይ መተግበር አለበት ..nav-link

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 መራጭ ማለፍ ይችላሉ፡-

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

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

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

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