如何利用 Bootstrap 4 实现响应式表格

简介

Bootstrap 是开源的前端框架,包含了很多常用的组件,如表格、按钮、表单等。响应式(Responsive)是指网页能够尽可能适应不同的设备分辨率和屏幕尺寸,使内容在不同屏幕上都能够展现得很好。Bootstrap 应用广泛,而且支持响应式设计,其表格组件也不例外。

本文将介绍如何利用 Bootstrap 4 实现响应式表格。

第一步:创建表格

我们首先需要创建一个基本的表格。可以通过以下代码创建一个简单的表格:

------ --------------
  -------
    ----
      --- ---------------------
      --- ----------------------
      --- ----------------------
      --- ----------------------
    -----
  --------
  -------
    ----
      -------- --------
      ------------------
      ----------------------------
      --------- -------------
    -----
    ----
      -------- --------
      -----------------
      ----------------------------
      --------- -------------
    -----
  --------
--------

这将创建一个带着表头和表格内容的简单表格。

第二步:添加响应式特性

Bootstrap 提供了响应式的类来控制表格的外观和排列方式。可以通过以下类来实现响应式表格:

  • table-responsive:使表格具有响应式特性,表格会根据屏幕尺寸自适应大小。
  • thead-dark:定义表头的颜色为暗色。
  • thead-light:定义表头的颜色为浅色。
  • table-striped:给表格的奇数行添加背景色的效果。
  • table-hover:当鼠标经过表格时,表格会高亮显示。

将以上类添加到表格标签中即可,示例如下:

---- -------------------------
  ------ ------------ ------------- -------------
    ------ -------------------
      ----
        --- ---------------------
        --- ----------------------
        --- ----------------------
        --- ----------------------
      -----
    --------
    -------
      ----
        -------- --------
        ------------------
        ----------------------------
        --------- -------------
      -----
      ----
        -------- --------
        -----------------
        ----------------------------
        --------- -------------
      -----
    --------
  --------
------

这将创建一个响应式表格。当屏幕尺寸变小时,表格会自动缩小,当屏幕尺寸较小时,表格会变为可滚动的形式,更好地适应移动设备的展示。

第三步:使表格内容垂直居中

默认情况下,表格中的内容是不垂直居中的,会处于表格中央位置。使用 flexbox(弹性盒子模型) 来使表格内容垂直居中是一种好方式。

可以将以下 CSS 样式添加到表格样式中来实现:

------ ----- -- -
  -------- -----
  ------------ -------
-

这个样式将使表格的每一行都采用 flexbox,将表格中的单元格内容在行中居中显示。

结论

通过 Bootstrap 4 的表格组件,无需重新发明轮子即可创建一个简单的响应式表格。集成弹性盒子模型也是使表格内容垂直居中的好方式。对于需要在移动设备上优秀的显示,响应式表格是必不可少的。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/67205b772e7021665e01e0a9