ባጅታት

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

ኣብዚ ገጽ

ኣብነታት

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

ኣርእስታት

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

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

መጠወቒታት

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

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

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

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

መርገጺ ሒዙ

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

<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ክፍሊ ብውሑዳት ተወሳኺ ዩቲሊቲታት ብዘይ ቆጸራ ንዝያዳ ሓፈሻዊ መርኣዪ ክትትክኦ ትኽእል ኢኻ።

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

ሕብርታት ድሕረ ባይታ

መልክዕ ናይ ሓደ ባጅ ብቕልጡፍ ንምቕያር ናይ ድሕረ ባይታ ዩቲሊቲ ክፍልታትና ተጠቐሙ። በጃኻ ኣስተውዕል Bootstrap's default ክትጥቀም ከለኻ , ንግቡእ ቅዲ .bg-lightከም ናይ ጽሑፍ ሕብሪ ዩቲሊቲ ከድልየካ ተኽእሎ ኣሎ ። .text-darkእዚ ዝኾነሉ ምኽንያት ድማ ድሕረ ባይታ ዩቲሊቲታት ብዘይካ background-color.

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

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

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

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

ናይ ከኒና ባጅ

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

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

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

ሳስ

ተለዋዋጢ ረቛሒታት

$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;