ናብ v5 ምግዓዝ
ካብ v4 ናብ 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)
መንጎን )።sm
lg
-
ምብታኽቅዲታት ሕትመትን
$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-shadow
mixins ሕጂ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
, ወይ about24px
, down from30px
) ድማ ዝጸበቡ እዮም። እዚ ድማ ንናይ ሽቦ ስርዓትና ጐዳጉዲ ምስ ናይ ርሕቀት ዩቲሊቲታትና የሰማምዖም።- ንኣግማድ/ቀጥታዊ ጐዳጉዲ፣ ኣግማድ ጐዳጉዲ፣ ከምኡውን ቀጥታዊ ጐዳጉዲ ንምቁጽጻር ሓድሽ ናይ ጐዳጉዲ ክፍሊ (
.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-col
mixin ናብ ነባሪ ናብ ማዕረ ዓምድታት ብዘይ ዝተወሰነ ዓቐን ኣዘሚኑዎ።
ትሕዝቶ፡ ሪቦት ወዘተ
-
RFS ሕጂ ብነባሪ ተኸፊቱ ኣሎ። ሚክሲን ዝጥቀሙ
font-size()
ኣርእስታት ብኣውቶማቲክ ናቶምfont-size
ናብ ስኬል ምስቲ ቪውፖርት ከስተኻኽሉ እዮም። እዚ ባህሪ ቅድሚ ሕጂ ምስ v4 opt-in እዩ ነይሩ። -
ምብታኽ
$display-*
ንተለዋዋጢ ረቛሒታትና ንምትካእን$display-font-sizes
ብሳስ ካርታን ንምትካእን ናይ ምርኢት ታይፖግራፊና ዳግመ ምጽጋን ጌርናዮ።$display-*-weight
ከምኡ’ውን ንሓደ ንጽልን$display-font-weight
ዝተመዓራረየንfont-size
s ውልቃዊ ተለዋዋጢ ረቛሒታት ኣወጊዱ ። -
ክልተ ሓደስቲ
.display-*
ዓቐናት ኣርእስቲ ተወሰኸ፣.display-5
ከምኡውን.display-6
. -
መላግቦታት ብነባሪ ስርርዕ ይግበረሎም (ኣብ ሆቨር ጥራይ ዘይኮነ)፣ ኣካል ናይ ፍሉያት ኣካላት እንተዘይኮይኖም።
-
ቅዲታቶም ንምሕዳስን ብCSS ተለዋዋጢ ረቛሒታት ዳግማይ ንምህናጾምን ዳግማይ ዝተነድፉ ሰደቓታት ንዝያዳ ምቁጽጻር ቅዲ።
-
ምብታኽድሕሪ ሕጂ ዝተሰፍሩ ሰደቓታት ቅዲታት ኣይወርሱን እዮም።
-
ምብታኽ
.thead-light
ከምኡ’ውን ንኹሎም ባእታታት ሰደቓ ( , , , , and ) ክጥቀሙ ዝኽእሉ ፍልልያት ክፍልታት.thead-dark
ንምድጋፍ ይወድቁ ።.table-*
thead
tbody
tfoot
tr
th
td
-
ምብታኽእቲ
table-row-variant()
ሚክሲን ናብtable-variant()
2 መለክዒታት ጥራይ ይቕየርን ይቕበልን:$color
(ስም ሕብራዊ)ን$value
(ሕብራዊ ኮድ)ን። እቲ ናይ ዶብ ሕብሪን ናይ ላህጃ ሕብርታትን ብኣውቶማቲክ ኣብቲ ናይ ሰደቓ ረቛሒ ተለዋዋጢ ረቛሒታት ተመርኲሱ ይሕሰብ። -
ናይ ሰደቓ ዋህዮ መሸፈኒ ተለዋዋጢ
-y
ናብን ምምቃል-x
. -
ምብታኽክፍሊ ወዲቑ
.pre-scrollable
። #29135 ርአ -
ምብታኽ
.text-*
ዩቲሊቲታት ድሕሪ ሕጂ ኣብ ሊንክታት hover and focus states ኣይውስኹን እዮም።.link-*
ኣብ ክንድኡ ናይ ሓገዝቲ ክፍልታት ክጥቀሙ ይኽእሉ። #29267 ርአ -
ምብታኽክፍሊ ወዲቑ
.text-justify
። #29793 ርአ -
ነባሪ ኣግማድ ምውላዕን
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-text
no longer setsdisplay
, ነቲ ናይ 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-divider
CSS ዳግማይ ምጥርናፍ ከየድለየካ ንቐሊል ምምዕርራይ ሓድሽ ናይ 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-radius
s ምስ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>
-
ን , , , ከምኡውን . _ ክብርታት ንነፍሲ ወከፍ ንብረት , , ከምኡውን የጠቓልል።
top
right
bottom
left
0
50%
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 layoutsን ዝኸውን ዩቲሊቲታትን ሓደስቲ ዩቲሊቲታትን ( )
.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-item
and 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()
።