اعلانها
توست پیشفرض
عنوان
سلام دنیا! این یک پیام toast است.
توست محتوای سفارشی
سلام دنیا! این یک پیام toast است.
طرح های رنگی
سلام دنیا! این یک پیام toast است.
سلام دنیا! این یک پیام toast است.
<div class="card">
<div class="card-header">
<h5>Toast های بوتاسترپ</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-4">
<h6 class="mb-3">توست پیشفرض</h6>
<div class="toast d-block border-primary border-opacity-25 bg-light-primary" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="toast-header border-primary border-opacity-25 bg-light-primary">
<img src="../assets/images/logo/03.png"
class="rounded me-2 h-30 w-30 b-r-4 " alt="">
<strong class="me-auto">Ra-admin</strong>
<small>11 mins ago</small>
<div class="bg-primary pt-1 ms-2 b-r-8">
<button type="button" class="btn-close m-0 p-2 pt-0 mb-1" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<div class="toast-body border-primary border-opacity-25">
سلام دنیا! این یک پیام toast است.
</div>
</div>
</div>
<div class="col-md-4">
<h6 class="mb-3">توست محتوای سفارشی</h6>
<div class="toast d-block" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
سلام دنیا! این یک پیام toast است.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary ">اقدام کنید</button>
<button type="button" class="btn btn-secondary " data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<h6 class="mb-3">طرح های رنگی</h6>
<div class="toast d-block align-items-center bg-primary border-0 mb-3" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
سلام دنیا! این یک پیام toast است.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
<div class="toast d-block align-items-center bg-secondary border-0" role="alert"
aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
سلام دنیا! این یک پیام toast است.
</div>
<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"
aria-label="Close"></button>
</div>
</div>
</div>
</div>
</div>
</div>
سربرگ
مقداری متن درون بدنهی toast
<div class="card">
<div class="card-header">
<h5>Placement Toasts</h5>
</div>
<div class="card-body">
<button type="button" class="btn btn-light-primary" id="toastbtn">نمایش Toast</button>
<div class="toast toastbtn mt-3 bg-light-primary border-primary border-opacity-25 b-r-4">
<div class="toast-header bg-light-primary border-primary border-opacity-25">
<strong class="me-auto">Toast Header</strong>
<div class="bg-primary d-flex-center b-r-8">
<button type="button" class="btn-close m-0 p-2" data-bs-dismiss="toast"></button>
</div>
</div>
<div class="toast-body">
<p>Some text inside the toast body</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>اعلان موقعیت
</h5>
<p>سفارشیسازی آن بسیار آسان است و در اپلیکیشن وبسایت استفاده میشود..</p>
</div>
<div class="card-body">
<div class="app-toast-button d-flex flex-wrap gap-2">
<button class="btn btn-light-primary toast_top" id="new-toast">Top</button>
<button class="btn btn-light-secondary toast_center" id="center-toast">Center</button>
<button class="btn btn-light-success toast_left" id="left-toast">Left</button>
<button class="btn btn-light-info" id="right-toast">Right</button>
<button class="btn btn-light-warning" id="bottom-toast">Bottom</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h5>اعلان موقعیت
</h5>
<p>سفارشیسازی آن بسیار آسان است و در اپلیکیشن وبسایت استفاده میشود..</p>
</div>
<div class="card-body">
<div class="app-toast-button">
<div class="d-flex gap-2 flex-wrap">
<button id="app-toast-primary" class="btn btn-light-primary toast-primary"
onclick="handleToast(this)">Primary</button>
<button id="app-toast-secondary" class="btn btn-light-secondary toast-secondary"
onclick="handleToast(this)">Secondary</button>
<button id="app-toast-success" class="btn btn-light-success toast-success"
onclick="handleToast(this)">Success</button>
<button id="app-toast-danger" class="btn btn-light-danger toast-danger"
onclick="handleToast(this)">Danger</button>
<button id="app-toast-warning" class="btn btn-light-warning toast-warning"
onclick="handleToast(this)">Warning</button>
<button id="app-toast-info" class="btn btn-light-info toast-info"
onclick="handleToast(this)">Info</button>
<button id="app-toast-light" class="btn btn-light-light toast-light"
onclick="handleToast(this)">Light</button>
<button id="app-toast-dark" class="btn btn-light-dark toast-dark"
onclick="handleToast(this)">Dark</button>
</div>
<div class="app-color-toast app-toast-primary d-none">
<div class="toast-item">
<div class="toast-title text-primary">
<i class="ti ti-download f-s-22"></i> این یک پیام Primary است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-primary"></i></div>
</div>
<div class="app-color-toast app-toast-secondary d-none">
<div class="toast-item">
<div class="toast-icon text-secondary"></div>
<div class="toast-title text-secondary">
<i class="ti ti-butterfly f-s-22"></i>این یک پیام Secondary است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-secondary"></i></div>
</div>
<div class="app-color-toast app-toast-success d-none">
<div class="toast-item">
<div class="toast-icon text-success"></div>
<div class="toast-title text-success">
<i class="ti ti-award f-s-22"></i> این یک پیام success است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-success"></i></div>
</div>
<div class="app-color-toast app-toast-danger d-none">
<div class="toast-item">
<div class="toast-title text-danger">
<i class="ti ti-power f-s-22"></i> این یک پیام Danger است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-danger"></i></div>
</div>
<div class="app-color-toast app-toast-warning d-none">
<div class="toast-item">
<div class="toast-title text-warning">
<i class="ti ti-alert-triangle f-s-22"></i> این یک پیام Warning است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-warning"></i></div>
</div>
<div class="app-color-toast app-toast-info d-none">
<div class="toast-item">
<div class="toast-title text-info">
<i class="ti ti-inbox f-s-22"></i> این یک پیام Info است.</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-info"></i></div>
</div>
<div class="app-color-toast app-toast-light d-none">
<div class="toast-item">
<div class="toast-title text-dark"> <i class="ti ti-download f-s-22"></i> این یک پیام Light است.</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-dark"></i></div>
</div>
<div class="app-color-toast app-toast-dark d-none">
<div class="toast-item">
<div class="toast-title text-dark">
<i class="ti ti-world-download f-s-22"></i> این یک پیام Dark است.
</div>
<div class="toast-line"></div>
</div>
<div class="toast-close"><i class="fa fa-close text-dark"></i></div>
</div>
</div>
</div>
</div>