ናብ ቀንዲ ትሕዝቶ ዘልል ናብ docs navigation ዘልል
Check
in English

ናብ v5 ምግዓዝ

ካብ v4 ናብ v5 ክትሰጋገር ንኽሕግዘካ ኣብ ምንጪ ፋይላት ቡትስትራፕ፣ ሰነዳትን ኣካላትን ዝግበር ለውጢ ተኸታተልን ምግምጋምን ።

ኣብዚ ገጽ

v5.2.0 ዝብል ጽሑፍ ኣሎ።

ዝተሓደሰ ዲዛይን

Bootstrap v5.2.0 ኣብ መላእ ፕሮጀክት ንኣጻብዕቲ ዝቑጸሩ ኣካላትን ባህርያትን ረቂቕ ዲዛይን ምዕባለ ኣለዎ፣ ብፍላይ ብመንገዲ ዝተጸረዩ border-radiusክብርታት ኣብ መጠወቒታትን ቅጥዒ ቁጽጽርን . ሰነዳትና’ውን ብሓድሽ መበገሲ ገጽ፡ ድሕሪ ደጊም ንክፋላት ናይቲ ጎድናዊ መስመር ዘየፍርስ ዝቐለለ ኣቀማምጣ ሰነዳት፡ ከምኡ’ውን ዝያዳ ጐሊሖም ዝረኣዩ ኣብነታት ናይ Bootstrap Icons ተሓዲሱ ኣሎ።

ተወሳኺ ናይ CSS ተለዋዋጢ ረቛሒታት

ኩሎም ኣካላትና CSS ተለዋዋጢ ንኽጥቀሙ ኣዘምንዮም ኣለና። ሳስ ጌና ንኹሉ ዝድግፍ ክኸውን ከሎ፡ ነፍሲ ወከፍ ኣካል ኣብቲ ናይ ኣካላት መሰረታዊ ክፍልታት (ንኣብነት፡ ) ተለዋዋጢ CSS ንኽሕውስ ተሓዲሱ ኣሎ .btn፡ እዚ ድማ ንዝያዳ ኣብ ሓቀኛ ግዜ ምምዕርራይ ቡትስትራፕ የኽእል። ኣብ ዝቕጽሉ ምውጻእ፡ ኣጠቓቕማና ናይ CSS ተለዋዋጢ ረቛሒታት ናብ ኣቀማምጣና፡ ቅጥዕታትና፡ ሓገዝቲናን ዩቲሊቲታትናን ከነስፍሕ ኢና። ብዛዕባ ተለዋዋጢ 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ንሓደ ኦርጅናል ካርታ ዝግበር ምዕባለታት ኣብ ካልኣዊ ካርታታት ዘናውሕዎ ዘይተተግበረሉ ጉዳይ ንምእራም ሓያሎ ካርታታት ሳስ ካብ ይስሕብ ። ንኣብነት፡ updates to $theme-colorsኣብ ካልኦት ቴማ ካርታታት ኣብ ዝምርኮሱ ኣይኮኑን ዝትግበሩ ነይሮም $theme-colors፡ ቁልፊ ዋሕዚ ስራሕ ምምዕርራይ ዝሰብር። ብሓጺሩ Sass ሓደ ነባሪ ተለዋዋጢ ወይ ካርታ ምስ ተጠቕመሉ ፡ ክመሓየሽ ዘይክእል ደረት ኣለዎ። ኣብ CSS ተለዋዋጢ ረቛሒታት ካልኦት CSS ተለዋዋጢ ንምድላው ክጥቀሙ ከለዉ ተመሳሳሊ ጉድለት ኣሎ።

ነዚ እዩ ድማ ኣብ Bootstrap ተለዋዋጢ ምምዕርራይ ድሕሪ @import "functions", ግን ቅድሚን @import "variables"ዝተረፈ ናይ import stack ናትናን ክመጽእ ዘለዎ። ኣብ ካርታታት ሳስ እውን ከምኡ እዩ-እቶም ነባራት ቅድሚ ምልማዶም ክትሽፍኖም ኣለካ። እዞም ዝስዕቡ ካርታታት ናብቲ ሓድሽ ተሰጋጊሮም ኣለዉ _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

ሓደስቲ ዩቲሊቲታት

  • ንፍርቂ ድሙቕ ቅርጺ ፊደላት ንምሕዋስ ዝተሰፍሐ font-weightዩቲሊቲታት.fw-semibold ።
  • ክልተ ሓደስቲ ዓቐናት ንምሕዋስ ዝተሰፍሐ border-radiusዩቲሊቲታት.rounded-4 ፣ ከምኡውን .rounded-5፣ ንዝያዳ ኣማራጺታት።

ተወሳኺ ለውጢ

  • ሓድሽ $enable-container-classesኣማራጺ ኣተኣታትዩ። — ሕጂ ናብቲ ናይ ፈተነ CSS Grid ኣቀማምጣ ክንመርጽ ከለና .container-*፡ ክፍልታት ጌና ክጥርነፉ እዮም፡ እዚ ኣማራጺ ናብ false. ኮንተይነራት እውን ሕጂ ናይ ጓተር ክብርታቶም ይሕልዉ።

  • ሕጂ ካብ ካንቫስ ወጻኢ ዝኾነ ክፍሊ ምላሽ ዝህብ ፍልልያት ኣለዎ ። እቲ መበቆላዊ .offcanvasክፍሊ ከምዘይተቐየረ ይቕጽል-ኣብ ኩሉ ቪውፖርት ትሕዝቶ ይሓብእ። ምላሽ ዝህብ ንኽኸውን ነታ .offcanvasክፍሊ ናብ ዝኾነ .offcanvas-{sm|md|lg|xl|xxl}ክፍሊ ቀይራ።

  • ረጒድ መከፋፈልቲ ጠረጴዛ ሕጂ opt-in ኮይኖም ኣለዉ። — ኣብ መንጎ ጉጅለታት ሰደቓታት ዘሎ ዝረገፈን ንምግዳፍ ዝኸበደን ዶብ ኣወጊድና ናብ ሓደ ክትጥቀመሉ እትኽእል ኣማራጺ ክፍሊ ኣግዒዝናዮ ኣለና፣ .table-group-divider. ንኣብነት ኣብ ሰሌዳ ሰነዳት ርአ።

  • Scrollspy ዳግማይ ተጻሒፉ ኣሎ Intersection Observer API ንኽጥቀም ፣ እዚ ማለት ድሕሪ ደጊም ኣንጻራዊ ወላዲ መጠቕለሊ ኣየድልየካን እዩ፣ deprecatesoffsetconfig፣ ካልእን እዩ። ኣብ nav highlighting ዝያዳ ልክዕን ቅኑዕን ንኽኸውን Scrollspy ኣተገባብርኻ ድለ።

  • ፖፖቨርን ቱልቲፕስን ሕጂ CSS ተለዋዋጢ ይጥቀሙ። ገለ CSS ተለዋዋጢ ረቛሒታት ካብ መዛኑኦም ሳስ ተሓዲሶም ቁጽሪ ተለዋዋጢ ረቛሒታት ንምንካይ ተገይሩ ኣሎ። ከም ውጽኢቱ ድማ ኣብዚ ምውጻእ ሰለስተ ተለዋዋጢ ረቛሒታት ተኣልዮም ኣለዉ $popover-arrow-color፡ , $popover-arrow-outer-color, ከምኡውን $tooltip-arrow-color.

  • ሓደስቲ .text-bg-{color}ሓገዝቲ ተወሰኸ። ኣብ ክንዲ ውልቃውን ውጽኢታውን ምቕማጥ .text-*፡ ሕጂ .bg-*ነቶም ሓገዝቲ .text-bg-*ተጠቒምካ a background-colorwith contrasting foreground ከተቐምጥ ትኽእል ኢኻ color።

  • .form-check-reverseቅደም ተኸተል ስያመታትን ተዛመድቲ ሳጹናት ምልክት/ሬድዮታትን ንምግልባጥ መቐየሪ ተወሰኸ ።

  • ብመንገዲ ሓድሽ ክፍሊ ናብ ሰደቓታት ዝድግፉ ስሪት ዘለዎም ዓምድታት ተወሰኸ ።.table-striped-columns

ምሉእ ዝርዝር ለውጢ ንምርካብ፡ ኣብ GitHub ዘሎ ፕሮጀክት v5.2.0 ርአ ።

v5.1.0 ዝብል ጽሑፍ ኣሎ።

  • ንኣቀማምጣ CSS Grid ናይ ፈተነ ደገፍ ተወሰኸ ። — እዚ ኣብ ምድላው ዝርከብ ስራሕ እዩ፣ ገና ድማ ንኣጠቓቕማ ምፍራይ ድሉው ኣይኮነን፣ ግን ብመንገዲ Sass ናብቲ ሓድሽ ባህሪ ክትመርጹ ትኽእሉ ኢኹም። ንዕኡ ንምንቅስቓስ ድማ ነቲ ነባሪ ሽቦ ኣሰናኽሎ፣ ብምቕማጥ $enable-grid-classes: falseከምኡውን ነቲ CSS Grid ብምቕማጥ ኣንቅሖ $enable-cssgrid: true።

  • offcanvas ንምድጋፍ ዝተመሓየሹ navbars። — ኣብ ዝኾነ navbar ምስቶም መልሲ ዝህቡ .navbar-expand-*ክፍልታትን ገለ offcanvas markupን offcanvas ሳጹናት ምውሳኽ ።

  • ሓድሽ ናይ ቦታ መትሓዚ ክፍሊ ተወሰኸ . — ሓድሽ ኣካልና፡ ኣብ ክንዲ ሓቀኛ ትሕዝቶ ግዝያዊ ብሎኮታት ንምቕራብ ዝሕግዝ መንገዲ፡ ኣብ መርበብ ሓበሬታኻ ወይ ኣፕካ ገለ ነገር ጌና ይጽዕን ከምዘሎ ንምምልካት ዝሕግዝ መንገዲ።

  • ሕጂ ናይ ምዕጻፍ ፕላግ-ኢን ንኣግማድ ምዕጻው ይድግፍ ። —.collapse-horizontal ኣብ ክንዲ .collapseነቲ . width_ ንሓደ ወይ heightብምቕማጥ ዳግማይ ምቕባእ መርበብ ሓበሬታ ኣወግድ ።min-heightheight

  • ሓደስቲ ስታክን ቨርቲካል ሩልን ሓገዝቲ ተወሰኸ። — ብቕልጡፍ ብስታክስ ብሕታዊ ኣቀማምጣ ንምፍጣር ብዙሓት ናይ ፍሌክስቦክስ ባህርያት ብቕልጡፍ ተግባራዊ ግበር ። ካብ ኣግማድ ( .hstack)ን ቀጥታዊ ( .vstack)ን ስታክስ ምረጽ። ምስቶም ሓደስቲ ሓገዝቲ<hr> ምስ ባእታታት ዝመሳሰሉ ቀጥታዊ መከፋፈልቲ ወስኹ ።.vr

  • ሓደስቲ ዓለማዊ :rootተለዋዋጢ CSS ተወሰኸ። —:root ንመቆጻጸሪ <body>ቅዲታት ኣብቲ ደረጃ ሓያሎ ሓደስቲ ተለዋዋጢ CSS ተወሰኸ ። ተወሳኺ ኣብ ስራሓት ኣሎ፣ ኣብ መላእ ዩቲሊቲታትናን ኣካላትናን ሓዊስካ፣ ንሕጂ ግን ኣብቲ Customize ዝብል ክፍሊ CSS ተለዋዋጢ ኣንብብ ።

  • ተለዋዋጢ CSS ንምጥቃም ናይ ሕብርን ድሕረ ባይታ ዩቲሊቲታት ተጸጊኑ፣ ከምኡ’ውን ሓደስቲ ናይ ጽሑፍ ዘይንጹርነትን ድሕረ ባይታ ዘይንጹርነትን ዩቲሊቲታት ወሲኹ። — .text-* ከምኡ’ውን .bg-*ዩቲሊቲታት ሕጂ ብሲኤስኤስ ተለዋዋጢን rgba()ሕብራዊ ክብርታትን ተሃኒጾም ኣለዉ፣ እዚ ድማ ዝኾነ ዩቲሊቲ ብቐሊሉ ብሓደስቲ ናይ ዘይንጹርነት ዩቲሊቲታት ክትጥዕሞ የኽእለካ።

  • ንኣካላትና ከመይ ጌርና ከም ዝጥዕም ንምግላጽ ዝተመርኮሰ ሓደስቲ ቁንጣሮ ኣብነታት ተወሰኸ። — ምስ ሓደስቲ ኣብነታት ስኒፔትስና ብዓይነት ዝተዳለዉ ኣካላትን ካልእ ልሙዳት ዲዛይን ቅዲታትን ንምጥቃም ድሉው ስሓብ ። እግረ - ጽሑፍ ፣ ንቑልቁል ዝወርድ ፣ ዝርዝር ጉጅለታትን ሞዳላትን የጠቓልል ።

  • እዚኦም ብፖፐር ጥራይ ስለዝተሓዙ ካብ ፖፖቨርስን ቱልቲፕስን ዘይተጠቕሙ ቅዲታት ኣቀማምጣ ተኣልዮም ። ኣብ መስርሕ $tooltip-marginተኣልዩን ተቐሚጡን ኣሎ ።null

ተወሳኺ ሓበሬታ ትደልዩ? ነቲ v5.1.0 ዝብል ጽሑፍ ብሎግ ኣንብብዎ።

እሂ ኣብኡ! ኣብቲ ናይ መጀመርታ ዓቢ ምውጻእና ቡትስትራፕ 5 v5.0.0 ዝተገብረ ለውጢ ኣብ ታሕቲ ተሰኒዱ ኣሎ። ነቲ ኣብ ላዕሊ ዝተገልጸ ተወሳኺ ለውጢ ዘንጸባርቑ ኣይኮኑን።

ጽግዕተኛታት

  • 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 ሕብራዊ ቦታ ስለዘይተኣሳሰር ፋንክሽንን ተዛመድቲ 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-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

  • እቲ ንነዊሕ እዋን ዝጸንሐ 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 ባእታ ብምቕያር ጥራይ ከም ድላይካ ናይ ውሽጢ መስመር ወይ ናይ ሓገዝ ጽሑፍ ክትዓግቶ የኽእለካ።

  • ቅጥዒ ቁጽጽር ድሕሪ ደጊም heightኣብ ዝከኣለሉ እዋን ጽኑዕ ኣይጥቀሙን እዮም፣ ኣብ ክንድኡ min-heightምምዕርራይን ምስ ካልኦት ኣካላት ምትእስሳርን ንምምሕያሽ ናብ ምድንጓይ።

  • ናይ ምጽዳቕ ምልክታት ድሕሪ ደጊም ኣብ <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ነቲ መሰረት ዝገበረ ኣኮርድዮን ብሓድሽ ናይ ኣኮርድዮን ክፍሊ ተኪእዎ ።

ናይ ምዕጻው መጠወቒ

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

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

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

ፈረሰ

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

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

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

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

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

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

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

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

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

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

ዝርዝር ጉጅለ

  • ሓደስቲ nullተለዋዋጢ ን font-size, font-weight, color, ከምኡውን :hover colorናብቲ .nav-linkክፍሊ ተወሰኸ።
  • ምብታኽሕጂ ናቭባር ኣብ ውሽጢ መትሓዚ የድልዮም (ንኣድላይነት ርሕቀትን ዘድሊ CSSን ብሓያል መልክዑ ንምቕላል)።
  • ምብታኽእቲ .activeክፍሊ ድሕሪ ደጊም ኣብ s ክውዕል ኣይክእልን እዩ .nav-item፣ ብቐጥታ ኣብ s ክውዕል ኣለዎ .nav-link።

ካብ ካንቫስ ወጻኢ

ገጽ ምሃብ

  • ሕጂ ናይ ገጽ መላግቦታት 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 መምረጺ ሓሊፍካ ሓድሽ ምሳሌ ናይቲ ፕላግ-ኢን ክትፈጥር ትኽእል ኢኻ፤

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

  • popperConfigከም ሓደ ፋንክሽን ናይ Bootstrap ነባሪ Popper config ከም ሞጎተ ዝቕበል ክሓልፍ ይኽእል እዩ፣ ምእንቲ ነዚ ነባሪ ውቅር ብመንገድኻ ከተዋሃህዶ ትኽእል። ኣብ ድሮፕዳውንድስ፣ ፖፖቨርስን ቱልቲፕስን ይምልከት።

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

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