Bootstrap 4小吃吧/吐司 [英] Bootstrap 4 snackbar / toast

问题描述

我正在尝试使用Bootstrap 4创建小吃店/吐司版.我从开始来自w3schools的教程.

I'm trying to create a snackbar / toast version with Bootstrap 4. I start with this tutorial from w3schools.

更新:我正尝试为Bootstrap 4实现自定义小吃栏或吐司，但是现在，由于@Zim所说，由于4.2版本中的Bootstrap 4包含了此选项，因此没有必要./p>

Updated: I was trying to implement a custom snackbar or toast for Bootstrap 4 but, right now, it isn't necessary beacause Bootstrap 4 includes this option from version 4.2 as @Zim says.

推荐答案

Bootstrap 4.2现在包括

Bootstrap 4.2 now includes Toast notifications

这是一个例子:

<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://www.codeply.com/go/3ZvZa9b8Im
并排: https://www.codeply.com/go/GFMde2ritI
3x3网格: https://www.codeply.com/go/lj8GTFjvuK

Stacked vertically: https://www.codeply.com/go/3ZvZa9b8Im
Side-by-side: https://www.codeply.com/go/GFMde2ritI
3x3 grid: https://www.codeply.com/go/lj8GTFjvuK

这篇关于Bootstrap 4小吃吧/吐司的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！