引导程序4 |吐司

Toast用于创建类似警报框的内容，并在发生某些情况时在短短的时间内(如几秒钟)显示。就像用户单击按钮或提交表单以及执行许多其他操作一样。

班级：
• .toast：有助于制作吐司
• .toast-header：它有助于创建吐司头
• .toast-body：它有助于创建烤面包体

  示例：如何制作吐司。
  注意：应使用jQuery初始化。只需选择指定的元素，然后调用此toast方法即可。

    
  
      Creating toast
    
      
      
      
      
      
      
      
      
      
  
    
  
      GeeksforGeeks
      
          .toast
          Click the button to show the toast message.
    
          Show Toast
    
          
              
                  Toast Header
              
              
                  Some text inside the toast body
              
          
      
    
      
          $(document).ready(function() {
              $("#myBtn").click(function() {
                  $('.toast').toast('show');
              });
          });
      
    
  
    

  输出：
  

吐司方法：

.toast(options)：它有助于通过option参数激活烤面包。在下面的实现中，我们从烤面包上消除了渐变过渡效果，并且在显示烤面包时将其隐藏时间延迟到8000毫秒。它具有动画，自动隐藏，延迟三个选项。有关这些选项的更多信息，请参考此链接。

例子：

  

    Bootstrap Example
    
    
    
    
    
    
    
    
    

  

    GeeksforGeeks
    
        .toast(options)
        When we click the button below there
          would be delay of the toast to 8000
          milliseconds.
        
        Show Toast
  
        
            
                Toast Header
            
            
                Some text inside the toast body
            
        
    
  
    
        $(document).ready(function() {
            $('#myBtn').click(function() {
                $('.toast').toast({
                    animation: false,
                    delay: 2000
                });
                $('.toast').toast('show');
            });
        });
    
  

  

输出：

• .toast(“ show”)：显示吐司
• .toast(“ hide”)：隐藏烤面包
• .toast(“ dispose”)：处置面包

  例子：

    
  
      Bootstrap Example
      
      
      
      
    
      
    
      
    
  
    
  
      GeeksforGeeks
      
          .toast("show"),.toast("hide"),.toast("dispose")
          Click on the buttons below to perform the actions.
    
          
            Show Toast
        
          
            Hide Toast
        
          
            Dispose Toast
        
    
          
              
                  Toast Header
              
              
                  Some text inside the toast body
              
          
      
    
      
          $(document).ready(function() {
              $("#myShowBtn").click(function() {
                  $('.toast').toast('show');
              });
              $("#myHideBtn").click(function() {
                  $('.toast').toast('hide');
              });
              $("#myDisposeBtn").click(function() {
                  $('.toast').toast('dispose');
              });
          });
      
    
  
    

  输出：
  

吐司活动：
例子：

  

    Bootstrap Example
    
    
    
    
  
    
  
    
  

  

    GeeksforGeeks
    
        Toast Events
        show.bs.toast, 
        shown.bs.toast, 
        hide.bs.toast, 
        hidden.bs.toast 
        Click on the button below to perform toast.
        
          Show Toast
      
  
        
            
                Toast Header
            
            
                Some text inside the toast body
            
        
    
  
    
        $(document).ready(function() {
            $("#myShowBtn").click(function() {
                $('.toast').toast('show');
            });
  
            $('.toast').on('show.bs.toast', function() {
                alert('The toast is about to be shown.');
            });
            $('.toast').on('shown.bs.toast', function() {
                alert('The toast is now fully shown.');
            });
            $('.toast').on('hide.bs.toast', function() {
                alert('The toast is about to be hidden.');
            });
            $('.toast').on('hidden.bs.toast', function() {
                alert('The toast is now hidden.');
            });
        });
    
  

  

输出：

show.bs.toast：在要显示吐司时发生。

shown.bs.toast：显示吐司时发生。

hide.bs.toast：当烤面包即将被隐藏时，就会发生这种情况。

hidden.bs.toast：当烤面包完全隐藏时会发生。