သတိပေးချက်များ
ရရှိနိုင်သောနှင့် ပြောင်းလွယ်ပြင်လွယ်ရှိသော သတိပေးချက်လက်တစ်ဆုပ်စာဖြင့် ပုံမှန်အသုံးပြုသူလုပ်ဆောင်ချက်များအတွက် ဆက်စပ်တုံ့ပြန်ချက်မက်ဆေ့ချ်များ ပေးပါ။
ဥပမာများ
သတိပေးချက်များသည် မည်သည့်စာသား၏အရှည်အတွက်မဆို ရနိုင်သည့်အပြင် စိတ်ကြိုက်ပယ်ရန် ခလုတ်တစ်ခုရှိသည်။ သင့်လျော်သောပုံစံအတွက်၊ လိုအပ်သော ဆက်စပ်မှုဆိုင်ရာအတန်း ရှစ်ခုထဲမှတစ်ခု (ဥပမာ၊ .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">×</span>
</button>
</div>
JavaScript အပြုအမူ
အစပျိုးသည်။
JavaScript မှတစ်ဆင့် သတိပေးချက်ကို ထုတ်ပယ်ခြင်းကို ဖွင့်ပါ-
$('.alert').alert()
သို့မဟုတ် အထက်တွင်ပြသထားသည့်အတိုင်း သတိပေးချက်အတွင်းdata
ခလုတ်တစ်ခုပေါ်ရှိ ရည်ညွှန်းချက်များဖြင့် -
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</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...
})