መጠንቀቕታታት

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

ኣብነታት

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

እዚ ቀዳማይ መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ካልኣዊ መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ናይ ዓወት መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ናይ ሓደጋ መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ናይ መጠንቀቕታ መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ናይ ሓበሬታ መጠንቀቕታ እዩ-ርእይዎ!

እዚ ቀሊል መጠንቀቕታ እዩ- ርኣይዎ!

እዚ ጸሊም መጠንቀቕታ እዩ- ርኣይዎ!

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

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

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

ሕብሪ ምትእስሳር

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

እዚ ኣብነት ዘለዎ መላግቦ ዘለዎ ቀዳማይ መጠንቀቕታ ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

እዚ ካልኣዊ መጠንቀቕታ ኮይኑ ኣብነት ዘለዎ መላግቦ ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

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

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

እዚ ኣብነት ዘለዎ መላግቦ ዘለዎ ናይ መጠንቀቕታ መጠንቀቕታ ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

እዚ ኣብነት ዘለዎ ሊንክ ዘለዎ info alert ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

እዚ ኣብነት ዘለዎ ሊንክ ዘለዎ ብርሃን መጠንቀቕታ ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

እዚ ኣብነት ዘለዎ ሊንክ ዘለዎ ጸሊም መጠንቀቕታ ’ ዩ ። እንተደሊኹም ሓደ ጠውቂ ሃቡዎ።

<div class="alert alert-primary" role="alert">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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">
  This is a 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…
})