قسمت بیست و نهم bootstrap : نحوه ی ساخت Toast در بوت استرپ 4

برای بسیاری از ما پیش آمده در یک سایتی یک باکس شبیه به آلرت باکس داشته باشیم با این تفاوت که محاسبه زمانی که از باز شدن آن می گذرد در گوشه ای از باکس وجود داشته باشد.

Toast دقیقا شبیه به آلرت باکس یا جعبه هشدار دهنده است با تفاوت ذکر شده در پاراگراف بالا.

آموزش ساخت Toast

برای ساخت یک Toast کافی است از کلاس .toast استفاده کنیم . برای تقسیم بندی قسمت های مختلف مانند کد های HTML از کلاس های .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>

نکته : به یاد داشته باشید که Toast باید با کد جی کوئری همراه باشد . برای فراخوانی کافی است تابع toast() را داخل جی کوئری استفاده کنیم .

قطعه کد زیر نمونه ای از فراخوانی کد جی کوئری را به ما نشان می دهد:

<script>
$(document).ready(function(){
  $('.toast').toast('show');
});
</script>

نمایش و عدم نمایش Toast

در صورت کلی Toast ها در حالت مخفی هستند. برای اینکه در حالت پیش فرض Toast فعال باشد کافی است از ویژگی 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">&times;</button>
  </div>
  <div class="toast-body">
    Some text inside the toast body
  </div>
</div>

پیشنهاد می شود برای درک بهتر مطالب حتما کد ها را اجرایی کنید ، برای فراگیری آموزش های بیشتر هم می توانید به سایت getbootstrap مراجعه کنید.

همچنین می توانید از قسمت های پیشین دوره رایگان بوت استرپ 4 هم استفاده کنید.