Bootstrap 4小吃店/吐司[关闭]

问题描述 投票：2回答：4

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

已更新：我试图为Bootstrap 4实现自定义小吃栏或吐司，但是现在，由于@Zim所说，因为Bootstrap 4包含了4.2版中的此选项，因此没有必要。

twitter-bootstrap notifications bootstrap-4 toast snackbar
4个回答
4
投票

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>

Demo

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

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

12
投票

[I（强调=完全公开）为toasts组件创建了一个jQuery插件，以使其易于使用，可以在here中找到该回购。目的是能够通过JavaScript即时调用敬酒。

Toast

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

小吃

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

实时示例

(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>
-1
投票

摘要：

  1. 创建容器网格（行，列等）。

  2. 在小吃店内放置带有文本的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>

  1. 将CSS和JS复制并粘贴到HTML中。

  2. 自定义小吃店位置更改.snackbar顶部和右侧选项。默认值为top: 10%;和right: 1%;。

  3. 请参阅小吃栏上的页面加载或按钮触发器。

您可以在this pen上检查完整的代码。

-1
投票

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

[一般来说，Toast是一个弹出窗口，用于向用户显示少量信息，这也在Android应用程序中使用。我们可以根据需要自定义Toast布局。当您调用它时，它将显示在屏幕上，无论您设置了什么，它都会在几秒钟后消失。

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

现在，我们将使用显示和隐藏类为#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;}
}

毕竟，为#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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.