📜  引导带|桌子|套装2

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

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

  • 无边界表:要使表成为无边界表,请使用table-borderless类以及标记中的类表类。我们还可以通过使用
    标记中的tabletable-darktable-borderless类的组合来使黑表无边界。请参见下面的示例以获取说明。

    例子:

    
    
      
        
        
        
      
        
        
      
        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
           
  

输出:
引导表无边界

  • 可悬停的表:要使表的行可悬停,请使用class table-hover以及标记内的类表。我们还可以使用
    标记内的tabletable-hovertable-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
           
  •   

    输出:
    引导表可悬停

  • 小表:要缩小表的大小,请使用class table-sm以及标记内的类表。这样可以将单元格填充减少一半。要缩小黑表的大小,请使用
    标记中的tabletable-smtable-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
           
  •   

    输出:

    引导表小

  • 为表格着色: Bootstrap为我们提供了许多上下文类,可用于为表格的整个行或单个单元格着色。这些类应与浅色表一起使用,而不是与深色表一起使用,以便获得更好的外观。要给黑表上色,我们可以使用Bootstrap的背景色类。上下文类在下面给出。有关示例,请参见示例。
    table-primary table-secondary table-success
    table-danger table-warning table-info
    table-light table-dark table-active

    例子:

    
    
      
        
        
        
      
        
        
      
        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
           
      

    输出:

    引导表颜色

  • 响应表:要使表对所有视口大小都具有响应能力,请将表包装在开始和结束的
    标签内,并在开始的
    标签内具有表响应类。类似地,为了使表根据视口大小响应,我们根据要使表响应的视口大小,使用类table-sensitive {-sm | -md | -lg | -xl}

    在响应表中,如果表不适合当前大小的视口,则会出现水平滚动条。

    在特定于视口的响应表的情况下,如果视口大小小于类table-sensitive {-sm | -md | -lg | -xl}指定的视口,则表将变为响应式。请参阅下面的示例以获取说明。

    示例1:表响应

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               
    DataDataDataDataDataDataDataDataDataDataDataData
    DataDataDataDataDataDataDataDataDataDataDataData
    DataDataDataDataDataDataDataDataDataDataDataData
             
                             
      

    输出:

    引导表响应

    示例2:表响应md

    
    
      
        
        
        
      
        
        
      
        Bootstrap | Tables
      
        
      
      
      
        
          

    GeeksForGeeks

                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
    Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               Head               
    DataDataDataDataDataDataDataDataDataDataDataData
    DataDataDataDataDataDataDataDataDataDataDataData
    DataDataDataDataDataDataDataDataDataDataDataData
             
                             
      

    输出:

    引导表响应md