መጠንቀቕታታት

ንልሙዳት ተግባራት ተጠቃሚ ምስ ብኣጻብዕ ዝቑጸሩ ዝርከቡን ተዓጻጻፍን ናይ መጠንቀቕታ መልእኽትታት ዓውደ-ጽሑፋዊ ግብረ-መልሲ መልእኽትታት ምቕራብ።

ኣብነታት

ንዝኾነ ንውሓት ጽሑፍ መጠንቀቕታታት ይርከቡ፣ ከምኡ’ውን ኣማራጺ ናይ ምብራር መጠወቒ። ንግቡእ ቅዲ፡ ሓደ ካብቶም ሸውዓተ ዘድልዩ ዓውደ-ጽሑፋዊ ክፍልታት (ንኣብነት .alert-success፡ ) ተጠቐም። ንውሽጢ መስመር ምብራር፡ ነቲ መጠንቀቕታታት jQuery ፕላግ-ኢን ተጠቐም ።

ቀሊል ቀዳማይ መጠንቀቕታ- ርኣይዎ!

ቀሊል ካልኣዊ መጠንቀቕታ- ርኣይዎ!

ቀሊል ናይ ዓወት መጠንቀቕታ- ርኣይዎ!

ቀሊል ናይ ሓደጋ መጠንቀቕታ- ርኣይዎ!

ቀሊል ናይ መጠንቀቕታ መጠንቀቕታ- ርኣይዎ!

ቀሊል ናይ ሓበሬታ መጠንቀቕታ-ርኣይዎ!

ቀሊል ናይ ብርሃን መጠንቀቕታ- ርኣይዎ!

ቀሊል ጸሊም መጠንቀቕታ- ርኣይዎ!

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

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

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

ሕብሪ ምትእስሳር

.alert-linkኣብ ውሽጢ ዝኾነ መጠንቀቕታ ብቕልጡፍ ዝሰማማዕ ሕብራዊ መላግቦታት ንምሃብ ነቲ ናይ ዩቲሊቲ ክፍሊ ተጠቐም ።

ቀሊል ቀዳማይ መጠንቀቕታ ምስ ኣብነት መላግቦ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ካልኣዊ መጠንቀቕታ ምስ ኣብነት መላግቦ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ናይ ዓወት መጠንቀቕታ ምስ ኣብነት ሊንክ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ናይ ሓደጋ መጠንቀቕታ ምስ ኣብነት ሊንክ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል መጠንቀቕታ መጠንቀቕታ ምስ ኣብነት መላግቦ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ናይ ሓበሬታ መጠንቀቕታ ምስ ኣብነት ሊንክ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ናይ ብርሃን መጠንቀቕታ ምስ ኣብነት ሊንክ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

ቀሊል ጸሊም መጠንቀቕታ ምስ ኣብነት ሊንክ . እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

<div class="alert alert-primary" role="alert">
  A simple primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-success" role="alert">
  A simple success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-info" role="alert">
  A simple info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-light" role="alert">
  A simple light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

ተወሳኺ ትሕዝቶ

መጠንቀቕታታት ተወሳኺ ናይ ኤችቲኤምኤል ባእታታት ከም ኣርእስታት፣ ሕጡበ-ጽሑፋትን መከፋፈልትን እውን ክሕዙ ይኽእሉ።

ጽቡቕ ተሰሪሑ!

ኣውው እወ ነዛ ኣገዳሲት ናይ መጠንቀቕታ መልእኽቲ ብዓወት ኣንቢብካያ። እዚ ኣብነት ጽሑፍ ቁሩብ ነዊሕ ክጎዪ እዩ ምእንቲ ኣብ ውሽጢ ሓደ መጠንቀቕታ ዘሎ ርሕቀት ምስ ከምዚ ዓይነት ትሕዝቶ ከመይ ከም ዝሰርሕ ክትዕዘብ።

ኣብ ዘድልየካ እዋን፡ ነገራት ጽቡቕን ጽፉፍን ንኽኾኑ፡ ማርጅን ዩቲሊቲስ ምጥቃምካ ኣረጋግጽ።

<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Well done!</h4>
  <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
  <hr>
  <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
</div>

ምብራር

ናይ መጠንቀቕታ ጃቫስክሪፕት ፕላግ-ኢን ብምጥቃም፡ ዝኾነ መጠንቀቕታ ኣብ መስመር ምብራር ይከኣል እዩ። ከመይ ጌሩ ኣብዚ ኣሎ፤

ነቲ ናይ መጠንቀቕታ ፕላግ-ኢን፡ ወይ ነቲ ዝተጠርነፈ ቡትስትራፕ ጃቫስክሪፕት ከም ዝጸዓንካዮ ኣረጋግጽ።
ጃቫስክሪፕትናutil.js ካብ ምንጪ ትሃንጽ እንተኾንካ ፡ . እቲ ዝተጠርነፈ ስሪት ነዚ ዘጠቓልል እዩ።
ናይ ምብራር መጠወቒን .alert-dismissibleክላስን ወስኸሉ፣ እዚ ድማ ኣብ የማናይ ሸነኽ ናይቲ መጠንቀቕታ ተወሳኺ መሸፈኒ ይውስኽን ነቲ .closeመጠወቒ የቐምጦን።
ኣብቲ dismiss ዝብል መጠወቒ፡ ነቲ data-dismiss="alert"ባህሪ ወስኸሉ፡ እዚ ድማ ንተግባር ጃቫስክሪፕት የበግሶ። <button>ኣብ ኩሎም መሳርሒታት ንዝግባእ ባህሪ ነቲ ባእታ ምስኡ ምጥቃምካ ኣረጋግጽ ።
ንመጠንቀቕታታት ክትነጽጎም ከለኻ ህያው ንምግባር፡ ርግጸኛ ኩን the .fadeand .showclasses ምውሳኽ።

ነዚ ብተግባር ብቀጥታዊ ዲሞ ክትሪእዎ ትኽእሉ ኢኹም፤

ቅዱስ ጓካሞል! ኣብ ገለ ካብቶም ኣብ ታሕቲ ዘለዉ ዓውድታት ክትኣትዉ ይግባእ።

<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

ባህሪ ጃቫስክሪፕት።

መበገሲታት

ብመንገዲ ጃቫስክሪፕት ንሓደ መጠንቀቕታ ምብራር ኣንቅሕ፤

$('.alert').alert()

ወይ ድማ ምስ dataባህርያት ኣብ ሓደ መጠወቒ ኣብ ውሽጢ እቲ መጠንቀቕታ ፣ ከምቲ ኣብ ላዕሊ ዝተገልጸ፤

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

ሓደ መጠንቀቕታ ምዕጻው ካብ DOM ከም ዘውጽኦ ኣስተውዕል።

ኣገባባት

ሜላ	መግለፂ
`$().alert()`	ሓደ መጠንቀቕታ ኣብ ልዕሊ ዘርኢ ባእታታት ንዝፍጠሩ ናይ ጠውቂ ፍጻመታት ክሰምዕ ይገብሮ እቶም `data-dismiss="alert"`ባህሪ ዘለዎም። (ናይ ዳታ-ኣፒ ኣውቶ-ኢኒሽያላይዜሽን ኣብ እትጥቀመሉ እዋን ኣድላዪ ኣይኮነን።)
`$().alert('close')`	ንሓደ መጠንቀቕታ ካብ DOM ብምእላይ ይዓጽዎ። ኣብቲ ባእታ እቶም `.fade`and `.show`ክፍልታት እንተሃልዮም፡ እቲ መጠንቀቕታ ቅድሚ ምእላዩ ክሃስስ እዩ።
`$().alert('dispose')`	ናይ ሓደ ባእታ ንቕሓት የጥፍእ።

$('.alert').alert('close')

ፍጻሜታት

ናይ Bootstrap ናይ መጠንቀቕታ ፕላግ-ኢን ናብ ናይ መጠንቀቕታ ተግባር ንምትእስሳር ውሑዳት ፍጻመታት የቃልዕ።

ዝግጅት	መግለፂ
`close.bs.alert`	`close`እዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
`closed.bs.alert`	እዚ ፍጻመ እዚ እቲ መጠንቀቕታ ምስ ተዓጽወ እዩ ዝትኮስ (መሰጋገሪታት CSS ክሳብ ዝዛዘሙ ክጽበ እዩ)።

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})