引导程序4 |牌

Bootstrap卡是一个灵活的盒子，里面装有一些填充物。它包括页眉和页脚，颜色，内容以及强大的显示选项的选项。它代替了面板，孔和缩略图的使用。它可以在称为卡的单个容器中使用。

基本卡： .card和.card-body类用于创建基本卡。 .card-body类在.card类内部使用。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            card-body
        
    
 
  
                    

输出：

页眉和页脚： .card-header类为卡提供页眉，而.card-footer类为卡提供页脚。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            Card Header
            Card Body
            Card Footer
        
    
 
  
                    

输出：

卡标题和链接： .card-title类用于设置卡的标题， .card-link类用于设置指向卡的链接(如果需要)。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            Card Title
            Card Text.
            Click Me!
        
    

                         

输出：

卡片样式：可以通过使用卡片的颜色来设置卡片样式，以便用户可以轻松理解特定卡片的含义。它由警报中使用的颜色组成。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            Primary
            Title.
        
        
        
            Danger
            Title.
        
        
        
            Warning
            Title.
        
        
        
            Info
            Title.
        
    
 
  
                    

输出：

卡片图像： .card-img-top或.card-img-bottom类用于将图像放置在卡片内的顶部或底部。

范例1：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          

    
        
        
            Author Name
            Passionate about programming.
            See Profile
        
    

 
  
                    

输出：

范例2：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                Author Name
                Passionate about programming.
                See Profile
                
            
        
    
 
  
                    

输出：

卡片图像叠加层： .card-img-overlay类用于在图像顶部添加文本。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
              
            
                
                    Author Name
                    Passionate about programming.
                    See Profile
                
            
        
    
 
  
                    

输出：

卡片组： .card-deck类用于创建高度和宽度相等的卡片网格。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                
                    Primary
                
            
  
            
                
                    Danger
                
            
  
            
                
                    Warning
                
            
  
            
                
                    Info
                
            
        
    
 
  
                    

输出：

卡片组： .card-group类用于创建相等高度和宽度的卡片网格，并删除卡片之间的左右边界。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                
                    Primary
                
            
      
            
                
                    Danger
                
            
      
            
                
                    Warning
                
            
      
            
                
                    Info
                
            
        
    
 
  
                                       

输出：

列表组： .list-group和.list-group-flush类用于在卡中创建内容列表。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                List Item 1
                List Item 2
                List Item 3
            
        
    
 
  
                              

输出：

厨房水槽：这是卡片类型的名称，其中包含所有内容。它混合并匹配多个内容以制作所需的卡。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
            
                Languages
            
              
            
                C
                C++
                JavaScript
            
              
            
                Add New
                More..
            
        
    
 
  
                                     

输出：

导航：它将导航菜单添加到卡标题中。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                
                    JavaStript
                
                
                    BootStrap
                
                
                    Python
                
            
        
          
        
            Card Title
            Add more language tutorials.
            Add Language
        
    
 
  
                                   

输出：

药丸形式的导航菜单：它将药丸形式的导航菜单添加到卡标题中。

例子：

 
 
 
    Bootstrap Cards 
      
    
    
  
    
      
    
    
      
    
    
      
    
    
 
  
 
    
        GeeksforGeeks
     
          
    
        
            
                
                    JavaStript
                
                
                    BootStrap
                
                
                    Python
                
            
        
          
        
            Card Title
            Add more language tutorials.
            Add Language
        
    
 
  
                            

输出：