布尔玛 |卡片

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

Card 是一个灵活的组件，可以由所需的内容组成。它包括几个其他组件，我们必须专门添加这些组件才能很好地设计我们的内容。下面列出了这些组件：

• card-header：它是一个带有阴影的水平框型组件。
  • card-header-title：左对齐加粗，用于表示卡片的标题。
  • card-header-icon：它是添加到卡片标题部分的图标的占位符。
• card-image：它是一个包含响应式图像的容器。
• card-content：它是一个容器，可以在其中插入任何元素，如段落、图标、按钮或图像。
• 页脚：是用来存放卡片页脚元素的容器。
  • card-footer-item：它为页脚项目列表保留了空间。

示例 1：此示例表示如何使用 Bulma 创建一张简单的卡片。

html

  

  
    
  
  
  
  
  

  

  

    

      

        

          

            

              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 .
            
  
            

              ___A computer science portal for geeks
            
  
          
        
      
    
  

输出：

示例 2：此示例使用 Bulma 创建带有标题的卡片。

html

  

  
  
  
  
    
  
  

  

  

    

      

        

          

            

              GeekforGeeks
            
          
          

            

              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 .
            
  
            

              ___A computer science portal for geeks
            
  
          
        
      
    
  

输出：

示例 3：此示例使用 Bulma 创建带有页眉和页脚的卡片。

html

  

  
    
  
  
    
  
  

  

  

    

      

        

          

            

              GeekforGeeks
            
          
          

            

              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 .
            
  
          
          

            

              

                
                  ___A computer science portal for geeks
                
              
  
            
          
        
      
    
  

输出：

示例 4：此示例使用 Bulma 创建带有图像的卡片。

html

  

  
    
  
  
   
  
  

  

  

    

      

        

          

            

              
            
          
          

            

              

                

                  
                
              
  
              

                

                  GeekforGeeks
                
  
                

                  @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

  

  
    
  
  
    
  
  

  

  

    

      

        

  
          

            

              

                

                  
                
              
  
              

                

                  GeekforGeeks
                
  
                

                  @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 .
                
              
            
          
        
      
    
  

输出：