ባጅታት

ሰነዳትን ኣብነታትን ንባጅ፣ ንእሽቶ ቁጽርን ምልክትን ባእታና ።

ኣብዚ ገጽ

ኣብነታት

emባጅታት ኣንጻራዊ ዓቐን ቅርጺ ፊደላትን ኣሃዱታትን ብምጥቃም ምስ ዓቐን ናይቲ ቀረባ ወላዲ ባእታ ንኽሰማምዑ ይዕቀኑ ። ካብ v5 ጀሚሩ፡ ባጅታት ድሕሪ ሕጂ ንመላግቦታት ዝኸውን ፎኮስ ወይ ሆቨር ቅዲ የብሎምን።

ኣርእስታት

ኣብነት ኣርእስቲሓድሽ

html ዝብል ጽሑፍ ኣሎ።

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

መጠወቒታት

ባጅ ከም ኣካል ናይ መላግቦታት ወይ መጠወቒታት ተጠቒምካ ቆጻሪ ክትህብ ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ።

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

ከከም ኣጠቓቕምኦም፡ ባጅ ንተጠቀምቲ ስክሪን ሪደርን ተመሳሳሊ ሓገዝቲ ቴክኖሎጂታትን ምድንጋር ክፈጥሩ ከም ዝኽእሉ ኣስተውዕል። ቅዲ ባጅ ዕላምኦም ስእላዊ ምልክት ክህብ እንከሎ፡ እዞም ተጠቀምቲ ግን ትሕዝቶ ናይቲ ባጅ ጥራይ ክቐርቡ እዮም። ከከምቲ ፍሉይ ኩነታት፡ እዞም ባጅ እዚኣቶም፡ ኣብ መወዳእታ ሓረግ፡ መላግቦ ወይ መጠወቒ፡ ብሃንደበት ዚርከቡ ተወሳኺ ቃላት ወይ ቝጽርታት ኪመስሉ ይኽእሉ እዮም።

እቲ ዓውዲ ንጹር እንተዘይኮይኑ (ከምቲ ኣብነት “መፍለጢታት”፡ እቲ “4” ብዝሒ መፍለጢታት ምዃኑ ዝተረድአሉ)፡ ተወሳኺ ዓውዲ ምስ ብዓይኒ ዝተሓብአ ተወሳኺ ጽሑፍ ምሕዋስ ኣብ ግምት ኣእቱ።

መርገጺ ሒዙ

.badgea ንምቕያርን ኣብ ኩርናዕ ናይ ሓደ ሊንክ ወይ መጠወቒ ንምቕማጥን ዩቲሊቲታት ተጠቐም ።

html ዝብል ጽሑፍ ኣሎ።

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

ብተወሳኺ ነቲ .badgeክፍሊ ብውሑዳት ተወሳኺ ዩቲሊቲታት ብዘይ ቆጸራ ንዝያዳ ሓፈሻዊ መርኣዪ ክትትክኦ ትኽእል ኢኻ።

html ዝብል ጽሑፍ ኣሎ።

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

ሕብርታት ድሕረ ባይታ

ኣብ v5.2.0 ተወሰኸ

ምስ ሓገዝትና ንጽጽርbackground-color ቅድሚት ኣቐምጥ ። ቅድሚ ሕጂ ዝመረጽካዮን ንቅዲ ዝኸውን ዩቲሊቲታትን ብኢድካ ምጽምባር ይግደድ ነይሩ ፡ እንተደሊኻ ሕጂ’ውን ክትጥቀመሉ ትኽእል ኢኻ።color.text-bg-{color}.text-{color}.bg-{color}

ቀዳማይ ካልኣይ ደረጃ ዓወት ሓደጋ ምኸዳን ሓበሬታ ብርሃን ፀልማት

html ዝብል ጽሑፍ ኣሎ።

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-bg-dark">Dark</span>

ንሓገዝቲ ቴክኖሎጂታት ትርጉም ምትሕልላፍ

ትርጉም ንምውሳኽ ሕብሪ ምጥቃም ስእላዊ ምልክት ጥራይ እዩ ዝህብ፣ እዚ ድማ ንተጠቀምቲ ሓገዝቲ ቴክኖሎጂታት - ከም ስክሪን ሪደርስ - ኣይመሓላለፍን እዩ። ብሕብሪ ዝተመልከተ ሓበሬታ ወይ ካብቲ ትሕዝቶ ባዕሉ ርኡይ ምዃኑ ኣረጋግጽ (ንኣብነት እቲ ዝርአ ጽሑፍ)፣ ወይ ድማ ብኣማራጺ ኣገባብ ከም ዝሕወስ ኣረጋግጽ፣ ከም ተወሳኺ ጽሑፍ ምስቲ .visually-hiddenክፍሊ ዝተሓብአ።

ናይ ከኒና ባጅ

.rounded-pillባጅ ዝያዳ ክቡባት ምስ ዝዓበየ ንምግባር ነቲ ናይ ዩቲሊቲ ክፍሊ ተጠቐም border-radius.

ቀዳማይ ካልኣይ ደረጃ ዓወት ሓደጋ ምኸዳን ሓበሬታ ብርሃን ፀልማት

html ዝብል ጽሑፍ ኣሎ።

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

ኣብ v5.2.0 ተወሰኸ

ከም ኣካል ናይቲ ቡትስትራፕ ዝምዕብል ዘሎ ናይ CSS ተለዋዋጢ ኣቀራርባ፡ ባጅ ሕጂ .badgeንዝተዓጻጸፈ ናይ ሓቂ ግዜ ምምዕርራይ ከባብያዊ CSS ተለዋዋጢ on ይጥቀሙ። ክብርታት ናይ CSS ተቐያየርቲ ብመንገዲ Sass ይቕመጡ፣ ስለዚ Sass ምምዕርራይ ጌና ይድገፍ እዩ፣ ንሱ እውን።

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

ሳስ ተለዋዋጢ ረቛሒታት

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;