twitter-bootstrap Bootstrap 4 小吃店/吐司

Question

提问by mrroot5

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

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

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 实现一个自定义的小吃店或吐司，但现在，没有必要，因为 Bootstrap 4 从 4.2 版中包含了这个选项，正如@Zim 所说。

Answer 1

回答by Script47

I(emphasis = full disclosure) created a jQuery plugin for the toasts components to make them easier to use, the repo can be found here. The purpose was to be able to call the toasts on the fly through JavaScript.

我（强调 = 完全公开）为 toasts 组件创建了一个 jQuery 插件，以使其更易于使用，可以在此处找到 repo。目的是能够通过 JavaScript 即时调用 toast。

Toast

吐司

$.toast({
  title: 'Toast',
  subtitle: '11 mins ago',
  content: 'Hello, world! This is a toast message.',
  type: 'info',
  delay: 5000
});

Snack

小吃

$.toast({
  title: 'A small bitesize snack, not a toast!',
  type: 'info',
  delay: 5000
});

Live Example

现场示例

(function(b){b.toast=function(a,h,g,l,k){b("#toast-container").length||(b("body").prepend('<div id="toast-container" aria-live="polite" aria-atomic="true"></div>'),b("#toast-container").append('<div id="toast-wrapper"></div>'));var c="",d="",e="text-muted",f="",m="object"===typeof a?a.title||"":a||"Notice!";h="object"===typeof a?a.subtitle||"":h||"";g="object"===typeof a?a.content||"":g||"";k="object"===typeof a?a.delay||3E3:k||3E3;switch("object"===typeof a?a.type||"":l||"info"){case "info":c="bg-info";
f=e=d="text-white";break;case "success":c="bg-success";f=e=d="text-white";break;case "warning":case "warn":c="bg-warning";f=e=d="text-white";break;case "error":case "danger":c="bg-danger",f=e=d="text-white"}a='<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="'+k+'">'+('<div class="toast-header '+c+" "+d+'">')+('<strong class="mr-auto">'+m+"</strong>");a+='<small class="'+e+'">'+h+"</small>";a+='<button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">';
a+='<span aria-hidden="true" class="'+f+'">&times;</span>';a+="</button>";a+="</div>";""!==g&&(a+='<div class="toast-body">',a+=g,a+="</div>");a+="</div>";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery);


const TYPES = ['info', 'warning', 'success', 'error'],
      TITLES = {
        'info': 'Notice!',
        'success': 'Awesome!',
        'warning': 'Watch Out!',
        'error': 'Doh!'
      },
      CONTENT = {
        'info': 'Hello, world! This is a toast message.',
        'success': 'The action has been completed.',
        'warning': 'It\'s all about to go wrong',
        'error': 'It all went wrong.'
      };

function show_random_toast()
{
  let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      title = TITLES[type],
      content = CONTENT[type];

  $.toast({
    title: title,
    subtitle: '11 mins ago',
    content: content,
    type: type,
    delay: 5000
  });
}

function show_random_snack()
{
  let type = TYPES[Math.floor(Math.random() * TYPES.length)],
      content = CONTENT[type].replace('toast', 'snack');
      
  $.toast({
    title: content,
    type: type,
    delay: 5000
  });
}

#toast-container{position:sticky;z-index:1055;top:0}#toast-wrapper{position:absolute;top:0;right:0;margin:5px}#toast-container>#toast-wrapper>.toast{min-width:150px}#toast-container>#toast-wrapper>.toast>.toast-header strong{padding-right:20px}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
      <button class="btn-block btn-primary" onclick="show_random_toast();">Show Random Toast</button>
      <br>
      <button class="btn-block btn-primary" onclick="show_random_snack();">Show Random Snack</button>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  </body>
</html>

Answer 2

回答by Zim

Bootstrap 4.2 now includes Toastnotifications

Bootstrap 4.2 现在包含Toast通知

Here's an example:

下面是一个例子：

<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>

Demo

演示

More Bootstrap Toast layout/position examples:

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

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

垂直堆叠：https
: //www.codeply.com/go/3ZvZa9b8Im并排：https: //www.codeply.com/go/GFMde2ritI
3x3 网格：https: //www.codeply.com/go/ lj8GTFjvuK

Answer 3

回答by mrroot5

Summary:

概括：

Create a container grid (row, cols. etc.).
Place inside snackbar an html with text or use data-text attribute inside button trigger. For example:

创建一个容器网格（行、列等）。
在小吃店内放置一个带有文本的 html 或在按钮触发器内使用 data-text 属性。例如：

<div class="snackbar bg-info px-3 py-3">Text to show without data-text</div>

<button type="button" class="btn btn-primary btn-lg" id="snackbar-trigger" data-text="Texto en data-text">Snackbar trigger</button>

Copy & paste CSS & JS in your HTML.
Customize snackbar position changing .snackbartop and right options. Default is top: 10%;and right: 1%;.
See snackbar on page load or button trigger.

将 CSS 和 JS 复制并粘贴到您的 HTML 中。
自定义小吃店位置更改.snackbar顶部和右侧选项。默认为top: 10%;和right: 1%;。
在页面加载或按钮触发器上查看小吃店。

You can check full code on this pen.

您可以在这支笔上查看完整代码。

Answer 4

回答by Amit Pandey

Sometimes we need show a piece of information to the user as a popup, but I can't use the Bootstrap modal for that. So that time we need to create a Snackbar, or we can say that a Toast. Snackbar are often used as tooltips/popups to show a message at the bottom of the screen.

有时我们需要向用户显示一条信息作为弹出窗口，但我不能为此使用 Bootstrap 模式。所以那个时候我们需要创建一个Snackbar，或者我们可以说是一个Toast。Snackbar 通常用作工具提示/弹出窗口以在屏幕底部显示消息。

Generally Toast is a popup for showing a small information to the user, this is also using in the android application. We can customize our Toast layout according to our requirement. It will be show on the screen when you call it and It will disappear after few seconds, whatever you have set.

通常 Toast 是一个向用户显示小信息的弹出窗口，这也在 android 应用程序中使用。我们可以根据需要自定义 Toast 布局。无论您设置什么，它都会在您调用它时显示在屏幕上，并且会在几秒钟后消失。

Create your HTML code for the Snackbar with id #snackbar, you can use Bootstrap classes for the responsive design just like that:

使用 id #snackbar 为 Snackbar 创建 HTML 代码，您可以使用 Bootstrap 类进行响应式设计，就像这样：

<div class="container">
<h2 class="text-danger">Cool Snackbar/Toast demo</h2>
<div id="snackbar">
    <div class="close"><i class="fas fa-times-circle"></i></div>
    <div class="col-sm-6 col-xs-6 col-md-6">
        <a hreflang="en-in" href="https://play.google.com/" target="_blank" >
            <img src="google-play-store.png" alt="Google Play Store">
        </a>
    </div>
    <div class="col-sm-6 col-xs-6 col-md-6 second">
        <a hreflang="en-in" href="http://youtube.com/" target="_blank" >
            <img src="youtube.png" alt="YouTube Link" >
        </a>
    </div>
    <div class="clearfix"></div>
</div>
</div>

Now, we will create style for #snackbar with show and hide class, use @-webkit-keyframes method for fade-in and fade-out.

现在，我们将使用 show 和 hide 类为 #snackbar 创建样式，使用 @-webkit-keyframes 方法进行淡入和淡出。

#snackbar {
visibility: hidden;
background-color: #FFFFFF;
text-align: center;
border-radius: 5px;
padding: 16px;
position: fixed;
z-index: 1;
bottom: 30px;
width:80%;
bottom: 30px;
box-shadow: 0px 0px 30px 20px grey;
}

#snackbar .close {
float:right;
color:#FF0000;
z-index: 1;
opacity: 0.6;
margin-top: -23px;
margin-right: -23px;
}

#snackbar .second {
border-left: 1px solid #FF0000
}

#snackbar img {
width:200px;
}

#snackbar.show {
visibility: visible;
-webkit-animation: fadein 0.5s;
animation: fadein 0.5s;
}

#snackbar.hide {
-webkit-animation: fadeout 0.5s 2.5s;
animation: fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;} 
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;} 
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

After all, create your JavaScript code for #snackbar to show and hide effect.

毕竟，为#snackbar 创建 JavaScript 代码以显示和隐藏效果。

var x = document.getElementById("snackbar");
setTimeout(function () {
    x.className = "show";
}, 3000);
setTimeout(function () {
    x.className = x.className.replace("show", "hide");
}, 15000);
$("#snackbar .close").click(function () {
    x.className = x.className.replace("show", "hide");
});

Look at full example, click on this url https://www.legendblogs.com/blog/how-to-create-a-snackbar-or-toast-bootstrap/121762

看看完整的例子，点击这个网址 https://www.legendblogs.com/blog/how-to-create-a-snackbar-or-toast-bootstrap/121762

twitter-bootstrap Bootstrap 4 小吃店/吐司

提问by mrroot5

回答by Script47

回答by Zim

回答by mrroot5

回答by Amit Pandey

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap 4 小吃店/吐司

提问by mrroot5

回答by Script47

回答by Zim

回答by mrroot5

回答by Amit Pandey

相关推荐

twitter-bootstrap 如何使 Bootstrap 4 卡片组每行宽度相同？

twitter-bootstrap Bootstrap 4 图像缩略图类

twitter-bootstrap Bootstrap 3 卡

twitter-bootstrap Bootstrap 4. 在 .nav-link 上平滑滚动，但不适用于其他锚元素

相关推荐

最近更新

标签