📌  相关文章
📜  Bootstrap-表格

📅  最后修改于: 2020-10-27 06:03:54             🧑  作者: Mango

 

Bootstrap为构建表提供了干净的布局。 Bootstrap支持的一些表元素是-

中的行上获得条纹，如以下示例所示：

现场演示
Sr.No. Tag & Description
1

Wrapping element for displaying data in a tabular format

Container element for table header rows (

) to label table columns.

Container element for table rows (

) in the body of the table.

Container element for a set of table cells (

2
3
4
or ) that appears on a single row.

5

Default table cell.
6

Special table cell for column (or row, depending on scope and placement) labels. Must be used within a

7

Description or summary of what the table holds.

基本表

如果您想要一个很好的，基本的表样式，并且只带有一些光填充和水平分隔线，请将.table的基类添加到任何表中，如以下示例所示：

现场演示



Sr.No.
Class & Description




1

.active


Applies the hover color to a particular row or cell





2

.success


Indicates a successful or positive action





3

.warning


Indicates a warning that might need attention





4

.danger


Indicates a dangerous or potentially negative action

可选表类

除了基表标记和.table类外，还有一些其他类可用于标记样式。以下各节将使您大致了解所有这些类。

条纹桌

通过添加.table-striped类，您将在
Striped Table Layout
Name City Pincode
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027

边框表

通过添加.table-bordered类，您将获得包围每个元素的边框和整个表的圆角，如以下示例所示：

现场演示

   Bordered Table Layout
   
   
      

         Name
         City
         Pincode
      

   
   
   
      

         Tanmay
         Bangalore
         560001
      

      
      

         Sachin
         Mumbai
         400003
      

      
      

         Uma
         Pune
         411027

悬停表

通过添加.table-hover类，当光标悬停在行上方时，将在行上添加浅灰色背景，如以下示例所示：

现场演示

   Hover Table Layout
   
   
      

         Name
         City
         Pincode
      

   
   
   
      

         Tanmay
         Bangalore
         560001
      

      
      

         Sachin
         Mumbai
         400003
      

      
      

         Uma
         Pune
         411027

浓缩桌

通过添加.table-condensed类，行填充被切成两半以压缩表。如以下示例所示。如果您需要更密集的信息，这将很有用。

现场演示

   Condensed Table Layout
   
   
      

         Name
         City
         Pincode
      

   
   
   
      

         Tanmay
         Bangalore
         560001
      

      
      

         Sachin
         Mumbai
         400003
      

      
      

         Uma
         Pune
         411027

上下文类

下表中显示的上下文类将允许您更改表行或单个单元格的背景颜色。

序号 类别与说明
1个 。活性

将悬停颜色应用于特定的行或单元格
2 。成功

表示成功或积极的行动
3 。警告

表示可能需要注意的警告
4 。危险

表示危险或潜在的负面行为

这些类可以应用于，或。

现场演示

   Contextual Table Layout
   
   
      

         Product
         Payment Date
         Status
      

   
   
   
      

         Product1
         23/11/2013
         Pending
      

      
      

         Product2
         10/11/2013
         Delivered
      

      
      

         Product3
         20/10/2013
         In Call to confirm
      

      
      

         Product4
         20/10/2013
         Declined

响应表

通过将任何.table包装在.table-response类中，您将使该表水平滚动到小型设备(768px以下)。当查看宽于768像素的任何内容时，这些表将不会有任何区别。

现场演示

   

      Responsive Table Layout
      
      
         

            Product
            Payment Date
            Status
         

      
      
      
         

            Product1
            23/11/2013
            Pending
         

         
         

            Product2
            10/11/2013
            Delivered
         

         
         

            Product3
            20/10/2013
            In Call to confirm
         

         
         

            Product4
            20/10/2013
            Declined