ترجمه به فارسی:
۱۱ دقیقه پیش
اکنون
۲ ثانیه پیش
مثالهای پایه#
پیامهای توست به اندازهای که نیاز دارید انعطافپذیر هستند و فقط به حداقل علامتگذاری نیاز دارند. حداقل، ما به یک عنصر برای نگه داشتن محتوای «توستشده» شما نیاز داریم و به شدت توصیه میکنیم که یک دکمه بستن نیز وجود داشته باشد.
۱۱ دقیقه پیش
سلام، دنیا! این یک پیام توست است.
<!-- توست پایه -->
<div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"
data-bs-toggle="toast">
<div class="toast-header d-block">
<div class="float-end">
<small>۱۱ دقیقه پیش</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast"
aria-label="بستن"></button>
</div>
<div class="auth-logo">
<img class="logo-dark" src="/images/logo-dark.png"
alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png"
alt="logo-light" height="18" />
</div>
</div>
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
</div>
مثال زنده#
برای نشان دادن یک توست (که با استفاده از امکانات ما در گوشه پایین راست قرار دارد) دکمه زیر را کلیک کنید که به طور پیشفرض مخفی شده است.
سلام، دنیا! این یک پیام توست است.
<button type="button" class="btn btn-primary" id="liveToastDefaultBtn">نمایش توست زنده</button>
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToastDefault" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="auth-logo me-auto">
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
</div>
<small>۱۱ دقیقه پیش</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
</div>
</div>
دکمههای پیشفرض#
پیامهای توست به اندازهای که نیاز دارید انعطافپذیر هستند و فقط به حداقل علامتگذاری نیاز دارند. حداقل، ما به یک عنصر برای نگه داشتن محتوای «توستشده» شما نیاز داریم و به شدت توصیه میکنیم که یک دکمه بستن نیز وجود داشته باشد.
ببینید؟ درست مثل این.
توجه کنید، توستها به طور خودکار روی هم میچینند.
<button type="button" class="btn btn-primary" id="liveToastBtn">نمایش توست زنده</button>
<button type="button" class="btn btn-primary" id="liveToastBtn2">نمایش توست زنده</button>
<div class="toast-container position-fixed end-0 top-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="auth-logo me-auto">
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
</div>
<small class="text-muted">اکنون</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
<div class="toast-body">
ببینید؟ درست مثل این.
</div>
</div>
<div id="liveToast2" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="auth-logo me-auto">
<img class="logo-dark" src="/images/logo-dark.png" alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
</div>
<small class="text-muted">۲ ثانیه پیش</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
<div class="toast-body">
توجه کنید، توستها به طور خودکار روی هم میچینند.
</div>
</div>
</div>
محتوای سفارشی#
به طور جایگزین، میتوانید کنترلها و اجزای اضافی را به توستها اضافه کنید.
سلام، دنیا! این یک پیام توست است.
سلام، دنیا! این یک پیام توست است.
سلام، دنیا! این یک پیام توست است.
سلام، دنیا! این یک پیام توست است.
<div class="toast fade align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
</div>
<div class="toast fade align-items-center text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
</div>
<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm me-1">اقدام کنید</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">بستن</button>
</div>
</div>
</div>
<div class="toast fade text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-light btn-sm me-1">اقدام کنید</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">بستن</button>
<div>
</div>
</div>
نیمه شفاف#
توستها کمی نیمه شفاف هستند و بنابراین بر روی هر چیزی که ممکن است بر روی آن ظاهر شوند، ترکیب میشوند. برای مرورگرهایی که ویژگی CSS فیلتر پسزمینه (backdrop-filter) را پشتیبانی میکنند، ما همچنین سعی خواهیم کرد که عناصر زیر یک توست را محو کنیم.
۱۱ دقیقه پیش
سلام، دنیا! این یک پیام توست است.
<div class="toast fade" role="alert" aria-live="assertive" aria-atomic="true" data-bs-toggle="toast">
<div class="toast-header d-block">
<div class="float-end">
<small>۱۱ دقیقه پیش</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
<div class="auth-logo">
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
</div>
</div>
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
</div>
قرارگیری#
توستها را با CSS سفارشی در هر جا که نیاز دارید قرار دهید. گوشه بالا راست معمولاً برای اعلانها استفاده میشود،
همچنین گوشه بالا وسط. اگر فقط میخواهید یک توست را در یک زمان نشان دهید، موقعیتدهی را درست به .toast. اعمال کنید.
۱۱ دقیقه پیش
سلام، دنیا! این یک پیام توست است.
<form>
<div class="mb-3">
<label for="selectToastPlacement" class="form-label">قرارگیری توست</label>
<select class="form-select mt-2" data-choices id="selectToastPlacement">
<option value="" selected>یک موقعیت انتخاب کنید...</option>
<option value="top-0 start-0">بالا چپ (<code class="text-danger">.top-0 .start-0</code>)</option>
<option value="top-0 start-50 translate-middle-x">بالا وسط</option>
<option value="top-0 end-0">بالا راست</option>
<option value="top-50 start-0 translate-middle-y">وسط چپ</option>
<option value="top-50 start-50 translate-middle">وسط</option>
<option value="top-50 end-0 translate-middle-y">وسط راست</option>
<option value="bottom-0 start-0">پایین چپ</option>
<option value="bottom-0 start-50 translate-middle-x">پایین وسط</option>
<option value="bottom-0 end-0">پایین راست</option>
</select>
</div>
</form>
<div aria-live="polite" aria-atomic="true" class=" bg-light position-relative" style="min-height: 350px;">
<div class="toast-container position-absolute p-3" id="toastPlacement">
<div class="toast show mb-2">
<div class="toast-header d-block">
<div class="float-end">
<small>۱۱ دقیقه پیش</small>
<button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="بستن"></button>
</div>
<div class="auth-logo">
<img class="logo-dark me-1" src="/images/logo-dark.png" alt="logo-dark" height="18" />
<img class="logo-light" src="/images/logo-light.png" alt="logo-light" height="18" />
</div>
</div>
<div class="toast-body">
سلام، دنیا! این یک پیام توست است.
</div>
</div>
</div>
</div>