Bootstrap 4快餐/吐司

Question

我正在尝试用Bootstrap 4创建一个snackbar/toast版本。我从W3Schools的这篇教程开始。

更新：我试图为Bootstrap 4实现一个自定义的snackbar或toast，但现在没有必要，因为Bootstrap 4从4.2版开始就包含了这个选项，正如@zim所说的。

Answer 1

Bootstrap 4.2现在包含了Toast通知

这里有一个例子：

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="mr-auto">Title</strong>
    <small>5 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">
    Content... this is a toast message.
  </div>
</div>

演示

更多Bootstrap Toast布局/位置示例：

垂直堆叠:https://codepley.com/go/3zvza9b8im
并排:https://codepley.com/go/gfmde2riti
3x3网格:https://codepley.com/go/lj8gtfjvuk