ናብ v5 ምግዓዝ

ጽግዕተኛታት

• jQuery ወዲቑ።
• ካብ ፖፐር v1.x ናብ ፖፐር v2.x ተዓብዩ።
• ንሊብሳስ ዝተዋህበ ናትና ሳስ ኣከባቢርካ ስለ ዝጠፍአ ንሊብሳስ ብዳርት ሳስ ተኪእናዮ።
• ሰነዳትና ንምህናጽ ካብ ጀኪል ናብ ሁጎ ተሰዲድና።

ናይ መርበብ ሓበሬታ ደገፍ

• ኢንተርነት ኤክስፕሎረር 10ን 11ን ​​ኣውዲቑ
• ማይክሮሶፍት ኤጅ < 16 (ሌጋሲ ኤጅ) ወዲቑ
• ፋየርፎክስ < 60 ወዲቑ
• ሳፋሪ ዝወደቐ < 12
• ኣውዲቑ iOS ሳፋሪ < 12
• ዝወደቐ ክሮም < 60

---

ሰነዳት ይቕየር

• ዳግማይ ዝተነድፈ ናይ መጀመርታ ገጽ፡ ኣቀማምጣ ሰነዳትን እግረ ጽሑፍን።
• ሓድሽ መምርሒ ፓርሰል ተወሰኸ .
• ሓድሽ ክፍሊ Customize ተወሰኸ ፣ v4's Theming page ተኪኡ ፣ ብሓድሽ ዝርዝር ሓበሬታ ብዛዕባ Sass፣ ዓለማዊ ናይ ውቅር ኣማራጺታት፣ ሕብራዊ ስርዓታት፣ CSS ተለዋዋጢ ረቛሒታትን ካልእን ተኪኡ።
• ንኹሉ ሰነዳት ቅጥዒ ናብ ሓድሽ ክፍሊ ቅጥዕታት ዳግማይ ኣወዲቡ ፣ ነቲ ትሕዝቶ ናብ ዝያዳ ትኹረት ዝገበሩ ገጻት ብምብታን።
• ብተመሳሳሊ, updated the Layout section , ንትሕዝቶ ሽቦ ብዝያዳ ብንጹር ስጋ ንምግባር።
• ገጽ ክፍሊ “Navs” ናብ “Navs & Tabs” ተቐይሩ።
• ገጽ “Checks” ናብ “Checks & radios” ተባሂሉ ተሰይሙ።
• ን navbar ዳግማይ ዲዛይን ጌርና ሓድሽ subnav ወሲኽና ኣብ ሳይታትናን docs versionsን ብቐሊሉ ንኽንዘውር።
• ሓድሽ ናይ ቁልፊ ሰሌዳ ኣቋራጭ ንዓውዲ ምድላይ ተወሰኸ: Ctrl + /.

ሳስ

• ተደራራቢ ክብርታት ብቐሊሉ ንምእላይ ነቲ ነባሪ ናይ ሳስ ካርታ ምውህሃድ ዲች ጌርናዮ ኣለና። ኣብ ኣእምሮኻ ምሓዝ ሕጂ ኩሎም ክብርታት ኣብ ካርታታት ሳስ ከም $theme-colors. ምስ ካርታታት ሳስ ከመይ ጌርካ ከም እትገጥሞ ርአ ።

• ምብታኽድሕሪ ደጊም ምስ YIQ colorspace ስለዘይተኣሳሰር ፋንክሽንን ተዛመድቲ 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()

• ምብታኽምስ ናይ Sass ናይ ገዛእ ርእሱ ናይ ሕብሪ ምዕባይ ተግባር ንኸይጋጮ scale-color()ፋንክሽን ናብ ተባሂሉ ተቐይሩ።shift-color()

• box-shadowmixins ሕጂ nullክብርታት የፍቅዱን noneካብ ብዙሓት ሞጎተታት ይወድቁን። #30394 ርአ ።

• ሕጂ እቲ 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ንላዕሊን ተወሰኸ። ኣብ ኩሎም ካልኦት ነጥብታት ዝኾነ ለውጢ የለን።

• ዝተመሓየሹ ጐዳጉዲ። ጓተር ሕጂ ኣብ rems ተቐሚጦም ኣለዉ፣ ካብ v4 ( 1.5rem, ወይ about 24px, down from 30px) ድማ ዝጸበቡ እዮም። እዚ ድማ ንናይ ሽቦ ስርዓትና ጐዳጉዲ ምስ ናይ ርሕቀት ዩቲሊቲታትና የሰማምዖም።

  • ንኣግማድ/ቀጥታዊ ጐዳጉዲ፣ ኣግማድ ጐዳጉዲ፣ ከምኡውን ቀጥታዊ ጐዳጉዲ ንምቁጽጻር ሓድሽ ናይ ጐዳጉዲ ክፍሊ ( .g-*, .gx-*, ከምኡውን ) ተወሰኸ።.gy-*
  • ምብታኽሓደስቲ ናይ ጓተር ዩቲሊቲታት ንኽሰማማዕ .no-guttersናብ ተባሂሉ ተቐይሩ ።.g-0

• ዓምድታት ድሕሪ ሕጂ ኣይተግበሩን ፣ ስለዚ ነቲ ባህሪ ንምምላስ ኣብ ገለ ባእታታት position: relativeክትውስኽ ክትግደድ ትኽእል ኢኻ ።.position-relative

• ምብታኽመብዛሕትኡ ግዜ ኣብ ጥቕሚ ዘይውዕል ዝነበረ ሓያሎ .order-*ክፍልታት ኣቋሪጹ። ሕጂ ካብ ሳንዱቕ ወጻኢ ጥራይ .order-1ኢና ነቕርብ።.order-5

• ምብታኽ.mediaብቐሊሉ ምስ ዩቲሊቲታት ክድገም ስለ ዝኽእል ነቲ ክፍሊ ኣውዲቕዎ። ንኣብነት #28265 ን ገጽ flex utilitiesን ርአ ።

• ምብታኽ bootstrap-grid.cssሕጂ box-sizing: border-boxኣብ ክንዲ ነቲ ዓለማዊ ሳንዱቕ-ዓቐን ዳግማይ ምትካል ኣብቲ ዓምዲ ጥራይ እዩ ዝምልከት። በዚ መንገዲ እዚ፡ ቅዲታት ሽቦና ብዘይ ምትእትታው ኣብ ዝያዳ ቦታታት ክንጥቀመሉ ንኽእል።

• $enable-grid-classesድሕሪ ደጊም ንወለዶ ናይ ኮንተይነር ክፍልታት ኣየሰናኽሎን እዩ። #29146 ርአ።

• ነቲ make-colmixin ናብ ነባሪ ናብ ማዕረ ዓምድታት ብዘይ ዝተወሰነ ዓቐን ኣዘሚኑዎ።

ትሕዝቶ፡ ሪቦት ወዘተ

• RFS ሕጂ ብነባሪ ተኸፊቱ ኣሎ። ሚክሲን ዝጥቀሙfont-size()ኣርእስታት ብኣውቶማቲክ ናቶምfont-sizeናብ ስኬል ምስቲ ቪውፖርት ከስተኻኽሉ እዮም። እዚ ባህሪ ቅድሚ ሕጂ ምስ v4 opt-in እዩ ነይሩ።

• ምብታኽ$display-*ንተለዋዋጢ ረቛሒታትና ንምትካእን $display-font-sizesብሳስ ካርታን ንምትካእን ናይ ምርኢት ታይፖግራፊና ዳግመ ምጽጋን ጌርናዮ። $display-*-weightከምኡ’ውን ንሓደ ንጽልን $display-font-weightዝተመዓራረየን font-sizes ውልቃዊ ተለዋዋጢ ረቛሒታት ኣወጊዱ ።

• ክልተ ሓደስቲ .display-*ዓቐናት ኣርእስቲ ተወሰኸ፣ .display-5ከምኡውን .display-6.

• መላግቦታት ብነባሪ ስርርዕ ይግበረሎም (ኣብ ሆቨር ጥራይ ዘይኮነ)፣ ኣካል ናይ ፍሉያት ኣካላት እንተዘይኮይኖም።

• ቅዲታቶም ንምሕዳስን ብCSS ተለዋዋጢ ረቛሒታት ዳግማይ ንምህናጾምን ዳግማይ ዝተነድፉ ሰደቓታት ንዝያዳ ምቁጽጻር ቅዲ።

• ምብታኽድሕሪ ሕጂ ዝተሰፍሩ ሰደቓታት ቅዲታት ኣይወርሱን እዮም።

• ምብታኽ .thead-lightከምኡ’ውን ንኹሎም ባእታታት ሰደቓ ( , , , , and ) ክጥቀሙ ዝኽእሉ ፍልልያት ክፍልታት .thead-darkንምድጋፍ ይወድቁ ።.table-*theadtbodytfoottrthtd

• ምብታኽእቲ table-row-variant()ሚክሲን ናብ ይቕየርን table-variant()2 መለክዒታት ጥራይ ይቕበልን: $color(ስም ሕብራዊ)ን $value(ሕብራዊ ኮድ)ን። እቲ ናይ ዶብ ሕብሪን ናይ ላህጃ ሕብርታትን ብኣውቶማቲክ ኣብቲ ናይ ሰደቓ ረቛሒ ተለዋዋጢ ረቛሒታት ተመርኲሱ ይሕሰብ።

• ናይ ሰደቓ ዋህዮ መሸፈኒ ተለዋዋጢ -yናብን ምምቃል -x.

• ምብታኽክፍሊ ወዲቑ .pre-scrollable። #29135 ርአ

• ምብታኽ .text-*ዩቲሊቲታት ድሕሪ ሕጂ ኣብ ሊንክታት hover and focus states ኣይውስኹን እዮም። .link-*ኣብ ክንድኡ ናይ ሓገዝቲ ክፍልታት ክጥቀሙ ይኽእሉ። #29267 ርአ

• ምብታኽክፍሊ ወዲቑ .text-justify። #29793 ርአ

• ምብታኽ <hr>ባእታታት ሕጂ heightኣብ ክንዲ ነቲ ባህሪ borderብዝበለጸ ንምድጋፍ ይጥቀሙ። sizeእዚ ውን ረጒድ መከፋፈልቲ ንምፍጣር ናይ ፓዲንግ ዩቲሊቲታት ምጥቃም የኽእል (ንኣብነት፣ <hr class="py-1">).

• ነባሪ ኣግማድ ምውላዕን padding-leftባእታታት <ul>ካብ <ol>ነባሪ መርበብ ሓበሬታ 40pxናብ 2rem.

• Added $enable-smooth-scroll, እዚ scroll-behavior: smoothብዓለም ደረጃ ዝምልከት-ብዘይካ ተጠቀምቲ ብመንገዲ prefers-reduced-motionሕቶ ሚድያ ምጉዳል ምንቅስቓስ ዝሓቱ። #31877 ርአ

RTL

• ልኡል ኣንፈት ፍሉያት ተቐያየርቲ፡ ዩቲሊቲታትን ሚክሲናትን ኩሎም ከምቲ ኣብ ፍሌክስቦክስ ኣቀማምጣ ዝርከቡ ስነ-መጐታዊ ባህርያት ንኽጥቀሙ ተቐይሮም ኣለዉ-ንኣብነት ፡ ከምኡ’ውን startኣብ endክንዲን left.right

ቅጥዕታት

• ሓደስቲ ተንሳፈፍቲ ቅጥዕታት ተወሰኸ! ነቲ ናይ ተንሳፋፊ ስያመታት ኣብነት ናብ ምሉእ ብምሉእ ዝድገፉ ናይ ቅጥዒ ኣካላት ኣሰጋጊርናዮ ኣለና። ኣብቲ ሓድሽ ገጽ ተንሳፋፊ ስያመታት ርአ።

• ምብታኽ ዝተጠርነፉ ተወላድን ብሕታዊን ቅጥዒ ባእታታት። ኣብ v4 ተወላድን ብሕታዊን ክፍልታት ዝነበሮም ሳጹናት ምልክት፡ ሬድዮታት፡ ምሩጻትን ካልኦት እታዎታትን ተጠርኒፎም ኣለዉ። ሕጂ ዳርጋ ኩሎም ናይ ቅጥዒ ባእታታትና ምሉእ ብምሉእ ብሕታዊ እዮም፣ መብዛሕትኦም ብሕታዊ ኤችቲኤምኤል ኣየድልዮምን።

  • .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

• እቲ ንነዊሕ እዋን ዝጸንሐ Missing border radius on input group with validation feedback bug ኣብ መወዳእታ ተወሳኺ .has-validationክፍሊ ናብ input groups with validation ብምውሳኽ ይእረም።

• ምብታኽ ንናይ ሽቦ ስርዓትና ዝኸውን ቅጥዒ-ፍሉይ ናይ ኣቀማምጣ ክፍልታት ኣቋሪጹ። ኣብ ክንዲ .form-group, .form-row, ወይ ፡ ሽቦናን ዩቲሊቲታትናን ተጠቐም .form-inline።

• ምብታኽናይ ቅጥዒ ምልክታት ሕጂ .form-label.

• ምብታኽ .form-textno longer sets display, ነቲ ናይ HTML ባእታ ብምቕያር ጥራይ ከም ድላይካ ናይ ውሽጢ መስመር ወይ ናይ ሓገዝ ጽሑፍ ክትዓግቶ የኽእለካ።

• ናይ ምጽዳቕ ምልክታት ድሕሪ ደጊም ኣብ <select>s with ኣይሰርሑን እዮም multiple።

• ዳግማይ ዝተሰርዑ ምንጪ Sass ፋይላት ኣብ ትሕቲ scss/forms/፣ ምእታው ጉጅለ ቅዲታት ሓዊሱ።

---

ኣካላት

• ውሁድ 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 ብሕታዊ ንብረት ተወሰኸ ።

መጠወቒታት

• ምብታኽ Toggle buttons , ምስ ሳጹናት ምልክት ወይ ሬድዮታት፡ ድሕሪ ደጊም ጃቫስክሪፕት ኣየድልዮምን ሓድሽ ምልክት ኣለዎም። ድሕሪ ደጊም መጠቕለሊ ባእታ ኣየድልየናን እዩ፣.btn-checkኣብቲ<input>፣ ከምኡውን ምስ ዝኾነ.btnኣብቲ<label>. #30650 ርአ ። ነዚ ዝኸውን docs ካብቲ Buttons ዝብል ገጽና ናብቲ ሓድሽ Forms ዝብል ክፍሊ ተሰጋጊሩ ኣሎ።

• ምብታኽ ንዩቲሊቲታት ወዲቑ .btn-block። ኣብ ክንዲ .btn-blockኣብቲ .btn፣ ንመጠወቒታትካ ብን .d-gridከም .gap-*ኣድላይነቱ ርሕቀት ዝገብረሎም ዩቲሊቲን ጠቕልሎ። ዝያዳ ምቁጽጻር ኣብ ልዕሊኦም ንምርካብ ናብ ምላሽ ዝህቡ ክፍልታት ቀይር። ንገለ ኣብነታት ኣብቲ docs ኣንብብ።

• ተወሳኺ መለክዒታት ንምድጋፍ our button-variant()and mixins updated.button-outline-variant()

• ኣብ ሆቨርን ንጡፋት ኩነታትን ምውሳኽ ንጽጽር ንምርግጋጽ ዝተመሓየሹ መጠወቒታት።

• ስንክልና ዘለዎም መጠወቒታት ሕጂ pointer-events: none;.

ካርድ

• ምብታኽንሽቦና .card-deckዝድግፍ ወዲቑ። ካርድታትካ ኣብ ዓምዲ ክፍልታት ጠቕልል እሞ ወላዲ .row-cols-*መትሓዚ ወስኸሉ ዳግማይ ናይ ካርድ ደርቢ ምፍጣር (ግን ዝያዳ ቁጽጽር ኣብ ልዕሊ ምላሽ ዝህብ ኣሰላልፋ)።

• ምብታኽንማሶንሪ .card-columnsዝድግፍ ወዲቑ። #28922 ርአ ።

• ምብታኽ.cardነቲ መሰረት ዝገበረ ኣኮርድዮን ብሓድሽ ናይ ኣኮርድዮን ክፍሊ ተኪእዎ ።

ካሮሰል

• ንጸሊም ጽሑፍ፡ ቁጽጽርን መርኣዪታትን ሓድሽ .carousel-darkፍልልይ ተወሰኸ (ንፈኹስ ድሕረ ባይታ ብሉጽ)።

• ንመቆጻጸሪታት ካሮሰል ዝኸውን ናይ ሸቭሮን ምልክታት ብሓደስቲ SVGs ካብ Bootstrap Icons ተተኪኡ ።

ናይ ምዕጻው መጠወቒ

• ምብታኽንውሑድ ሓፈሻዊ ስም .closeተባሂሉ ተሰይሙ።.btn-close

• ሕጂ ናይ ምዕጻው መጠወቒታት background-imageኣብ ክንዲ ×ኣብ HTML (embedded SVG) ይጥቀሙ፣ እዚ ድማ ምልክትካ ምትንካፍ ከየድለየካ ብቐሊሉ ምምዕርራይ የኽእል።

• ዝለዓለ ንጽጽር ዘለዎም ናይ ምብራር ምልክታት ኣብ ዝጸልመተ ድሕረ ባይታ ንምንቅስቓስ ዝጥቀመሉ ሓድሽ .btn-close-whiteፍልልይ ተወሰኸ።filter: invert(1)

ፈረሰ

• ንኣኮርድዮን ዝኸውን ናይ ጥቕላል መልህቕ ተኣልዩ።

ድሮፕዳውንድስ

• ሓድሽ .dropdown-menu-darkፍልልይን ተዛመድቲ ተለዋዋጢ ረቛሒታትን ንብድሌት ዝጸልመቱ ንቑልቁል ዝወርድ ተወሰኸ።

• ሓድሽ ተለዋዋጢ ን $dropdown-padding-x.

• ንዝተመሓየሸ ንጽጽር ነቲ ንቑልቁል ዝወርድ መከፋፈልቲ ኣጸልሚቱዎ።

• ምብታኽኩሎም እቶም ንቑልቁል ዝወርድ ፍጻመታት ሕጂ ኣብቲ ንቑልቁል ዝወርድ መቐያየሪ መጠወቒ ይጅምሩ እሞ ድሕሪኡ ክሳብ ወላዲ ባእታ ይፍንፍሑ።

• ሕጂ ንቑልቁል ዝወርድ ምልክታታት data-bs-popper="static"ኣቀማምጣ ናይቲ ንቑልቁል ስቴቲክ data-bs-popper="none"ምስ ዝኸውንን ንቑልቁል ዝወርድ ኣብ ናቭባር ምስ ዝኸውንን ዝተቐመጠ ባህሪ ኣለዎም። እዚ ብጃቫስክሪፕትና ዝተወሰኸ ኮይኑ ኣብ ኣቀማምጣ ፖፐር ከይተዓናቐፍና ብሕታዊ ቅዲታት ኣቀማምጣ ክንጥቀም ይሕግዘና።

• ምብታኽንመበቆላዊ flipውቅር ፖፐር ዝድግፍ ንቑልቁል ዝወርድ ፕላግ-ኢን ዝኸውን ኣማራጺ ወዲቑ። ሕጂ ነቲ ናይ ምግልባጥ ባህሪ ከተቋርጾ ትኽእል ኢኻ ባዶ ስርርዕ fallbackPlacementsንኣማራጺ ኣብ ምግልባጥ መቐየሪ ብምሕላፍ።

• autoCloseሕጂ ንቑልቁል ዝወርድ ምልክታታት ብሓድሽ ኣማራጺ ነቲ ኣውቶማቲክ ምዕጻው ባህሪ ንምሕላው ዝጥወቑ ክኾኑ ይኽእሉ ። ነዚ ኣማራጺ እዚ ተጠቒምካ ነቲ ኣብ ውሽጢ ወይ ካብቲ ንቑልቁል ዝወርድ ዝርዝር ዘሎ ጠውቂ ክትቅበሎ ትኽእል ኢኻ ምእንቲ መስተጋብራዊ ክኸውን።

• ድሮፕዳውንድስ ሕጂ .dropdown-itemብ s ዝተጠቕለለ <li>s ይድግፉ።

ጃምቦትሮን ዝበሃል እዩ።

• ምብታኽምስ ዩቲሊቲታት ክድገም ስለ ዝኽእል ነቲ ጃምቦትሮን ባእታ ኣውዲቕዎ። ንዲሞ ሓድሽ ናይ ጃምቦትሮን ኣብነትና ርአ።

ዝርዝር ጉጅለ

• ሓድሽ .list-group-numberedመቐየሪ ናብ ዝርዝር ጉጅለታት ተወሰኸ።

ናቭስን ትቦታትን

• ሓደስቲ nullተለዋዋጢ ን font-size, font-weight, color, ከምኡውን :hover colorናብቲ .nav-linkክፍሊ ተወሰኸ።

ናቭባርስ

• ምብታኽሕጂ ናቭባር ኣብ ውሽጢ መትሓዚ የድልዮም (ንኣድላይነት ርሕቀትን ዘድሊ CSSን ብሓያል መልክዑ ንምቕላል)።

ካብ ካንቫስ ወጻኢ

• ሓድሽ ናይ offcanvas ክፍሊ ተወሰኸ ።

ገጽ ምሃብ

• ሕጂ ናይ ገጽ መላግቦታት margin-leftካብ ነንሕድሕዶም ክፈላለዩ ከለዉ ኣብ ኩሉ ኩርናዓት ብዳይናሚክ ዝኽበቡ ብሕታዊ ዝመዓራረዩ ኣለዎም።

• transitionኣብ ናይ ገጽ መላግቦታት s ተወሰኸ ።

ፖፖቨርስ ዝበሃል እዩ።

• ምብታኽኣብቲ ነባሪ ፖፖቨር ቅጥዒና .arrowናብ ተቐይሩ።.popover-arrow

• ኣማራጺ whiteListናብ allowList.

ስፒነራት

• ሕጂ ስፒነራት prefers-reduced-motion: reduceኣኒሜሽን ብምዝሕሓል የኽብሩ። #31882 ርአ ።

• ዝተመሓየሸ ስፒነር ቨርቲካል ኣሰላልፋ።

ቶስት ዝበሃል ምግቢ

• ቶስት ሕጂ ብሓገዝ ኣቀማምጣ ዩቲሊቲታት ኣብ ሓደ ክቕመጡ ይኽእሉ ’ ዮም ።.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

• ምብታኽኣሉታዊ ወሰን ብነባሪ ተሰናኺሉ።

• ንድሕረ ባይታ 's ናብ ተወሳኺ ባእታታት .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 map ድማ ክቕየሩ ይኽእሉ።

• ምብታኽከም ንሓጺርነትን ቅኑዕነትን ዝተሰየመ .font-weight-*ዩቲሊቲታት ።.fw-*

• ምብታኽከም ንሓጺርነትን ቅኑዕነትን ዝተሰየመ .font-style-*ዩቲሊቲታት ።.fst-*

• ንኣቀማምጣታት CSS Gridን flexboxን ዝኸውን ዩቲሊቲታትን ሓደስቲ ዩቲሊቲታትን ( ) .d-gridንምርኣይ ተወሰኸ ።gap.gap

• ምብታኽተኣልዩን ፣ .rounded-smከምኡውን rounded-lgሓድሽ ደረጃ ክፍልታት ኣተኣታትዩ፣ .rounded-0ናብ .rounded-3. #31687 ርአ ።

• ሓደስቲ line-heightዩቲሊቲታት ተወሰኹ: .lh-1, .lh-sm, .lh-baseከምኡውን .lh-lg. ኣብዚ ርአ ።

• ኣብ CSSና ዘሎ .d-noneዩቲሊቲ ካብ ካልኦት ዲስፕለይ ዩቲሊቲታት ዝያዳ ክብደት ንኽህልዎ ኣንቀሳቒስዎ።

• ነቲ .visually-hidden-focusableሓጋዚ ኣብ መትሓዚታት እውን ንኽሰርሕ ኣስፊሕዎ፣ :focus-within.

ሓገዝቲ

• ምብታኽ ምላሽ ዝህቡ ናይ ምትእትታው ሓገዝቲ ናብ ሬሽዮ ሓገዝቲ ብሓደስቲ ናይ ክፍሊ ኣስማትን ዝተመሓየሸ ባህርያትን ከምኡ’ውን ሓጋዚ CSS ተለዋዋጢ ተሰይሞም ኣለዉ።

  • ክፍልታት byናብ xኣብ ኣስፔክት ሬሽዮ ንኽቕየሩ ተሰይሞም ኣለዉ። ንኣብነት .ratio-16by9፡ ሕጂ .ratio-16x9.
  • ነቲ .embed-responsive-itemand element group selector ንዝቐለለ መምረጺ ንምድጋፍ ኣውዲቕናዮ ኣለና .ratio > *። ተወሳኺ ክፍሊ ኣየድልን እዩ፣ ሕጂ ድማ እቲ ሬሽዮ ሓጋዚ ምስ ዝኾነ ኤችቲኤምኤል ባእታ ይሰርሕ።
  • ካርታ $embed-responsive-aspect-ratiosሳስ ናብ ተቐይሩ $aspect-ratiosክብርታቱ ተቐሊሉ ስም ክፍልን ሚእታዊትን ከም key: valueጽምዲ ንኽሕወስ ተገይሩ ኣሎ።
  • ሕጂ ተለዋዋጢ CSS ተፈጢሮም ንነፍሲ ​​ወከፍ ዋጋ ኣብ ካርታ ሳስ ተኻቲቶም ኣለዉ። ዝኾነ ብሕታዊ ኣስፔክት ሬሽዮ ንምፍጣር --bs-aspect-ratioኣብ ልዕሊ ዘሎ ተለዋዋጢ ኣዐርዮ ።.ratio

• ምብታኽ “ስክሪን ሪደር” ዝብሉ ክፍልታት ሕጂ “ብዓይኒ ዝተሓብኡ” ክፍልታት ኮይኖም ኣለዉ .

  • ፋይል ሳስ ካብ 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 ነባሪ Popper config ከም ሞጎተ ዝቕበል ክሓልፍ ይኽእል እዩ፣ ምእንቲ ነዚ ነባሪ ውቅር ብመንገድኻ ከተዋሃህዶ ትኽእል። ኣብ ድሮፕዳውንድስ፣ ፖፖቨርስን ቱልቲፕስን ይምልከት።

• እቲ ነባሪ ዋጋ ናይቲ ንዝሓሸ ኣቀማምጣ ናይ ፖፐር ባእታታት fallbackPlacementsናብ ይቕየር ። ኣብ ድሮፕዳውንድስ፣ ፖፖቨርስን ቱልቲፕስን ይምልከት።['top', 'right', 'bottom', 'left']

• ካብ ህዝባዊ ስታትቲካዊ ኣገባባት ከም _getInstance()→ ዝኣመሰሉ ትሕቲ ምልክት ተኣልዩ getInstance()።