Bulma - 資訊

前一頁
下一頁

說明

Bulma 提供訊息塊，可透過在 article 標籤中使用 message 類來增強頁面的外觀。Bulma 還允許使用不同型別的修飾符來更改訊息框顏色，如 is-dark、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 = "title">
               Message Block
            </span>
            <br>
            <br>
            
            <article class = "message">
               <div class = "message-header">
                  <p>Basic Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            <br>
            <br>
            
            <span class = "title">
               Message Block Colors
            </span>
            <br>
            <br>
            
            <article class = "message is-primary">
               <div class = "message-header">
                  <p>Primary Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-link">
               <div class = "message-header">
                  <p>Link Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text .This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-info">
               <div class = "message-header">
                  <p>Info Message Box</p>
                  <button class = "delete" aria-label="delete"></button>
               </div>
               
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
         </div>
      </section>
      
   </body>
</html>

顯示以下輸出 −

在上面的示例中，我們只使用了 is-primary、is-link 和 is-info 修飾符。如果你想使用剩餘的修飾符，則在 article 標籤中使用 message 類以及這些修飾符。

訊息正文

你可以只顯示訊息正文，而不包括 message-header 修飾符，如下例所示 −

現場演示 
<!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 = "title">
               Message Body
            </span>
            <br>
            <br>
            
            <article class = "message">
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-primary">
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-link">
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-info">
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
         </div>
         
      </section>
   </body>
   
</html>

顯示以下輸出 −

訊息塊大小

你可以透過使用 is-small、is-medium 和 is-large 修飾符來更改訊息框的大小，如下例所示 −

現場演示 
<!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 = "title">
               Message Block Sizes
            </span>
            <br>
            <br>
            
            <article class = "message is-small">
               <div class = "message-header">
                  <p>Small Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-medium">
               <div class = "message-header">
                  <p>Medium Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
            
            <article class = "message is-large">
               <div class = "message-header">
                  <p>Large Message Box</p>
                  <button class = "delete" aria-label = "delete"></button>
               </div>
               <div class = "message-body">
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text. 
                  This is simple text. This is simple text. This is simple text.
               </div>
            </article>
         </div>
         
      </section>
   </body>
   
</html>

執行上述程式碼，你將獲得以下輸出 −

bulma_components.htm
列印頁面
上一頁
下一頁
廣告
© . All rights reserved.