文章の目录

１、概述
2、示例
- 2.1、Basic
- 2.2、Live
- 2.3、Translucent
- 2.4、Stacking
3、Placement
4、Accessibility
5、JavaScript行为
- 5.1、用法
- 5.2、选项
- 5.3、方法
- - 5.3.1、$().toast(options)
  - 5.3.2、.toast('show')
  - 5.3.3、.toast('hide')
  - 5.3.4、.toast('dispose')
- 5.4、事件
写在最后

推送通知给您的访客toast，一个轻量级和易于定制的警报消息。

toast是一种轻量级通知，旨在模仿移动和桌面操作系统中流行的推送通知。他们重建与flexbox，所以他们很容易对齐和定位。

１、概述

当使用toast插件时要知道的事情

如果您从源代码构建我们的JavaScript，它需要util.js。
出于性能原因，toast是可选择的，所以您必须自己初始化它们。
请注意，你负责定位toast。
如果没有指定autohide: false，toast将自动隐藏。

该组件的动画效果依赖于preferred -reduced-motion media查询。

2、示例

2.1、Basic

为了鼓励可扩展和可预测的toast，我们建议有一个标题和正文。吐司标题使用display: flex，允许轻松对齐的内容，感谢我们的margin和flexbox实用程序。

吐司是灵活的，因为你需要和很少需要的标记。至少，我们需要一个单独的元素包含你的toast内容，并强烈推荐一个关闭按钮。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div>
</div>

2.2、Live

点击下面的按钮来显示一个吐司(和我们的工具一起放在右下角)，默认情况下，这个吐司是用.hide隐藏的。显示Live吐司

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button><div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;"><div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
</div>

2.3、Translucent

吐司是半透明的，以便与下面的东西融为一体。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small class="text-muted">11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div>
</div>

2.4、Stacking

当你有多个toast时，我们默认以一种可读的方式垂直堆叠它们。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small class="text-muted">just now</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">See? Just like this.</div>
</div><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Heads up, toasts will stack automatically</div>
</div>

3、Placement

在你需要的时候用自定义CSS放置吐司。右上角通常用于通知，中间顶部也是如此。如果你每次只展示一个吐司，把定位样式放在.toast上。

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"><div class="toast" style="position: absolute; top: 0; right: 0;"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
</div>

对于生成更多通知的系统，请考虑使用包装元素，以便它们可以轻松堆叠。

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;"><!-- Position it --><div style="position: absolute; top: 0; right: 0;"><!-- Then put toasts within --><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small class="text-muted">just now</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">See? Just like this.</div></div><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small class="text-muted">2 seconds ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Heads up, toasts will stack automatically</div></div></div>
</div>

你也可以用flexbox工具把吐司水平或垂直对齐。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;"><!-- Then put toasts within --><div class="toast" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div>
</div>

4、Accessibility

toast的目的是对你的访客或用户进行小的干扰，所以为了帮助那些有屏幕阅读器和类似辅助技术的人，你应该把toast包装在一个有咏叹调的地方。对活动区域的更改(例如注入/更新toast组件)会由屏幕阅读器自动宣布，而不需要移动用户的焦点或以其他方式打断用户。此外，包含aria-atomic="true"以确保整个toast总是作为一个单独的(原子)单元宣布，而不是仅仅宣布更改了什么(这可能会导致问题，如果你只更新

注意，活动区域需要在生成或更新toast之前出现在标记中。如果您同时动态地生成它们并将它们注入到页面中，那么辅助技术通常不会公布它们。

您还需要根据内容调整角色和咏叹调现场级别。如果是像错误这样的重要信息，使用role="alert" aria-live=" assertion"，否则使用role="status" aria-live="polite"属性。

当您正在显示的内容发生变化时，请确保更新延迟超时，以便用户有足够的时间阅读toast。

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000"><div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

当使用autohide: false时，你必须添加一个关闭按钮来允许用户关闭吐司。

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false"><div class="toast-header"><img src="..." class="rounded mr-2" alt="..."><strong class="mr-auto">Bootstrap</strong><small>11 mins ago</small><button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div>
</div>

虽然从技术上讲，可以在toast中添加可聚焦/可操作的控件(如额外的按钮或链接)，但你应该避免在自动隐藏toast时这样做。即使你给toast一个很长的延迟超时，键盘和辅助技术用户可能会发现很难及时到达toast采取行动(因为toast在显示时没有收到焦点)。如果你绝对需要进一步的控制，我们建议使用带有autohide: false的toast。

5、JavaScript行为

5.1、用法

通过JavaScript初始化toast

$('.toast').toast(option)

5.2、选项

选项可以通过数据属性或JavaScript传递。对于数据属性，将选项名称附加到data-，如data-animation=""。

5.3、方法

异步方法和转换
所有API方法都是异步的，并开始转换。它们在转换开始后立即返回给调用者，但在转换结束前返回。此外，对转换组件的方法调用将被忽略。

5.3.1、$().toast(options)

将toast处理程序附加到元素集合。

5.3.2、.toast(‘show’)

揭示一个元素的土司。在吐司实际显示之前返回给调用者(即在shown.bs.toast事件发生之前)。你必须手动调用这个方法，而你的吐司不会显示。

$('#element').toast('show')

5.3.3、.toast(‘hide’)

隐藏一个元素的吐司。在吐司被实际隐藏之前返回给调用者(即hidden.bs.toast事件发生之前)。如果将autohide设为false，则必须手动调用此方法。

$('#element').toast('hide')

5.3.4、.toast(‘dispose’)

隐藏一个元素的吐司。你的吐司将留在DOM上，但不再显示。

$('#element').toast('dispose')

5.4、事件

$('#myToast').on('hidden.bs.toast', function () {// do something...
})

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

Bootstrap系列之轻量弹框（Toasts）相关推荐

三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）
1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1 ...
Sublime Text3轻量型跨平台C/C++开发环境（上）安装使用篇
Sublime Text 2和3的对比相比于2,Sublime Text 3就秒启动一项,就压倒性地胜利了.因此在之后的叙述中都以Sublime Text 3为主角.并且3一直在不断的完善更新,具体 ...
bootstrap 多层弹框-关闭时导致外层滚动栏消失
问题:bootstrap form 表单内弹框, 多层模态框关闭时导致最外层滚动栏消失解决:在最外层表单中-添加 <style type="text/css">.mo ...
去掉BootStrap的错误弹框信息
去掉BootStrap的错误弹框信息找到jquery.dataTables.js,修改如下
bootstrap获取弹框数据_Bootstrap模态弹出框的实例教程
前面的话在 Bootstrap 框架中把模态弹出框统一称为 Modal.这种弹出框效果在大多数 Web 网站的交互中都可见.比如点击一个按钮弹出一个框,弹出的框可能是一段文件描述,也可能带有按钮操作 ...
android小米定位,Android填坑系列：在小米系列等机型上放开定位权限后的定位请求弹框示例...
背景近期因实际项目需要,在特定操作下触发定位请求,取到用户位置及附近位置. 问题: 经初步选型,最终决定接入百度定位,按照百度定位SDK Android文档,接入过程相对顺利. 但随后发现,在小米系 ...
python selenium系列（六）实战技巧之弹框处理
一前言在页面操作中,可能会出现一些非预期的弹框,就拿最简单的登录场景来说,在登录成功后进入页面前,可能弹出某类提示信息的窗体,这类窗体的共性是:非必然出现.也就是说,当你登录系统的外部条件满足时, ...
Bootstrap+Angularjs自制弹框
指令 directive('bsPopup', function ($parse) {return {require: 'ngModel',restrict: 'A',link: function ( ...
bootstrap获取弹框数据_execl基础-分类汇总与数据有效性验证
一.分类汇总问题1:分地区统计金额的总计如图需按不同的区域,统计数据.金额.成本等各项数值. 第一步:排序选中所属区域开始-排序-扩展所选区域 :汇总前必须先排序第二步:点击数据-分级显 ...

Bootstrap系列之轻量弹框（Toasts）