آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش کار با Toast در Bootstrap 4

دوره های مرتبط با این مقاله

آموزش کار با Toast در بوت استرپ 4 :

کامپوننت Toast همانند یک کادر اخطار alert box است با این تفاوت که فقط برای چند ثانیه و در کنار المنت موردنظر نمایش داده می شود. این کامپوننت در هنگام بروز یک رویداد، مثلا کلیک کاربر بر روی یک دکمه، ارسال یک فرم و ... ظاهر و فعال می شود.

آموزش ایجاد یک Toast در بوت استرپ 4:

برای ایجاد کادر محاوره ای Toast، از یک المنت با کلاس toast، یک المنت با کلاس toast-header جهت تعیین عنوان یا هدر آن و یک المنت toast-body جهت تعیین محتوا و body آن، استفاده نمایید. همانند کد مثال عملی زیر :

                <div class="toast">
                 <div class="toast-header">
                   Toast Header
                 </div>
                 <div class="toast-body">
                   Some text inside the toast body
                 </div>
               </div>
                           
نکته :

برای اجرای صحیح، کادر toast بایستی از قبل توسط jQuery در صفحه مقداردهی اولیه شود. برای این منظور از متد toast() به صورت زیر، استفاده می شود. قطعه کد jQuery زیر را بایستی درون صفحه قرار دهید :

کد زیر برای اجرای اولیه tooltip در Bootstrap 4 توسط jQuery بایستی به صفحه اضافه شود :

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

مثال 1

 

  
Toast Header
Some text inside the toast body
امتحان کنید

آموزش ظاهر و مخفی کردن کادر Toast در بوت استرپ 4:

المنت های Toasts به صورت پیش فرض، مخفی هستند. اگر مقدار خاصیت data-antohide را بر روی faile تنظیم کنید، به صورت پیش فرض نمایش داده خواهد شد. برای بسته شدن المنت Toast نیز از یک دکمه button با خاصیت data-dismiss برابر با toast استفاده نمایید، همانند کد مثال عملی زیر :

مثال 2

Toast Header 5 mins ago
Some text inside the toast body
امتحان کنید
راهنمایی :

همانطور که در کد مثال عملی فوق مشاهده کردید، از کلاس mr-auto، ml-2 و mb-1 استفاده شده است. این کلاس ها مارجین های متفاوتی را به المنت اعمال می کنند. در بخش آموزش کلاس های کاربردی Bootstrap 4 utilities به تشریح و آموزش کامل آن ها پرداخته شده است.

مرجع کامل آموزش کادر Toast در بوت استرپ 4:

برای دریافت آموزش کامل خواص، متدها و رویدادهای کادر toast در بوت استرپ 4، به بخش مرجع آموزش کادر Toast در Bootstrap 4 در سایت تحلیل داده بروید.

  • 393
  •    252
  • تاریخ ارسال :   1398/08/09

دانلود PDF دانلود فیلم آموزشی دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
آموزش کار با Toast در Bootstrap 4
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .