Bulma - 框和圖示

描述

.box 類定義了一個容器，其中包括邊框、半徑和內邊距。

以下示例介紹如何為頁面中的元素顯示框和圖示 −

<!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">
               Box Element
            </span>
            <br>
            <br>
            
            <div class = "box">
               <article class = "media">
                  <figure class = "media-left">
                     <p class = "image is-64x64">
                        <img src = "https://tutorialspoint.tw/bootstrap/images/64.jpg">
                     </p>
                  </figure>
                  
                  <div class = "media-content">
                     <div class = "content">
                        <p>
                           <strong>Will Smith</strong> 
                           <small>@wsmith</small> 
                           <small>45m</small>
                           <br>
                           
                           This is some sample text. This is some sample text. 
                           This is some sample text. This is some sample text. 
                           This is some sample text. This is some sample text. 
                           This is some sample text. This is some sample text.
                        </p>
                     </div>
                     
                     <nav class = "level is-mobile">
                        <div class = "level-left">
                           <a class = "level-item">
                              <span class = "icon is-small"><i class = "fas fa-reply"></i></span>
                           </a>
                           <a class = "level-item">
                              <span class = "icon is-small"><i class = "fas fa-retweet"></i></span>
                           </a>
                           <a class = "level-item">
                              <span class = "icon is-small"><i class = "fas fa-heart"></i></span>
                           </a>
                        </div>
                     </nav>
                     
                  </div>
               </article>
               
            </div>
         </div>
      </section>
   </body>
   
</html>

執行以上程式碼時，將獲得如下輸出 −

圖示

.icon 類為元素提供了圖示字型庫，例如 Font Awesome 圖示、Material Design 圖示、Ionicons 圖示等。可以使用文字顏色修飾器更改圖示顏色，也可以使用 is-small、is-medium 和 is-large 類配合 icon 容器更改圖示大小。

以下示例描述瞭如何顯示簡單圖示、更改圖示顏色（使用 is-info、is-success、is-warning、is-danger 顏色修飾器）和大小（使用 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">
               Icon Element
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Simple Icon</span>
            <br>
            
            <span class = "icon">
               <i class = "fas fa-user"></i>
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Icon Colors</span>
            <br>
            
            <span class = "icon has-text-info">
               <i class = "fas fa-user"></i>
            </span>
            
            <span class = "icon has-text-success">
               <i class = "fas fa-user"></i>
            </span>
            
            <span class = "icon has-text-warning">
               <i class = "fas fa-user"></i>
            </span>
            
            <span class = "icon has-text-danger">
               <i class = "fas fa-user"></i>
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Icon Sizes</span>
            <br>
            
            <span class = "icon is-small">
               <i class = "fas fa-user"></i>
            </span>
            
            <span class = "icon is-medium">
               <i class = "fas fa-2x fa-user"></i>
            </span>
            
            <span class = "icon is-large">
               <i class = "fas fa-3x fa-user"></i>
            </span>
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 −

圖示變體

Font Awesome 變體提供了不同型別的修飾器類，可以在頁面中顯示固定寬度、帶邊框的圖示、動態圖示等。Material Design 圖示允許使用者根據需要顯示圖示的顏色和大小。Ionicons 圖示是開源圖示，用於網路、iOS、安卓和桌面應用程式。

讓我們建立一個示例，來說明如何使用上述頁面中的圖示變體 −

現場演示

<!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">
      <link href = "https://unpkg.com/ionicons@4.3.0/dist/css/ionicons.min.css" rel = "stylesheet">
      <script src = "https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
      <script src = "https://unpkg.com/ionicons@4.3.0/dist/ionicons.js"></script>
      <link rel = "stylesheet" href = "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css">
   </head>
   
   <body>
      <section class = "section">
         <div class = "container">
            <span class = "title">
               Icon Variations
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Font Awesome Icons</span>
            <br>
            <br>
            
            <span class = "icon is-medium">
               <i class = "fas fa-2x fa-spinner fa-pulse"></i>
            </span>
            
            <span class = "icon is-medium">
               <i class = "fas fa-2x fa-fw fa-user"></i>
            </span>
            
            <span class = "icon is-medium">
               <i class = "fas fa-2x fa-border fa-user"></i>
            </span>
            
            <span class = "icon is-medium">
               <span class = "fa-stack">
               <i class = "fas fa-circle fa-stack-2x"></i>
               <i class = "fas fa-user fa-stack-1x fa-inverse"></i>
               </span>
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Material Design Icons</span>
            <br>
            <br>
            
            <span class = "icon is-small">
               <i class = "mdi mdi-18px mdi-account-box"></i>  
            </span>
            
            <span class = "icon is-medium">
               <i class = "mdi mdi-24px mdi-account-box"></i>  
            </span>
            
            <span class = "icon is-large">
               <i class = "mdi mdi-36px mdi-account-box"></i>  
            </span>
            <br>
            <br>
            
            <span class = "is-size-5">Ionicons</span>
            <br>
            <br>
            
            <span class = "icon is-small">
               <ion-icon size = "small" name = "person"></ion-icon>
            </span>
            
            <span class = "icon is-large">
               <ion-icon size = "large" name = "person"></ion-icon>
            </span>
            
         </div>
      </section>
      
   </body>
</html>

它顯示以下輸出 −

bulma_elements.htm

列印本頁

上一個

下一個