📜  引导带|桌子|套装1

📅  最后修改于: 2021-05-25 16:57:55             🧑  作者: Mango

Bootstrap为我们提供了一系列类,可用于将各种样式应用于表,例如更改标题外观,使行变为条纹,添加或删除边框,使行可悬停。 Bootstrap还提供用于使表响应的类。

  • 简单表:要创建简单的Bootstrap表,请在标记内添加表类,如下所示。

    例子:

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                             
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                 
  

输出:
引导表简单

  • 深色表:要使该表以深色背景和浅色字体显示,请使用class table-dark以及标记中的类,如下所示。

    例子:

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                             
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                 
  •   

    输出:
    引导表暗

  • 标题外观:要使表标题以浅灰色显示,请使用的thead-light类以及的表类,或者要使表标题以深灰色显示,请使用中的thead-dark以及
    的表类。请参见下面的示例以获取说明。

    例子:

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                             
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                                                                                                                                                                                                                                                                              
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                 
  •   

    输出:
    引导表标题

  • 条纹的行:为了使表显示在交替的深色和浅色的行,使用标签内条纹表类和的组合。我们还可以通过使用
    标记中的tabletable-darktable-striped类别的组合,使黑表以亮行和暗行交替出现。请参见下面的示例以获取说明。

    例子:

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                             
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                                                                                                                                                                                                                                                                              
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                    

    输出:
    引导表条纹

  • 带边框的表:要使表及其每个单元格都被边框包围,请使用带边框的类以及标记中的类表。我们还可以通过使用
    标记中的tabletable-darktable-bordered类的组合来使黑表及其每个单元格都由边框包围。请参见下面的示例以获取说明。

    例子:

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                             
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                                                                                                                                                                                                                                                                              
    S. No.             Name             City             Age           
    1             AjayPatna20
    2             RahulChandigarh17
    3             ParushKolkata22
                    

    输出:

    引导表边界