布尔玛 |信息

Bulma 是一个基于 Flexbox 的免费开源 CSS 框架。它组件丰富、兼容且文档齐全。它本质上是高度敏感的。它使用类来实现其设计。

Bulma 中的 Message 组件提供彩色框类型占位符来强调页面的某些部分。它包括可以添加以设计内容的其他几个组件。下面列出了这些组件：

• message-header：它保存消息的标题和删除元素。它是一个可选组件。
• message-body：它保存消息的正文。

示例 1：此示例显示使用 Bulma 创建一条简单消息。

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 70px;
    }
  

  

  
    
      
        
          
            GeeksforGeeks
            
            
          
          
            'GeeksforGeeks' is
            a computer science portal.it was
            created with a goal in mind to
            provide well written, well thought
            and well explained solutions for
            selected questions. The core team
            of five super geeks constituting
            of technology lovers and computer
            science enthusiasts have been
            constantly working in this direction.
          
        
      
    
  

  

输出：

示例 2：此示例显示使用 Bulma 创建不同颜色的消息组件。

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 70px;
    }
  

  

  
    
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created
            with a goal in mind to provide well
            written, well thought and well explained
            solutions for selected questions. The
            core team of five super geeks
            constituting of technology lovers and
            computer science enthusiasts have been
            constantly working in this direction.
          
        
      
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a 
            computer science portal.it was created 
            with a goal in mind to provide well 
            written, well thought and well explained 
            solutions for selected questions. The 
            core team of five super geeks constituting 
            of technology lovers and computer science 
            enthusiasts have been constantly working
            in this direction.
          
        
      
    
  

  

输出：

示例 3：

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 70px;
    }
  

  

  
    
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
      
        
          
            GeeksforGeeks
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
    
  

  

输出：

示例 4：

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 70px;
    }
  

  

  
    
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
    
  

  

输出：

示例 5：此示例显示使用 Bulma 创建不同大小的消息组件。

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 50px;
    }
  

  

  
    
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
  
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
  
      
        
          
  
            GeeksforGeeks
  
            
            
          
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
    
  

  

输出：

示例 6：此示例使用 Bulma 创建没有标题的消息组件。

html

  

  Bulma Message
  
  
  
  
  
  
  
  
  
  
    div.columns {
      margin-top: 50px;
    }
  

  

  
    
      
        
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
  
      
        
          
            'GeeksforGeeks' is a
            computer science portal.it was created with
            a goal in mind to provide well written,
            well thought and well explained solutions
            for selected questions. The core team
            of five super geeks constituting of
            technology lovers and computer science
            enthusiasts have been constantly working
            in this direction .
          
        
      
    
  

  

输出：