نان تست بوت استرپ
اولیه
Bootstrap
همین الان
لورم ایپسوم متن ساختگی با تولید
<button id="toast-btn" class="btn btn-primary">بازکردن تست</button> <!-- Toast Element --> <div style="position: absolute; top: 0; right: 22px;left: 22px;z-index: 9999;"> <div class="toast toast-primary fade hide" role="alert" data-delay="6000" aria-live="assertive" aria-atomic="true"> <div class="toast-header"> <strong class="mr-auto">Bootstrap</strong> <small class="meta-time">just now</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="toast-body"> لورم ایپسوم متن ساختگی با تولید </div> </div> </div>
// Get the Toast button var toastButton = document.getElementById("toast-btn"); // Get the Toast element var toastElement = document.getElementsByClassName("toast")[0]; toastButton.onclick = function() { $('.toast').toast('show'); }
اسنک بار
اولیه
<button class="btn btn-primary default">Default</button> $('.default').click(function() { Snackbar.show({text: 'Example notification text.', duration: 100000}); });
بالا سمت چپ
<button class="btn btn-success top-left">Top چپ</button> $('.top-left').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-left' }); });
بالا وسط
<button class="btn btn-info top-center">بالا وسط</button> $('.top-center').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-center' }); });
بالا راست
<button class="btn btn-danger top-right">Top Right</button> $('.top-right').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'top-right' }); });
پایین چپ
<button class="btn btn-warning bottom-left">Bottom چپ</button> $('.bottom-left').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-left' }); });
پایین وسط
<button class="btn btn-secondary bottom-center">پایین وسط</button> $('.bottom-center').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-center' }); });
پایین راست
<button class="btn btn-dark bottom-right">پایین راست</button> $('.bottom-right').click(function() { Snackbar.show({ text: 'Example notification text.', pos: 'bottom-right' }); });
بدون عمل
<button class="btn btn-default no-action">بدون عمل</button> $('.no-action').click(function() { Snackbar.show({ showAction: false }); });
عمل متن
<button class="btn btn-button-2 action-text">Action Text</button> $('.action-text').click(function() { Snackbar.show({ actionText: 'Thanks!' }); });
رنگ متن
<button class="btn btn-button-3 text-color">Text Color</button> $('.text-color').click(function() { Snackbar.show({ actionTextColor: '#e2a03f', }); });
بر روی پاسخگویی کلیک کنید
<button class="btn btn-button-4 click-callback">Click Callback</button> $('.click-callback').click(function() { Snackbar.show({ text: 'Custom callback when action button is clicked.', width: 'auto', onActionClick: function(element) { //Set opacity of element to 0 to close Snackbar $(element).css('opacity', 0); Snackbar.show({ text: 'Thanks for clicking the Dismiss button!', showActionButton: false }); } }); });
مدت زمان
<button class="btn btn-button-5 duration">Duration</button> $('.duration').click(function() { Snackbar.show({ text: 'Duration set to 5s', duration: 5000, }); });
Background Color
============= اولیه ============= <button class="btn btn-primary snackbar-bg-primary">اولیه</button> $('.snackbar-bg-primary').click(function() { Snackbar.show({ text: 'Primary', actionTextColor: '#fff', backgroundColor: '#1b55e2' }); }); ============= اطلاعات ============= <button class="btn btn-info snackbar-bg-info">اطلاعات</button> $('.snackbar-bg-info').click(function() { Snackbar.show({ text: 'Info', actionTextColor: '#fff', backgroundColor: '#2196f3' }); }); ============= موفقیت ============= <button class="btn btn-success snackbar-bg-success">موفقیت</button> $('.snackbar-bg-success').click(function() { Snackbar.show({ text: 'Success', actionTextColor: '#fff', backgroundColor: '#8dbf42' }); }); ============= خطا ============= <button class="btn btn-warning snackbar-bg-warning">خطا</button> $('.snackbar-bg-warning').click(function() { Snackbar.show({ text: 'Warning', actionTextColor: '#fff', backgroundColor: '#e2a03f' }); }); ============= خطر ============= <button class="btn btn-danger snackbar-bg-danger">خطر</button> $('.snackbar-bg-danger').click(function() { Snackbar.show({ text: 'Danger', actionTextColor: '#fff', backgroundColor: '#e7515a' }); }); ============= تاریک ============= <button class="btn btn-dark snackbar-bg-dark">دارک</button> $('.snackbar-bg-dark').click(function() { Snackbar.show({ text: 'Dark', actionTextColor: '#fff', backgroundColor: '#3b3f5c' }); });
© کپی رایت
بومی سازی شده توسط : طراح سفید