Bootstrap 报表

2021-01-22 04:13

Bootstrap 出示了一个清楚的建立报表的合理布局。下表列举了 Bootstrap 适用的一些报表原素：

table 为报表加上基本款式。 thead 报表题目行的器皿原素（ tr ），用于标志报表列。 tbody 报表行为主体中的报表行的器皿原素（ tr ）。 tr 一组出現在单行上的报表模块格的器皿原素（ td 或 th ）。 td 默认设置的报表模块格。 th 独特的报表模块格，用于标志列或行（在于范畴和部位）。务必在 thead 内应用。 caption 有关报表储存內容的叙述或小结。
基本的报表

假如您要想一个只含有内行高（padding）和水准切分的基本表，请加上 class .table，以下面案例所显示：

table > 试着一下 »

結果以下所显示：

可选择的报表类

除开基本的报表标识和 .table class，也有一些能够用于为标识界定款式的类。下边将向您详细介绍这种类。

根据加上 .table_striped class，您将在 tbody 内的行上见到条纹，以下面的案例所显示：

table > 试着一下 »

結果以下所显示：

根据加上 .table_bordered class，您将见到每一个原素周边都是有外框，且占全部报表是圆弧的，以下面的案例所显示：

table > 试着一下 »

結果以下所显示：

根据加上 .table_hover class，当指针悬停内行处时会出現浅灰情况，以下面的案例所显示：

table > 试着一下 »

結果以下所显示：

根据加上 .table_condensed class，内行人行高（padding）被切为两半，便于让表看上去更紧凑型，以下面的案例所显示。这在想让信息内容看上去更紧凑型时十分有效。

table > 试着一下 »

結果以下所显示：

下表格中列出出的左右文类容许您更改报表行或单独模块格的情况色调。

.active对某一特殊的行或模块格运用悬停色调 .success表明一个取得成功的或积极主动的姿势 .warning表明一个必须留意的警示 .danger表明一个风险的或潜伏的负面信息姿势

这种类可被运用到 tr 、 td 或 th 。

table > 试着一下 »

結果以下所显示：

响应式报表

根据把随意的 .table 包在 .table_responsive class 内，您可让报表水准翻转以适应中小型机器设备（低于 768px）。当在超过 768px 宽的大中型机器设备上查询时，您将看不见一切的区别。

div > 试着一下 »

結果以下所显示：