📜  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