Bulma - 通知和進度條

說明

Bulma 規定使用預定義警報資訊在塊中顯示通知。Bulma 提供了 .notification 類來顯示通知。

以下示例演示瞭如何透過顏色修飾符（is-primary、is-link、is-info、is-success、is-warning、is-danger）向用戶顯示通知 −

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Basic Notification
            </span>
            <br>
            
            <div class = "notification">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            <br>
            
            <span class = "is-size-5">
               Notification Colors
            </span>
            <br>
            
            <div class = "notification is-primary">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-link">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-info">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-success">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-warning">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
            
            <div class = "notification is-danger">
               <button class = "delete"></button>
               This is some sample text. This is some sample text. 
               This is some sample text. This is some sample text. 
            </div>
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 −

進度條

進度條用於指定工作的進度（例如下載過程）。

以下示例演示進度條的使用 −

即時演示

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <title>Bulma Elements Example</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "is-size-5">
               Basic Progress Bar
            </span>
            <br>
            
            <progress class = "progress" value="15" max = "100">15%</progress>
            
            <span class = "is-size-5">
               Colors of Progress Bars
            </span>
            <br>
            
            <progress class = "progress is-primary" value = "15" max = "100">20%</progress>
            <progress class = "progress is-link" value = "30" max = "100">35%</progress>
            <progress class = "progress is-info" value = "45" max = "100">50%</progress>
            
            <progress class = "progress is-success" value = "15" max = "100">65%</progress>
            <progress class = "progress is-warning" value = "30" max = "100">70%</progress>
            <progress class = "progress is-danger" value = "45" max = "100">95%</progress>
            
            <span class = "is-size-5">
               Sizes of Progress Bars
            </span>
            <br>
            
            <progress class = "progress is-small" value = "25" max = "100">15%</progress>
            <progress class = "progress" value = "40" max = "100">30%</progress>
            <progress class = "progress is-medium" value = "50" max = "100">45%</progress>
            <progress class = "progress is-large" value = "70" max = "100">60%</progress>
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 −

bulma_elements.htm

列印此頁