Bootstrap 4 Toast
Bootstrap 4 Toast
Toast အစိတ်အပိုင်းသည် တစ်ခုခုဖြစ်သွားသောအခါတွင် စက္ကန့်အနည်းငယ်မျှသာ ပြသထားသည့် သတိပေးဘောက်စ်တစ်ခုနှင့် တူသည် (ဆိုလိုသည်မှာ သုံးစွဲသူက ခလုတ်တစ်ခုကို နှိပ်လိုက်သည့်အခါ၊ ဖောင်တင်ခြင်း စသည်ဖြင့်)။
Toast ဖန်တီးနည်း
ပေါင်မုန့်တစ်ခုဖန်တီးရန် .toast
၊ အတန်းကိုအသုံးပြုကာ ၎င်း၏အတွင်းပိုင်းတစ်ခု .toast-header
နှင့်တစ်ခုကို
ထည့်ပါ .toast-body
-
<div class="toast">
<div class="toast-header">
Toast Header
</div>
<div class="toast-body">
Some text inside the toast body
</div>
</div>
မှတ်ချက်- Toasts များကို jQuery ဖြင့် အစပြုရပါမည် toast()
။
အောက်ပါကုဒ်သည် စာရွက်စာတမ်းရှိ "toasts" အားလုံးကို ပြသပါမည်-
ဥပမာ
<script>
$(document).ready(function(){
$('.toast').toast('show');
});
</script>
Toast တစ်ခုကို ပြသပြီး ဝှက်ပါ။
Toasts များကို မူရင်းအတိုင်း ဝှက်ထားသည်။ data-autohide="false"
၎င်းကို မူရင်းအတိုင်းပြသရန် အရည်အချင်းကို အသုံးပြု ပါ။ ၎င်းကိုပိတ်ရန်၊ <button> ဒြပ်စင်ကိုအသုံးပြုပြီး ထည့်ပါ data-dismiss="toast"
-
ဥပမာ
<div class="toast" data-autohide="false">
<div class="toast-header">
<strong class="mr-auto text-primary">Toast Header</strong>
<small class="text-muted">5 mins ago</small>
<button
type="button" class="ml-2 mb-1 close" data-dismiss="toast">×</button>
</div>
<div class="toast-body">
Some text
inside the toast body
</div>
</div>
mr-auto
၊ ml-2
နှင့် mb-1
အတန်းများကို သတိပြုမိပါသလား ။ ၎င်းတို့ကို သီးခြားအနားသတ်များထည့်ရန် အသုံးပြုသည်။ Bootstrap 4 Utilities အခန်း တွင် ၎င်းတို့အကြောင်း ပိုမိုလေ့လာနိုင်မည်ဖြစ်သည် ။
Bootstrap Toast ရည်ညွှန်းချက်ကို အပြီးသတ်ပါ။
toast ရွေးချယ်စရာများ၊ နည်းလမ်းများနှင့် အဖြစ်အပျက်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Toast Reference သို့ သွားပါ ။