آموزش طراحی سایت- Popover و Toast در بوت استرپ 4

سلام با آموزش Bootstrap 4 از دوره آموزش طراحی سایت در خدمت شما هستیم

کامپوننت Popover بسیار شبیه کادر راهنما tooltip است که در درس قبل به آموزش آن پرداختیم. Popover یک کادر ظاهر شونده pop up است که در هنگام کلیک کاربر بر روی یک المنت، ظاهر می شود. با tooltip دو فرق عمده دارد : یکی این که با کلیک بر روی المنت فعال می شود ؟؟؟؟ عبور موس از روی آن و دوم این که می تواند حاوی محتویات بیشتری باشد.

در عکس زیر، دو نمونه کادر محاوره Popover را نشان داده ایم :

آموزش نحوه ایجاد کادر Popover در بوت استرپ 4:

برای ایجاد یک کادر Popover در بوت استرپ 4، خاصیت data-toggle=” Popover” را به المنت مورد نظر بدهید.

سپس از خاصیت title برای تعیین متن هدر (Header) کادر Popover استفاده کرده و به وسیله خاصیت data-content، متن ی که می خواهید درون بدنه (body) آن نمایش داده شود را تعیین نمایید.

مثال: در کد مثال عملی، توسط یک تگ a یک کادر محاوره ای Popover را ایجاد کرده ایم :

<a href=&quot#&quot data-toggle=&quotpopover&quot title=&quotPopover Header&quot
 data-content=&quotSome content inside the popover&quot>Toggle popover</a>

نکته :

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

مثال 1

<div class=&quotcontainer&quot>
  <h3>Popover Example</h3>
  <a href=&quot#&quot data-toggle=&quotpopover&quot title=&quotPopover Header&quot data-content=&quotSome content inside the popover&quot>Toggle popover</a>
</div>

$(document).ready(function(){
  $('[data-toggle=&quotpopover&quot]').popover();   
});

تعیین جهت باز شدن منوی محاوره ای Popover در آموزش طراحی سایت:

به صورت پیش فرض، کادر محاوره ای در سمت راست المنت باز می شود.

اما به وسیله خاصیت data-placement می توانید جهت باز شدن آن را به بالا (top)، راست (right)، زیر (buttom) و چپ (left) تغییر دهید، همانند کد مثال عملی زیر :

مثال 2

<a href=&quot#&quot title=&quotHeader&quot data-toggle=&quotpopover&quot data-placement=&quottop&quot data-content=&quotContent&quot>Click</a>
<a href=&quot#&quot title=&quotHeader&quot data-toggle=&quotpopover&quot data-placement=&quotbottom&quot data-content=&quotContent&quot>Click</a>
<a href=&quot#&quot title=&quotHeader&quot data-toggle=&quotpopover&quot data-placement=&quotleft&quot data-content=&quotContent&quot>Click</a>
<a href=&quot#&quot title=&quotHeader&quot data-toggle=&quotpopover&quot data-placement=&quotright&quot data-content=&quotContent&quot>Click</a>

نکته :

اگر فضای کافی برای باز شدن کادر Popover وجود نداشته باشد خاصیت Placement آن به درستی کار نخواهد کرد. برای مثال، اگر المنت Popover در بالاترین نقطه صفحه باشد و خاصیت placement روی مقدار بالا (top) تنظیم شده باشد، برنامه کادر را در پایین المنت و سمت راست آن (هر جایی که فضا برایش فراهم باشد)، باز خواهد کرد.

آموزش ایجاد کادر Popover با قابلیت بسته شدن :

به صورت پیش فرض، المنت Popover در هنگام کلیک مجدد بر روی آن، بسته می شود. اما می توانید با تنظیم خاصیت data-trigger آن روی مقدار focus، کاری کنید با کلیک در ناحیه ای خارج از المنت، کادر بسته شود. همانند مثال عملی زیر :

مثال 3

<a href=&quot#&quot title=&quotDismissible popover&quot data-toggle=&quotpopover&quot data-trigger=&quotfocus&quot data-content=&quotClick anywhere in the document to close this popover&quot>Click me</a>

نکته :

اگر می خواهید کادر Popover با عبور موس بر روی المنت ظاهر شود، بایستی خاصیت data-trigger آن را بر روی hover قرار دهید، همانند کد مثال عملی زیر :

مثال 4

<a href=&quot#&quot title=&quotHeader&quot data-toggle=&quotpopover&quot data-trigger=&quothover&quot data-content=&quotSome content&quot>Hover over me</a>

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

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

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

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

<div class=&quottoast&quot>
  <div class=&quottoast-header&quot>
    Toast Header
  </div>
  <div class=&quottoast-body&quot>
    Some text inside the toast body
  </div>
</div>

نکته :

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

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

$(document).ready(function(){
    $('.toast').toast('show');
  });

مثال 1

<button type=&quotbutton&quot class=&quotbtn btn-primary&quot id=&quotmyBtn&quot>Show Toast</button>
 <div class=&quottoast&quot>
   <div class=&quottoast-header&quot>
     Toast Header
   </div>
   <div class=&quottoast-body&quot>
Some text inside the toast body
   </div>
 </div>

</div>

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

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

مثال 2

<div class=&quottoast&quot data-autohide=&quotfalse&quot>
  <div class=&quottoast-header&quot>
    <strong class=&quotmr-auto text-primary&quot>Toast Header</strong>
    <small class=&quottext-muted&quot>5 mins ago</small>
    <button type=&quotbutton&quot class=&quotml-2 mb-1 close&quot data-dismiss=&quottoast&quot>×</button>
  </div>
  <div class=&quottoast-body&quot>
    Some text inside the toast body
  </div>
</div>

راهنمایی :

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

آموزش طراحی سایت ادامه دارد