Source

መጠንቀቕታታት

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

ኣብነታት

ንዝኾነ ንውሓት ጽሑፍ መጠንቀቕታታት ይርከቡ፣ ከምኡ’ውን ኣማራጺ ናይ ምብራር መጠወቒ። ንግቡእ ቅዲ፡ ሓደ ካብቶም ሸውዓተ ዘድልዩ ዓውደ-ጽሑፋዊ ክፍልታት (ንኣብነት .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 ብምእላይ ይዓጽዎ። ኣብቲ ባእታ እቶም .fadeand .showክፍልታት እንተሃልዮም፡ እቲ መጠንቀቕታ ቅድሚ ምእላዩ ክሃስስ እዩ።
$().alert('dispose') ናይ ሓደ ባእታ ንቕሓት የጥፍእ። 
$(".alert").alert('close')

ፍጻሜታት

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

ዝግጅት መግለፂ
close.bs.alert closeእዚ ፍጻመ እዚ እቲ ናይ ምሳሌ ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ ።
closed.bs.alert እዚ ፍጻመ እዚ እቲ መጠንቀቕታ ምስ ተዓጽወ እዩ ዝትኮስ (መሰጋገሪታት CSS ክሳብ ዝዛዘሙ ክጽበ እዩ)። 
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})