ጽሑፍ
ንኣሰላልፋ፣ ምጥቕላል፣ ክብደትን ካልእን ንምቁጽጻር ዝሕግዙ ናይ ልሙዳት ናይ ጽሑፍ ውጽኢታት ሰነዳትን ኣብነታትን።
ጽሑፍ ኣሰላልፋ
ጽሑፍ ብቐሊሉ ናብ ኣካላት ምስ ናይ ጽሑፍ ኣሰላልፋ ክፍልታት ዳግማይ ኣመዓራርዮ። ንመጀመርታ፣ መወዳእታን ማእከልን ኣሰላልፋ፣ ከም ስርዓት ሽቦ ተመሳሳሊ ስፍሓት ቪውፖርት ስብራት ዝጥቀሙ ምላሽ ዝህቡ ክፍልታት ኣለዉ።
ኣብ ኩሉ ዓቐናት ቪውፖርት ዝተሰለፈ ጽሑፍ ጀምር።
ኣብ ኩሉ ዓቐናት ቪውፖርት ብማእከል ዝተሰለፈ ጽሑፍ።
ኣብ ኩሉ ዓቐናት ቪውፖርት ዝተሰለፈ ጽሑፍ ምዝዛም።
ኣብ SM (ንእሽቶ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።
ኣብ MD (ማእከላይ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።
ኣብ LG (ዓቢ) ወይ ካብኡ ንላዕሊ ዝዓቐኑ ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።
ኣብ XL (ተወሳኺ-ዓቢ) ወይ ካብኡ ዝሰፍሐ ስፍሓት ዘለዎም ቪውፖርትታት ዝተሰለፈ ጽሑፍ ጀምር።
<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>
<p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
ጽሑፍ ምጥቕላልን ምፍሳስን
.text-wrap
ጽሑፍ ብክላስ ምጥቕላል ።
<div class="badge bg-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
ጽሑፍ ብክላስ ከይጥቕለል ምክልኻል .text-nowrap
።
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
ቃል ምብታኽ
ነዊሕ ሕብረ ቃላት ንኣቀማምጣ ኣካላትካ ከይሰብር .text-break
to set word-wrap: break-word
and word-break: break-word
. word-wrap
ኣብ ክንዲ እቲ ዝያዳ ዝውቱር overflow-wrap
ንዝሰፍሐ ደገፍ መርበብ ሓበሬታ ንጥቀመሉ ፣ ከምኡ’ውን word-break: break-word
ምስ ፍሌክስ መትሓዚታት ንዘጋጥም ጸገማት ንምክልኻል ነቲ ዘይተጠቕመ ንውስኸሉ።
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
.text-break
ካብቲ ናትና RTL ዝተጠርነፈ CSS ይእለ።
ጽሑፍ ምቕያር
ጽሑፍ ኣብ ኣካላት ምስ ናይ ጽሑፍ ርእሰ-ጽሑፍ ክፍልታት ምቕያር።
ብንእሽቶ ፊደል ዘለዎ ጽሑፍ።
ዓቢ ፊደል ዘለዎ ጽሑፍ።
ካፒታላይዝድ ዝኾነ ጽሑፍ።
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
ከመይ ጌሩ ናይ ነፍሲ ወከፍ ቃል ቀዳማይ ፊደል ጥራይ ከም ዝቕይር ኣስተውዕል .text-capitalize
፣ ንጉዳይ ዝኾነ ካልእ ፊደላት ከይተተንከፈ ይገድፎ።
ዓቐን ቅርጺ ፊደል
ብቕልጡፍ ነቲ font-size
ናይ ጽሑፍ ቀይርዎ። ናይ ርእሲ ክፍልታትና (ንኣብነት .h1
፡ – .h6
) font-size
, font-weight
, ከምኡ’ውን line-height
ክሰርሑ እንከለዉ፡ እዞም ዩቲሊቲታት እዚኣቶም ጥራይ እዮም ዝምልከቱ font-size
። ነዞም ዩቲሊቲታት ዝኸውን ዓቐን ምስ ናይ HTML ርእሲ ባእታታት ይሰማማዕ እዩ፣ ስለዚ እቲ ቁጽሪ እናወሰኸ ምስ ከደ ዓቐኖም ይንኪ።
.fs-1 ጽሑፍ
.fs-2 ጽሑፍ
.fs-3 ጽሑፍ
.fs-4 ጽሑፍ
.fs-5 ጽሑፍ
.fs-6 ጽሑፍ
<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>
ነቲ ናይ ሳስ ካርታ font-size
ብምቕያር ነቲ ዝርከብ s ንዓኻ ዝምጥን ኣመዓራርዮ ።$font-sizes
ክብደት ቅርጺ ፊደላትን ሰያፍ ፊደልን
ብቕልጡፍ ነቲ font-weight
ወይ font-style
ናይ ጽሑፍ በዞም ዩቲሊቲታት ቀይርዎ። font-style
ዩቲሊቲታት ከም ተሓጺረን ዩቲሊቲታት .fst-*
ድማ font-weight
ከም .fw-*
.
ድሙቕ ጽሑፍ።
ዝደመቐ ክብደት ዘለዎ ጽሑፍ (ምስ ወላዲ ባእታ ብተዛማዲ)።
ንቡር ክብደት ጽሑፍ።
ቀሊል ክብደት ዘለዎ ጽሑፍ።
ቀሊል ክብደት ዘለዎ ጽሑፍ (ምስ ወላዲ ባእታ ብተዛማዲ)።
ብሰያፍ ዝተጻሕፈ ጽሑፍ።
ጽሑፍ ምስ ንቡር ቅዲ ቅርጺ ፊደል
<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>
ቁመት መስመር
ቁመት መስመር ብዩቲሊቲ ምቕያር .lh-*
።
እዚ ንሓደ ባእታ መስመር-ቁመት ብዩቲሊቲታትና ብኸመይ ከም ዝጽሎ ንምግላጽ ዝተጻሕፈ ነዊሕ ሕጡበ-ጽሑፍ እዩ። ክፍልታት ኣብቲ ባእታ ባዕሉ ወይ ሓደ ሓደ ግዜ ኣብቲ ወላዲ ባእታ ይትግበሩ። እዞም ክፍልታት ከም ኣድላይነቱ ብናይ ዩቲሊቲ ኤፒኣይና ክመዓራረዩ ይኽእሉ።
እዚ ንሓደ ባእታ መስመር-ቁመት ብዩቲሊቲታትና ብኸመይ ከም ዝጽሎ ንምግላጽ ዝተጻሕፈ ነዊሕ ሕጡበ-ጽሑፍ እዩ። ክፍልታት ኣብቲ ባእታ ባዕሉ ወይ ሓደ ሓደ ግዜ ኣብቲ ወላዲ ባእታ ይትግበሩ። እዞም ክፍልታት ከም ኣድላይነቱ ብናይ ዩቲሊቲ ኤፒኣይና ክመዓራረዩ ይኽእሉ።
እዚ ንሓደ ባእታ መስመር-ቁመት ብዩቲሊቲታትና ብኸመይ ከም ዝጽሎ ንምግላጽ ዝተጻሕፈ ነዊሕ ሕጡበ-ጽሑፍ እዩ። ክፍልታት ኣብቲ ባእታ ባዕሉ ወይ ሓደ ሓደ ግዜ ኣብቲ ወላዲ ባእታ ይትግበሩ። እዞም ክፍልታት ከም ኣድላይነቱ ብናይ ዩቲሊቲ ኤፒኣይና ክመዓራረዩ ይኽእሉ።
እዚ ንሓደ ባእታ መስመር-ቁመት ብዩቲሊቲታትና ብኸመይ ከም ዝጽሎ ንምግላጽ ዝተጻሕፈ ነዊሕ ሕጡበ-ጽሑፍ እዩ። ክፍልታት ኣብቲ ባእታ ባዕሉ ወይ ሓደ ሓደ ግዜ ኣብቲ ወላዲ ባእታ ይትግበሩ። እዞም ክፍልታት ከም ኣድላይነቱ ብናይ ዩቲሊቲ ኤፒኣይና ክመዓራረዩ ይኽእሉ።
<p class="lh-1">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-sm">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-base">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
<p class="lh-lg">This is a long paragraph written to show how the line-height of an element is affected by our utilities. Classes are applied to the element itself or sometimes the parent element. These classes can be customized as needed with our utility API.</p>
ሞኖስፔስ ዝበሃል ቦታ
ሓደ ምርጫ ናብ ሞኖስፔስ ቅርጺ ፊደልና ብ .font-monospace
.
እዚ ኣብ ሞኖስፔስ እዩ።
<p class="font-monospace">This is in monospace</p>
ሕብሪ ዳግማይ ምትካል
ናይ ሓደ ጽሑፍ ወይ መላግቦ ሕብሪ ብ .text-reset
, ዳግማይ ኣቐምጦ፣ ምእንቲ ነቲ ሕብሪ ካብ ወላዲኡ ክወርሶ።
ድምጺ ኣልቦ ጽሑፍ ምስ ዳግመ ምትዕርራይ መላግቦ .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
ጽሑፍ ስልማት
ጽሑፍ ብባእታታት ብናይ ጽሑፍ ስልማት ክፍልታት ምውቃብ።
<p class="text-decoration-underline">This text has a line underneath it.</p>
<p class="text-decoration-line-through">This text has a line going through it.</p>
<a href="#" class="text-decoration-none">This link has its text decoration removed</a>
ሳስ
ተለዋዋጢ ረቛሒታት
// stylelint-disable value-keyword-case
$font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif);
$font-family-code: var(--#{$variable-prefix}font-monospace);
// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
// $font-size-base affects the font size of the body text
$font-size-root: null;
$font-size-base: 1rem; // Assumes the browser default, typically `16px`
$font-size-sm: $font-size-base * .875;
$font-size-lg: $font-size-base * 1.25;
$font-weight-lighter: lighter;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: bolder;
$font-weight-base: $font-weight-normal;
$line-height-base: 1.5;
$line-height-sm: 1.25;
$line-height-lg: 2;
$h1-font-size: $font-size-base * 2.5;
$h2-font-size: $font-size-base * 2;
$h3-font-size: $font-size-base * 1.75;
$h4-font-size: $font-size-base * 1.5;
$h5-font-size: $font-size-base * 1.25;
$h6-font-size: $font-size-base;
ካርታታት
ካብዚ ካርታ እዚ ቅርጺ ቅርጺ ዘለዎም ዩቲሊቲታት ይፍጠሩ፣ ምስ ዩቲሊቲታትና ኤፒኣይ ተደሚሮም።
$font-sizes: (
1: $h1-font-size,
2: $h2-font-size,
3: $h3-font-size,
4: $h4-font-size,
5: $h5-font-size,
6: $h6-font-size
);
ዩቲሊቲስ ኤፒኣይ
ፊደልን ጽሑፍን ዩቲሊቲታት ኣብ ዩቲሊቲታትና ኤፒኣይ ኣብ scss/_utilities.scss
. ከመይ ጌርካ ናይ ዩቲሊቲስ ኤፒኣይ ከም እትጥቀመሉ ተማሃር።
"font-family": (
property: font-family,
class: font,
values: (monospace: var(--#{$variable-prefix}font-monospace))
),
"font-size": (
rfs: true,
property: font-size,
class: fs,
values: $font-sizes
),
"font-style": (
property: font-style,
class: fst,
values: italic normal
),
"font-weight": (
property: font-weight,
class: fw,
values: (
light: $font-weight-light,
lighter: $font-weight-lighter,
normal: $font-weight-normal,
bold: $font-weight-bold,
bolder: $font-weight-bolder
)
),
"line-height": (
property: line-height,
class: lh,
values: (
1: 1,
sm: $line-height-sm,
base: $line-height-base,
lg: $line-height-lg,
)
),
"text-align": (
responsive: true,
property: text-align,
class: text,
values: (
start: left,
end: right,
center: center,
)
),
"text-decoration": (
property: text-decoration,
values: none underline line-through
),
"text-transform": (
property: text-transform,
class: text,
values: lowercase uppercase capitalize
),
"white-space": (
property: white-space,
class: text,
values: (
wrap: normal,
nowrap: nowrap,
)
),
"word-wrap": (
property: word-wrap word-break,
class: text,
values: (break: break-word),
rtl: false
),