آموزش toast در بوت استرپ (alert box)

بهاره حسنیبهاره حسنی
107 بازدید
alert box
[cdb_box_content css=”.vc_custom_1572863253221{background-color: #1e73be !important;}”]

مولفه ی toast مانند جعبه ی alert است و در واقع alert box است.

که فقط در زمانی که اتفاقی رخ میدهد برای چند ثانیه نمایش داده میشود ، برای ایجاد یک  toast کافیست از کلاس toast. استفاده کنید.

در بوت استرپ انواع کلاس های toast را به شما آموزش خواهیم داد.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما همراهان گرامی سایت پرنیان طرح

در این مطلب با آموزش 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]

خروجی کدهای مثال بالا :

عنوان toast

toast header

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”>&times;</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]

خروجی کدهای مثال بالا :

دکمه بستن toast

show & hide

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
234+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت