Bootstrap 3 之 Bootstrap 表格

Bootstrap 提供了一套简洁美观的表格样式,使得在网页中展示数据变得更加易读和吸引人。在本章节中,我们将详细介绍 Bootstrap 表格的用法。

创建基本表格

要创建一个基本的表格,你只需要简单地使用 <table> 标签,并加上相应的 Bootstrap 类即可。下面是一个简单的示例:

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

在上面的示例中,我们使用了 Bootstrap 的 table 类来渲染表格,并使用 theadtbody 标签来定义表头和表体部分。每行数据使用 tr 标签,每列数据使用 tdth 标签。

响应式表格

Bootstrap 还提供了响应式表格的样式,使得在不同设备上表格能够自动适配。要创建一个响应式表格,只需要在 table 标签上加上 table-responsive 类即可。下面是一个示例:

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

在上面的示例中,我们将表格包裹在 table-responsive 类的 div 元素中,这样表格在小屏幕设备上会自动水平滚动以适应屏幕大小。

表格样式

Bootstrap 还提供了多种表格样式类,可以让你自定义表格的外观。下面列举一些常用的表格样式类:

  • table-striped:为表格的奇数行添加背景色,增强可读性。
  • table-bordered:为表格添加边框。
  • table-hover:鼠标悬停时高亮当前行。
  • table-condensed:紧凑型表格,减小行高。

你可以根据需要在表格的 table 标签上添加这些类来自定义表格样式。

以上就是关于 Bootstrap 表格的介绍,希望能帮助你更好地使用 Bootstrap 来创建漂亮的网页表格。


上一篇:Bootstrap 代码
下一篇:Bootstrap 表单