ማንቂያዎች

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

ምሳሌዎች

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

ቀላል የመጀመሪያ ደረጃ ማንቂያ - ይመልከቱት!

ቀላል ሁለተኛ ደረጃ ማንቂያ - ይመልከቱት!

ቀላል የስኬት ማንቂያ - ይመልከቱት!

ቀላል የአደጋ ማንቂያ - ይመልከቱት!

ቀላል የማስጠንቀቂያ ማንቂያ - ይመልከቱት!

ቀላል የመረጃ ማንቂያ - ይመልከቱት!

ቀላል የብርሃን ማንቂያ - ይመልከቱት!

ቀላል የጨለማ ማንቂያ - ይመልከቱት!

<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ቁልፉን ያስቀምጣል።
በማሰናበት ቁልፍ 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...
})