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>

အပိုအကြောင်းအရာ

သတိပေးချက်များတွင် ခေါင်းစီးများ၊ စာပိုဒ်များနှင့် ပိုင်းခြားချက်များကဲ့သို့သော နောက်ထပ် HTML အစိတ်အပိုင်းများလည်း ပါဝင်နိုင်သည်။

<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>

ပယ်ချခြင်း။

သတိပေးချက် JavaScript ပလပ်အင်ကို အသုံးပြု၍ မည်သည့် သတိပေးချက်ကိုမဆို ပယ်ဖျက်နိုင်သည်။ ဤတွင်နည်း။

  • သတိပေးချက်ပလပ်အင် သို့မဟုတ် စုစည်းထားသော Bootstrap JavaScript ကို သင်တင်ထားကြောင်း သေချာပါစေ။
  • အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။ စုစည်းထားသော ဗားရှင်းတွင် ၎င်းပါဝင်သည်။
  • .alert-dismissibleသတိပေးချက်၏ ညာဘက်တွင် အပို အကွက်များကို ပေါင်းထည့် ကာ .closeခလုတ်ကို နေရာချထားပေးသည့် ပယ်ရန်ခလုတ်နှင့် အတန်းကို ထည့်ပါ။
  • ပယ်ရန် ခလုတ်တွင်၊ data-dismiss="alert"JavaScript လုပ်ဆောင်နိုင်စွမ်းကို အစပျိုးပေးသည့် အရည်အချင်းကို ထည့်ပါ။ <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>

JavaScript အပြုအမူ

အစပျိုးသည်။

JavaScript မှတစ်ဆင့် သတိပေးချက်ကို ထုတ်ပယ်ခြင်းကို ဖွင့်ပါ-

$('.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')

အဲ့ဒါနဲ့

Bootstrap ၏သတိပေးချက်ပလပ်အင်သည် သတိပေးချက်လုပ်ဆောင်နိုင်စွမ်းသို့ချိတ်ဆက်ရန်အတွက် အချို့သောဖြစ်ရပ်များကို ဖော်ထုတ်ပေးပါသည်။

ပွဲ ဖော်ပြချက်
close.bs.alert closeသာဓကနည်းလမ်းကို ခေါ်သော အခါတွင် ဤဖြစ်ရပ်သည် ချက်ခြင်း မီးလောင် ပါသည်။
closed.bs.alert သတိပေးချက်ကို ပိတ်လိုက်သောအခါတွင် ဤဖြစ်ရပ်ကို အလုပ်ဖြုတ်လိုက်သည် (CSS အသွင်ကူးပြောင်းမှုများကို အပြီးသတ်ရန် စောင့်ပါမည်)။
$('#myAlert').on('closed.bs.alert', function () {
  // do something…
})