📅 最后修改于: 2020-12-19 02:49:00 🧑 作者: Mango
我们可以通过使用不同的类来样式化来创建不同类型的Bootstrap表。
基本的Bootstrap表具有浅色填充物，只有水平分隔物。 .table类用于向表添加基本样式。
例：
Job
Basic Table Example
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
.table-striped类用于将斑马条纹添加到表中：
Job
Striped Table Example
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
.table-bordered类用于在表格和单元格的所有侧面添加边框：
Job
Bordered Table Example
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
.table-hover类用于在表行上启用悬停状态：
Job
Hower rows Table Example
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
.table-condensed类用于通过将单元格填充减半来使表更紧凑：
Job
Condensed Table Example
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
上下文类用于为表行(
以下是不同的上下文类：
| Class | Description |
|---|---|
| .active | It is used to apply the hover color to the table row or table cell |
| .success | It indicates a successful or positive action |
| .info | It indicates a neutral informative change or action |
| .warning | It specifies a warning that might need attention |
| .danger | It indicates a dangerous or potentially negative action |
例：
Job
Contextual classes
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
.table-sensitive类用于创建响应表。您甚至可以在小型设备(768像素以下)上打开责任表。然后，表格将水平滚动。显示宽度大于768像素，没有区别。
请参阅以下示例：
Job
Contextual classes
Id Name Age 101 Rahul 23 102 Umesh 22 103 Max 29 104 Ajeet 21
Bootstrap 4中一些新添加的表：
黑/黑表
.table-dark类用于向表添加黑色背景：
例
Bootstrap Example
Black/Dark Table
The .table-dark class is used to add a black background to the table:
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com
深色条纹桌
结合使用.table-dark类和.table-striped类，以创建一个暗条纹表：
例
Bootstrap Example
Dark Striped Table
Combine the .table-dark class and .table-striped class to create a dark, striped table:
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com
可悬停的黑色桌子
.table-hover类用于在表行上添加悬停效果(灰色背景色)：
例
Bootstrap Example
Hoverable Dark Table
The .table-hover class is used to add a hover effect (grey background color) on table rows:
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com
Bootstrap 4上下文表
上下文类可用于为整个表(
)，表行()或表单元格()着色。
可以使用的类是：
.table-primary，.table-success，.table-info，.table-warning，.table-danger，.table-active，.table-secondary，.table-light和.table-dark：
让我们以一个示例来看一下Bootstrap 4表中所有上下文类的用法。
例
Bootstrap Example
Contextual Classes Example
Firstname
Lastname
Email
Default
A
a@jtp.com
Primary
B
b@jtp.com
Success
C
c@jtp.com
Danger
D
d@jtp.com
Info
E
e@jtp.com
Warning
F
f@jtp.com
Active
G
g@jtp.com
Secondary
H
h@jtp.com
Light
I
j@jtp.com
Dark
K
k@jtp.com
表头颜色
您可以通过使用.thead-dark类向表头添加黑色背景，并使用.thead-light类向表头添加灰色背景来更改表头的背景颜色。
例：
Bootstrap Example
Table Head Colors
Firstname
Lastname
Email
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com
Firstname
Lastname
Email
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com
小桌子
.table-sm类用于通过将单元格填充减半来使表变小。
例：
Bootstrap Example
Small Table Example
The .table-sm class is used to make the table smaller by cutting cell padding in half.
Firstname
Lastname
Email
Ajeet
Kumar
ajeet@jtp.com
Mahesh
Sharma
mahesh@jtp.com
Sonoo
Jaiswal
sonoo@jtp.com