ማንቂያዎች

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

ምሳሌዎች

ማንቂያዎች ለማንኛውም የጽሑፍ ርዝመት እንዲሁም እንደ አማራጭ የማሰናበት አዝራር ይገኛሉ። ለትክክለኛው የቅጥ አሰራር፣ ከስምንቱ አስፈላጊ የአውድ ክፍሎች አንዱን ተጠቀም (ለምሳሌ .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ክፍሎችን ማከልዎን ያረጋግጡ።

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

ቅዱስ guacamole! ከታች ባሉት አንዳንድ መስኮች ላይ ማረጋገጥ አለብዎት።

<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…
})