پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
مولفه ی toast مانند جعبه ی alert است و در واقع alert box است.
که فقط در زمانی که اتفاقی رخ میدهد برای چند ثانیه نمایش داده میشود ، برای ایجاد یک toast کافیست از کلاس toast. استفاده کنید.
در بوت استرپ انواع کلاس های toast را به شما آموزش خواهیم داد.
با عرض سلام و وقت بخیر خدمت شما همراهان گرامی سایت پرنیان طرح
در این مطلب با آموزش alert) toast) همراه ما باشید.
چگونه یک toast ایجاد کنیم ؟
برای ایجاد یک alert) toast) از کلاس toast. استفاده کنید و کلاس های toast-header. و toast-body. را به آن اضافه کنید.
مثال :
[php]
<body>
<div class=”container”>
<h3>Toast Example</h3>
<p>A toast is like an alert box that is only shown for a couple of seconds when something happens (i.e. when a user clicks on a button, submits a form, etc.).</p>
<p>In this example, we use a button to show the toast message.</p>
<button type=”button” class=”btn btn-primary” id=”myBtn”>Show Toast</button>
<div class=”toast”>
<div class=”toast-header”>
Toast Header
</div>
<div class=”toast-body”>
Some text inside the toast body
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(“#myBtn”).click(function(){
$(‘.toast’).toast(‘show’);
});
});
</script>
</body>
[/php]
خروجی کدهای مثال بالا :
Show and Hide a Toast :
toast به طور پیش فرض پنهان است از ویژگی “data-autohide=”false برای نشان دادن آن به طور پیش فرض استفاده کنید.
برای بستن toast از یک المان button استفاده کنید و ویژگی “data-dismiss=”toast را به آن اضافه نمایید.
مثال :
[php]
<body>
<div class=”container”>
<h3>Toast Example</h3>
<p>In this example, we use data-autohide=”false” to show the toast by default. You can close it by clicking on the close (x) icon inside the toast header.</p>
<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>
</div>
<script>
$(document).ready(function(){
$(‘.toast’).toast(‘show’);
});
</script>
</body>
[/php]
خروجی کدهای مثال بالا :
