Source

ማንቂያዎች

በጣት በሚቆጠሩ እና በተለዋዋጭ የማንቂያ መልእክቶች ለተለመደ የተጠቃሚ እርምጃዎች የአውድ ግብረመልስ መልዕክቶችን ያቅርቡ።

ምሳሌዎች

ማንቂያዎች ለማንኛውም የጽሑፍ ርዝመት እንዲሁም እንደ አማራጭ የማሰናበት አዝራር ይገኛሉ። ለትክክለኛው የቅጥ አሰራር፣ ከስምንቱ አስፈላጊ የአውድ ክፍሎች አንዱን ተጠቀም (ለምሳሌ .alert-success፡)። ለውስጥ መስመር ስንብት፣ ማንቂያዎችን ይጠቀሙ jQuery plugin .

<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በማንኛውም ማንቂያ ውስጥ ተዛማጅ ቀለም ያላቸው አገናኞችን በፍጥነት ለማቅረብ የመገልገያ ክፍሉን ይጠቀሙ ።

<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ቁልፉን ያስቀምጣል።
  • በማሰናበት ቁልፍ data-dismiss="alert"ላይ የጃቫስክሪፕት ተግባርን የሚቀሰቅሰውን ባህሪ ያክሉ። <button>በሁሉም መሳሪያዎች ላይ ለትክክለኛ ባህሪ ከእሱ ጋር ያለውን ንጥረ ነገር መጠቀምዎን ያረጋግጡ ።
  • ማንቂያዎችን ሲያሰናብቱ ለማንቃት፣ ክፍሎቹን .fadeእና .showክፍሎችን ማከልዎን ያረጋግጡ።

በቀጥታ ማሳያ ይህንን በተግባር ማየት ይችላሉ፡-

<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"። (የውሂብ-api ራስ-አስጀማሪን ሲጠቀሙ አስፈላጊ አይደለም።)
$().alert('close') ማንቂያውን ከDOM በማስወገድ ይዘጋል። ክፍሎቹ .fadeእና .showክፍሎቹ በንጥሉ ላይ ካሉ፣ ከመውጣቱ በፊት ማንቂያው ይጠፋል።
$().alert('dispose') የአንድን ንጥረ ነገር ማንቂያ ያጠፋል.
$(".alert").alert('close')

ክስተቶች

የቡትስትራፕ ማንቂያ ተሰኪ ወደ ማንቂያ ተግባር ለመግባት ጥቂት ክስተቶችን ያጋልጣል።

ክስተት መግለጫ
close.bs.alert closeየምሳሌው ዘዴ ሲጠራ ይህ ክስተት ወዲያውኑ ይቃጠላል .
closed.bs.alert ይህ ክስተት የሚቀጣጠለው ማንቂያው ሲዘጋ ነው (የ CSS ሽግግሮች እስኪጠናቀቅ ድረስ ይጠብቃል)።
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})