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.com/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/[email protected]/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/[email protected]/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

打印本页

上一个

下一个