真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Bootstrap中如何使用Toasts組件

這篇文章主要介紹Bootstrap中如何使用Toasts組件，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)成立于2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元吉木薩爾做網(wǎng)站,已為上家服務(wù),為吉木薩爾各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:13518219792

1 吐司消息（Toasts）示例

吐司（Toasts）是一種輕量級(jí)通知，旨在模仿移動(dòng)和桌面操作系統(tǒng)已經(jīng)普及的推送通知。它們是用flexbox構(gòu)建的，所以它們很容易對(duì)齊和定位。

和彈出提示一樣，吐司消息也需要自己初始化，不知為什么官網(wǎng)的初始化方法無效，我在國外網(wǎng)站找到一個(gè)可行的方法。



  
    
    
    
    
    
    Popovers
  
  
    
        




        顯示吐司消息
        
          
            
            吐司消息提示
            11 mins ago
            
            
            
            你有一條短消息！

Bootstrap中如何使用Toasts組件

2 設(shè)置選項(xiàng)

選項(xiàng)可以透過數(shù)據(jù)屬性或是JavaScript傳遞。對(duì)于數(shù)據(jù)屬性，將選項(xiàng)名稱附加到data-bs-，如：data-bs-animation=""。

data-bs-animation="true" 在吐司應(yīng)用CSS fade轉(zhuǎn)換效果
data-bs-autohide="true" 自動(dòng)將吐司隱藏
data-bs-delay="5000" ，延遲隱藏吐司5s（默認(rèn)單位毫秒）

以上值為默認(rèn)值，如果你對(duì)磨人的效果滿意，根本不需要寫那個(gè)，27.3.1例子中，我設(shè)置了data-bs-autohide="false"設(shè)置不自動(dòng)將吐司隱藏，這樣好方便截圖，否則鼠標(biāo)只要在任何地方一點(diǎn)，消息框就消失了。

3 半透明的

吐司也可以是半透明的，因此能混合在它們可能出現(xiàn)的任何東西上。在支持CSS屬性backdrop-filter的瀏覽器，還會(huì)嘗試對(duì)吐司下方的元素進(jìn)行模糊效果。



  
    
    
    
    
    
    吐司消息
  
  
    
        




        顯示吐司消息
        
          
          半透明吐司
          11 mins ago
          
          
          
            你有一條短消息！

Bootstrap中如何使用Toasts組件

4 堆疊

可以透過將吐司包裝于toast-container容器來推疊它們，這將會(huì)在垂直方向上增加一些間距。

Bootstrap中如何使用Toasts組件

5 自定義內(nèi)容

透過移除子元件、調(diào)整通用類或是增加標(biāo)記以自定義吐司。



  
    
    
    
    
    
    吐司消息
  
  
    
        




        顯示吐司消息
        
            
            邀請(qǐng)你穿越到三國！
            
            接受邀請(qǐng)
            關(guān)閉

Bootstrap中如何使用Toasts組件

6 配色方案

基于以上的示例，您也可以透過我們的顏色通用類別建立不同的吐司配色方案。以下我們將bg-danger與text-white添加到toast，再把text-white添加到關(guān)閉按鈕上。為了讓邊緣清晰顯示，透過border-0移除了預(yù)設(shè)的邊框。

Bootstrap中如何使用Toasts組件

7 設(shè)置顯示位置

默認(rèn)吐司消息顯示在瀏覽器右下角，根據(jù)需求，使用自定義的CSS指定吐司位置。右上角通常用于通知，頂部的中間也是如此。如果您一次只要展示一個(gè)吐司，請(qǐng)將定位樣式放在toast上。



Toast placement

Select a position...
Top left
Top center
Top right
Middle left
Middle center
Middle right
Bottom left
Bottom center
Bottom right







  
  Bootstrap
  11 mins ago


  Hello, world! This is a toast message.

上面是官方例子，Bootstrap5 Toasts我也沒找到其中驅(qū)動(dòng)的js代碼。不過可以給大家參考一下，有興趣的可以去研究一下，在這里我根據(jù)上面的代碼，修改了個(gè)顯示在左上角的。



  
    
    
    
    
    
    吐司消息
  
  
    
        




        顯示吐司消息
        
          
            
            吐司消息提示
            11 mins ago
            
            
            
            你有一條短消息！