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

0 دیدگاه

این بخش به بررسی کامپوننت Toast در بوت استرپ می‌پردازد. توست‌ها پیام‌هایی هشدارگونه هستند که سبک، قابل تنظیم و بسیار کاربردی‌اند. این کامپوننت ابزاری مناسب برای نمایش اعلان‌های واکنش گرا و بدون مزاحمت به کاربران است.

در بوت استرپ، از Toast برای نمایش اعلان‌هایی استفاده می‌شود که جلوی کار کاربر را نمی‌گیرند و معمولاً در بخش بالایی یا پایینی صفحه ظاهر می‌شوند.
توست‌ها می‌توانند واکنش‌هایی به عملیات انجام‌شده توسط کاربر نشان دهند یا او را از وقوع رویدادهای خاص مطلع کنند، بدون آنکه روند فعلی فعالیت او را مختل کنند.
محتوای Toast ها می‌تواند شامل متن، تصویر یا هر نوع محتوای HTML دیگر باشد. همچنین این پیام‌ها قابلیت سفارشی سازی دارند تا با طراحی کلی سایت یا اپلیکیشن هماهنگ شوند.
کاربر می‌تواند این پیام‌ها را ببندد، یا تنظیمات آن‌ها به گونه‌ای باشد که پس از مدت زمان مشخصی به صورت خودکار ناپدید شوند.
به دلیل ملاحظات مربوط به بهینه سازی عملکرد، توست‌ها به صورت پیش‌فرض غیرفعال هستند و شما باید آن‌ها را به صورت دستی راه‌اندازی کنید.
در صورتی که مقدار autohide: false را مشخص نکنید، توست‌ها به طور خودکار پنهان خواهند شد.
افکت‌های انیمیشنی Toast به تنظیمات رسانه‌ای کاربر و مقدار ویژگی prefers-reduced-motion بستگی دارد.
توصیه می‌شود برای افزایش قابلیت توسعه و انسجام بیشتر، در هر Toast یک بخش عنوان (header) و یک بخش محتوا (body) اضافه شود.
برای نمایش یک Toast، تنها به یک عنصر نیاز دارید که محتوای توست را در خود جای دهد و حتماً باید دکمه‌ای برای بستن آن در نظر گرفته شود.

توست ساده در بوت استرپ

برای ایجاد یک توست ساده، باید از کلاس .toast استفاده کنید. درون این عنصر، یک بخش با کلاس .toast-header برای عنوان و بخشی با کلاس .toast-body برای محتوای اصلی قرار می‌گیرد.

در ادامه، یک مثال از توست ساده را بررسی می‌کنیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h3>Toast Example</h3>
      <p>A toast is like an alert box that is shown.</p>
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
          <small>A toast without an event</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          Toast is shown without any event like on a click of a button.
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap Example</title>

</head>

<body>

<h3>Toast Example</h3>

<p>A toast is like an alert box that is shown.</p>

<small>A toast without an event</small>

</div>

Toast is shown without any event like on a click of a button.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

در نسخه‌های گذشته بوت استرپ، کلاس .hide به صورت خودکار به توست اضافه می‌شد تا با استفاده از display: none آن را کاملاً پنهان کند، نه از طریق opacity: 0. اما در نسخه‌های جدیدتر دیگر نیازی به این کار نیست و این مرحله حذف شده است.

کوئری جاوا اسکریپت زیر برای فعال‌سازی و نمایش یک توست (Toast) استفاده می‌شود:

    const toastTrigger = document.getElementById('liveToastBtn')
    const toastLiveExample = document.getElementById('liveToast')

    if (toastTrigger) {
      const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
      toastTrigger.addEventListener('click', () => {
        toastBootstrap.show()
      })
    }

const toastTrigger = document.getElementById('liveToastBtn')

const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {

const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)

toastTrigger.addEventListener('click', () => {

toastBootstrap.show()

})

}

یا

    $(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});

$(document).ready(function() {

$('#liveToast').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

لینک زیر را در فایل HTML خود قرار دهید تا کتابخانه jQuery بارگذاری شود:

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Live Toast در بوت استرپ

در زیر نمونه‌ای از Live Toast که می‌توانید در صفحه خود مشاهده کنید، آورده شده است:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class="container mx-auto mt-2">
	<h4>View Live toast</h4>
	<button type="button" class="btn btn-success" id="liveToast">View toast live</button>
    <div class="toast-container position-fixed bottom-0 end-0 p-4">
        <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Live Toast</strong>
        <small>Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a live toast and placed at the bottom of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#liveToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>View Live toast</h4>

<button type="button" class="btn btn-success" id="liveToast">View toast live</button>

<strong class="me-auto">Live Toast</strong>

</div>

This is a live toast and placed at the bottom of the page.

</div>

$(document).ready(function() {

$('#liveToast').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

توست نیمه شفاف در بوت استرپ

توست‌ها تا حدی نیمه‌شفاف هستند و با صفحه‌ای که در آن ظاهر می‌شوند ترکیب می‌شوند.

بیایید یک مثال را ببینیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Translucent toast</h4>
	<button type="button" class="btn btn-success" id="viewToast">Click for toast</button>
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Translucent Toast</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
            This is a translucent toast and placed at the top of the page.
        </div>
        </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Translucent toast</h4>

<button type="button" class="btn btn-success" id="viewToast">Click for toast</button>

<strong class="me-auto">Translucent Toast</strong>

<small class="text-body-secondary">First toast</small>

</div>

This is a translucent toast and placed at the top of the page.

</div>

$(document).ready(function() {

$('#viewToast').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

چیدمان توست ها

توست ها را می‌توان با قرار دادن آن‌ها درون یک کانتینر توست (toast container) روی هم چید. هنگام چیدمان، فضای عمودی بین توست ها اضافه می‌شود.

بیایید یک مثال را ببینیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Stacking of toasts</h4>
	<button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button>
    <!-- First Toast -->
    <div class="toast-container position-top top-0">
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header">
        <strong class="me-auto">Toast 1</strong>
        <small class="text-body-secondary">First toast</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body text-bg-warning">
            This is toast 1 and is placed at the top of the page.
        </div>
        </div>
        <!-- Second Toast -->
        <div id="viewToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
          <strong class="me-auto">Toast 2</strong>
          <small class="text-body-secondary">Second toast</small>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body text-bg-info">
              This is toast 2 and is placed below toast 1.
          </div>
          </div>
    </div>
	<script>
		$(document).ready(function() {
			$('#viewToast').click(function() {
				$('.toast').toast({
					animation: false,
					delay: 3000
				});
				$('.toast').toast('show');
			});
		});
	</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Stacking of toasts</h4>

<button type="button" class="btn btn-success" id="viewToast">View stacked toasts</button>

<strong class="me-auto">Toast 1</strong>

<small class="text-body-secondary">First toast</small>

</div>

This is toast 1 and is placed at the top of the page.

</div>

<strong class="me-auto">Toast 2</strong>

<small class="text-body-secondary">Second toast</small>

</div>

This is toast 2 and is placed below toast 1.

</div>

$(document).ready(function() {

$('#viewToast').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

محتوای سفارشی Toast

توست‌ها را می‌توان با حذف زیرکامپوننت‌ها، اضافه کردن ابزارهای کمکی (utilities) یا حتی استفاده از کد HTML دلخواه، سفارشی‌سازی کرد.
می‌توانید یک آیکون سفارشی از مجموعه آیکون‌های Bootstrap اضافه کنید یا بخش .toast-header را حذف کرده، دکمه‌هایی به محتوای توست اضافه نمایید و غیره.

بیایید مثالی از سفارشی‌سازی توست ببینیم که در آن دو دکمه به بخش بدنه توست اضافه شده است:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Customization of toasts</h4>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">View customized toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-secondary-subtle">
          <strong>Thanks</strong>
        </div>
        <div class="toast-body text-bg-secondary">Buttons are added to the toast.</div>
        <button type="button" class="btn btn-success btn-sm">Submit</button>
        <button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Customization of toasts</h4>

<button type="button" class="btn btn-primary" id="myBtn">View customized toast</button>

<strong>Thanks</strong>

</div>

<div class="toast-body text-bg-secondary">Buttons are added to the toast.</div>

<button type="button" class="btn btn-success btn-sm">Submit</button>

<button type="button" class="btn btn-danger btn-sm" data-bs-dismiss="toast" aria-label="Close">Cancel</button>

</div>

$(document).ready(function() {

$('#myBtn').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

طرح رنگی Toast در بوت استرپ

با استفاده از کلاس‌های رنگ و ابزارهای پس‌زمینه (background utilities)، می‌توان طرح‌های رنگی مختلفی برای توست ایجاد کرد.

بیایید مثالی از افزودن طرح رنگی به یک توست را ببینیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Color scheme</h4>
    <p>Color scheme added to the toast</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div class="toast-container">
      <div class="toast">
        <div class="toast-header bg-warning-subtle">
          <strong>Toast Header</strong>
        </div>
        <div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div>
    </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Color scheme</h4>

<p>Color scheme added to the toast</p>

<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>

<strong>Toast Header</strong>

</div>

<div class="toast-body text-bg-success">Color scheme is added to the header and body of the toast.</div>

</div>

$(document).ready(function() {

$('#myBtn').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

موقعیت‌دهی به Toast در بوت استرپ

قابلیت موقعیت‌دهی Toast برای تعیین محل نمایش Toast در صفحه وب استفاده می‌شود. گزینه‌های زیر برای تعیین محل قرارگیری توست‌ها در دسترس هستند و در آموزش طراحی سایت با بوت استرپ نیز به‌عنوان یکی از ابزارهای پایه جای‌گذاری عناصر مورد استفاده قرار می‌گیرند:

.position-absolute – این کلاس برای موقعیت‌دهی عنصر نسبت به نزدیک‌ترین والد دارای موقعیت‌دهی (positioned ancestor) به کار می‌رود.
.top-* – موقعیت Toast از بالا را مشخص می‌کند.
.bottom-* – موقعیت Toast از پایین را مشخص می‌کند.
.start-* – موقعیت Toast از ابتدای محور افقی (سمت راست یا چپ بسته به زبان) را تنظیم می‌کند.
.end-* – موقعیت Toast از انتهای محور افقی را مشخص می‌کند.

مقادیر قابل استفاده در این کلاس‌های موقعیت‌دهی بین ۰ تا ۵۰ هستند.

بیایید مثالی از استفاده از کلاس‌های موقعیت‌دهی را ببینیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Placement - Toasts</h4>
    <p>Set the position of the toasts on webpage</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
     <!--Top left -->
    <div class="toast-container top-0 start-0">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">Toast top left </small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top left.
            </div>
        </div>
    </div>
     <!--Top center-->
    <div class="toast-container top-0 start-50 translate-middle-x">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 2</strong>
              <small class="text-body-secondary">Toast at top center</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Center.
            </div>
        </div>
    </div>
     <!--Top right -->
    <div class="toast-container top-0 end-0"> 
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 3</strong>
              <small class="text-body-secondary">Toast at top right</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                Position at Top Right.
            </div>
        </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Toast at middle left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle left.
          </div>
      </div>
    </div>
    <!--Middle left-->
    <div class="toast-container top-50 start-50 translate-middle"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 5</strong>
            <small class="text-body-secondary">Toast at middle center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle center.
          </div>
      </div>
    </div>
    <!--Middle right-->
    <div class="toast-container top-50 end-0 translate-middle-y"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 6</strong>
            <small class="text-body-secondary">Toast at middle right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at middle right.
          </div>
      </div>
    </div>
    <!--Bottom left-->
    <div class="toast-container bottom-0 start-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 7</strong>
            <small class="text-body-secondary">Toast at bottom left</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom left.
          </div>
      </div>
    </div>
    <!--Bottom center-->
    <div class="toast-container bottom-0 start-50 translate-middle-x"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 8</strong>
            <small class="text-body-secondary">Toast at bottom center</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom center.
          </div>
      </div>
    </div>
    <!--Bottom right-->
    <div class="toast-container bottom-0 end-0"> 
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 9</strong>
            <small class="text-body-secondary">Toast at bottom right</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Position at bottom right.
          </div>
      </div>
    </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Placement - Toasts</h4>

<p>Set the position of the toasts on webpage</p>

<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>

<strong class="me-auto">Toast 1</strong>

<small class="text-body-secondary">Toast top left </small>

</div>

Position at Top left.

</div>

<strong class="me-auto">Toast 2</strong>

<small class="text-body-secondary">Toast at top center</small>

</div>

Position at Top Center.

</div>

<strong class="me-auto">Toast 3</strong>

<small class="text-body-secondary">Toast at top right</small>

</div>

Position at Top Right.

</div>

<strong class="me-auto">Toast 4</strong>

<small class="text-body-secondary">Toast at middle left</small>

</div>

Position at middle left.

</div>

<strong class="me-auto">Toast 5</strong>

<small class="text-body-secondary">Toast at middle center</small>

</div>

Position at middle center.

</div>

<strong class="me-auto">Toast 6</strong>

<small class="text-body-secondary">Toast at middle right</small>

</div>

Position at middle right.

</div>

<strong class="me-auto">Toast 7</strong>

<small class="text-body-secondary">Toast at bottom left</small>

</div>

Position at bottom left.

</div>

<strong class="me-auto">Toast 8</strong>

<small class="text-body-secondary">Toast at bottom center</small>

</div>

Position at bottom center.

</div>

<strong class="me-auto">Toast 9</strong>

<small class="text-body-secondary">Toast at bottom right</small>

</div>

Position at bottom right.

</div>

$(document).ready(function() {

$('#myBtn').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

هنگام کار با سیستم‌هایی که اعلان‌های زیادی را یکی پس از دیگری تولید می‌کنند، می‌توانید از یک عنصر والد برای چیدمان این اعلان‌ها به صورت پشته‌ای استفاده کنید. به مثال زیر مراجعه کنید:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts p-0">
    <div aria-live="polite" aria-atomic="true" class="position-relative">

      <div class="toast-container top-0 start-0 p-3">
    
        <!-- Toasts within the container -->
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 1</strong>
            <small class="text-body-secondary">Toast on top</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Toast at the top of the container.
          </div>
        </div>
    
        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Second toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 3</strong>
            <small class="text-body-secondary">Third toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Another toast in the stack.
          </div>
        </div>

        <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
          <div class="toast-header">
            <strong class="me-auto">Toast 4</strong>
            <small class="text-body-secondary">Last toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
            Fourth toast at the bottom of the stack.
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<strong class="me-auto">Toast 1</strong>

<small class="text-body-secondary">Toast on top</small>

</div>

Toast at the top of the container.

</div>

<strong class="me-auto">Toast 2</strong>

<small class="text-body-secondary">Second toast</small>

</div>

Second toast in the stack.

</div>

<strong class="me-auto">Toast 3</strong>

<small class="text-body-secondary">Third toast</small>

</div>

Another toast in the stack.

</div>

<strong class="me-auto">Toast 4</strong>

<small class="text-body-secondary">Last toast</small>

</div>

Fourth toast at the bottom of the stack.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

برای تراز کردن Toast ها به صورت افقی و/یا عمودی، از ابزارهای فلکس باکس (flexbox utilities) استفاده کنید. بیایید یک مثال را ببینیم:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bootstrap - Toasts</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  </head>
  <body class="p-3 m-0 border-0 bd-example m-0 border-0 bd-example-toasts d-flex">
    <!-- Adding a flexbox container for alignment of the toasts -->
    <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">
    
      <!-- Then put toasts within the flexbox container-->
      <div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true">
        <div class="toast-header bg-danger-subtle">
          <strong class="me-auto">Toast within flexbox</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
        </div>
        <div class="toast-body">
          This is a toast that is placed within a flexbox container and justified center.
        </div>
      </div>
    </div>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<strong class="me-auto">Toast within flexbox</strong>

</div>

This is a toast that is placed within a flexbox container and justified center.

</div>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

دسترس پذیری Toast در بوت استرپ

برای اینکه Toast ها برای کاربرانی که از صفحه‌خوان‌ها یا فناوری‌های کمکی مشابه استفاده می‌کنند قابل دسترسی باشند، باید آن‌ها را درون یک ناحیه دارای ویژگی aria-live قرار دهید.

تغییراتی که در نواحی زنده (live regions) ایجاد می‌شود، به صورت خودکار توسط صفحه‌خوان‌ها شناسایی می‌گردد، بدون اینکه نیاز باشد تمرکز (focus) کاربر تغییر کند.

برای اینکه کل توست به عنوان یک واحد مستقل و یکپارچه شناسایی شود، باید ویژگی aria-atomic="true" را اضافه کنید.
زمانی که اطلاعات نمایش داده‌شده برای کاربر اهمیت زیادی دارد، بهتر است به جای توست از کامپوننت‌های هشدار (alert) استفاده کنید.
نکته مهم این است که ناحیه زنده باید پیش از تولید یا به‌روزرسانی Toast در کد HTML وجود داشته باشد.
با توجه به محتوای توست، باید نقش (role) و ویژگی aria-live را متناسب تنظیم کنید. برای مثال:
- در صورت بروز خطا، از این تنظیمات استفاده کنید: role=”alert” aria-live=”assertive”
- در سایر موارد، از این تنظیمات استفاده کنید: role=”status” aria-live=”polite”
همچنین باید زمان تأخیر (delay timeout) توست را طوری تنظیم کنید که کاربر فرصت کافی برای خواندن محتوای آن داشته باشد، به‌ویژه زمانی که محتوای توست به صورت پویا تغییر می‌کند.
در حالتی که از autohide: false استفاده می‌کنید، حتماً باید یک دکمه بستن (close button) در توست قرار گیرد تا کاربر بتواند آن را به صورت دستی ببندد.

بیایید یک مثال را ببینیم:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap - Toasts</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body class=" container mx-auto mt-2">
	<h4>Accessibility - Toasts</h4>
    <p>Make the toasts accessible according to the value of role and aria-live</p>
	<!-- Button to trigger the toasts -->
    <button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>
    <div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
        <div class="toast">
            <div class="toast-header">
              <strong class="me-auto">Toast 1</strong>
              <small class="text-body-secondary">First toast</small>
              <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                A toast that is like an alert.
            </div>
        </div>
    </div>
    <div role="status" aria-live="polite" aria-atomic="true" class="toast" data-bs-autohide="false">
      <div class="toast">
          <div class="toast-header">
            <strong class="me-auto">Toast 2</strong>
            <small class="text-body-secondary">Second toast</small>
            <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
          </div>
          <div class="toast-body">
              Toast where role=status and aria-live=polite.
          </div>
      </div>
  </div>
    <script>
      $(document).ready(function() {
        $('#myBtn').click(function() {
          $('.toast').toast({
            animation: false,
            delay: 3000
          });
          $('.toast').toast('show');
        });
      });
    </script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Toasts</title>

</head>

<h4>Accessibility - Toasts</h4>

<p>Make the toasts accessible according to the value of role and aria-live</p>

<button type="button" class="btn btn-primary" id="myBtn">Click for toast</button>

<strong class="me-auto">Toast 1</strong>

<small class="text-body-secondary">First toast</small>

</div>

A toast that is like an alert.

</div>

<strong class="me-auto">Toast 2</strong>

<small class="text-body-secondary">Second toast</small>

</div>

Toast where role=status and aria-live=polite.

</div>

$(document).ready(function() {

$('#myBtn').click(function() {

$('.toast').toast({

animation: false,

delay: 3000

});

$('.toast').toast('show');

});

</script>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی

انتشار: ۲۲ خرداد ۱۴۰۴

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

توست ساده در بوت استرپ

Live Toast در بوت استرپ

توست نیمه شفاف در بوت استرپ

چیدمان توست ها

محتوای سفارشی Toast

طرح رنگی Toast در بوت استرپ

موقعیت‌دهی به Toast در بوت استرپ

دسترس پذیری Toast در بوت استرپ

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط