Toast Notifications Bootstrap 4 / Информация / Сниппеты Bootstrap

Версия: v4.2.1

Каталог: Сниппеты Bootstrap

Категория: Информация

Для Bootstrap: 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Русский

Вес файла: 1.5 Kb

Уникальный ID: 3235

Количество символов:

Посмотрели: 3861 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-3235-20

Скачали бесплатно: 44 раз

Прокомментировали: 0 раз

Рейтинг: 4.3 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: //goo.gl/pwuHJ5

Информация: Пользователям

Информация: Правообладателям

Теги: Уведомления, Notifications, bootstrap 4, Toast, alert, class=toast

Поделился: BootstrapТема

Добавлено: 2018-12-28 в 20:46

Метка: 1546019215

⇄ ⇅

<div class="toast ml-auto w-25" role="alert" data-delay="700" data-autohide="false">
 <div class="toast-header">
 <strong class="mr-auto text-primary">Toast</strong>
 <small class="text-muted">3 mins ago</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">
 Hey, there! This is a Bootstrap 4 toast.
 </div>
 </div>

<div class="toast ml-auto w-25" role="alert" data-delay="700" data-autohide="false">
 <div class="toast-header">
 <strong class="mr-auto text-primary">More Toast</strong>
 <small class="text-muted">8 mins ago</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">
 Hey, there! This is a Bootstrap 4 toast message. This is not Avacado Toast.
 </div>
 </div>

</div>

<h1 class="font-weight-light text-center">
 Toast Notifications Bootstrap 4
 </h1>

<h3>Опции: Анимация, Задержка и Автоскрытие</h3>
 
<p>У Bootstrap Toast есть несколько простых опций. Параметр логической анимации по умолчанию имеет значение true и обеспечивает базовый переход замирания. Параметр задержки контролирует задержку в мс перед скрытием тоста, которая по умолчанию составляет 500 мс.</p>
 
<p>По умолчанию параметр автоматического скрытия имеет значение true. Вы должны установить autohide: false, чтобы программно вызвать метод «hide» в Toast. При использовании autohide: false вы должны добавить кнопку закрытия, чтобы пользователи могли его закрыть.</p>

<h4>Инициализировать с помощью jQuery</h4>

<pre><code>
$('.toast').toast();
</code></pre>

<p>Как и все другие компоненты Bootstrap 4, параметры можно передавать через jQuery или как атрибуты данных для элемента Toast в HTML.</p>

<h4>Используйте jQuery</h4>

<pre><code>
$('.toast').toast({delay:1000, animation:false});
</code></pre>

<h4>Используйте атрибуты данных</h4>

<pre><code>
&lt;div class="toast" data-delay="1000" data-autohide="false"&gt;&lt;/div&gt;
</code></pre>

<p>Кроме того, Bootstrap 4 Toasts следуют <a href="//getbootstrap.com/docs/4.2/components/toasts/#accessibility" target="_blank">стандартам доступности</a>, о которых вы можете прочитать больше для использования в программах чтения с экрана и вспомогательных технологиях.</p>
</div>

BootstrapTema

Toast Notifications Bootstrap 4

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0