Toast

Main Page Tutorial
موارد آموزشی
۱	خانه
۲	شروع
۳	ظرف‌ها
۴	شبکه‌بندی پایه
۵	تایپوگرافی
۶	رنگ‌ها
۷	جدول‌ها
۸	تصاویر
۹	جامبوترون
۱۰	هشدارها
۱۱	کلیدها
۱۲	گروه‌های کلید
۱۳	نشان‌ها (Badges)
۱۴	نوارهای پیشرفت
۱۵	Spinnerها
۱۶	صفحه‌بندی
۱۷	گروه‌های لیست
۱۸	کارت‌ها
۱۹	منوهای کرکره‌ای
۲۰	Collapse
۲۱	Navها
۲۲	Navbar
۲۳	فرم‌ها
۲۴	ورودی‌ها
۲۵	گروه‌های ورودی
۲۶	فرم‌های سفارشی
۲۷	Carousel
۲۸	Modal
۲۹	راهنمای ابزار
۳۰	Popover
۳۱	Toast
۳۲	Scrollspy
۳۳	امکانات
۳۴	Flex
۳۵	آیکون‌ها
۳۶	Media Objects
۳۷	فیلترها
شبکه‌بندی
Theme
مرجع

مؤلفه toast شبیه کادر هشدار (به انگلیسی: Alert Box) است که هنگامی که اتفاقی رخ دهد، تنها برای چند ثانیه نمایش داده می‌شود (مثلاً زمانی که کاربر برروی یک کلید کلیک کند، فرمی را ثبت کند و غیره)

نحوه ایجاد Toast

برای ایجاد toast از کلاس .toast استفاده کرده و .toast-header و یک .toast-body داخل آن اضافه کنید:

1 <div class="toast">
2   <div class="toast-header">
3     Toast Header
4   </div>
5   <div class="toast-body">
6     Some text inside the toast body
7   </div>
8 </div>

نکته: toastها باید با jQuery مقداردهی اولیه (به انگلیسی: Initialize) شوند: عنصر مورد نظر را انتخاب و متد toast() را فراخوانی کنید.

کد زیر همهٔ “toast”‌های سند را نشان می‌دهد:

مثال

1 <script>
2 $(document).ready(function(){
3   $('.toast').toast('show');
4 });
5 </script>

مشاهدهٔ نتیجه

آشکار و پنهان کردن Toast

بطور پیش فرض toastها پنهان هستند. از ویژگی data-autohide="false" برای نمایش آن بطور پیش فرض استفاده کنید. برای بستن آن از یک عنصر <button> استفاده کرده و data-dismiss="toast" را به آن اضافه کنید:

مثال

 1 <div class="toast" data-autohide="false">
 2   <div class="toast-header">
 3     <strong class="mr-auto text-primary">Toast Header</strong>
 4     <small class="text-muted">5 mins ago</small>
 5     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast">&times;</button>
 6   </div>
 7   <div class="toast-body">
 8     Some text inside the toast body
 9   </div>
10 </div>

مشاهدهٔ نتیجه

به کلاس‌های mr-auto, ml-2 و mb-1 دقت می‌کنید؟ آنها برای اضافه کردن حاشیه‌های مشخص به کار می‌روند.

در مورد آنها در بخش کاربردهای بوت استرپ ۴ بیشتر خواهید آموخت.

مرجع کامل Toast بوت استرپ

برای دستیابی به مرجع کامل همهٔ امکانات toast، متدها و رویدادها (به انگلیسی: Events)، به مرجع کامل Toast JS بوت استرپ ما مراجعه کنید.

صفحهٔ بعد»

«صفحهٔ قبل