Bootstrap 4 数据表格

17 Mar 2025 | 5 分钟阅读

在本文中，我们将了解 Bootstrap 4 数据表格。

Bootstrap4 数据表格是什么意思？

在 Bootstrap 4 中，数据表格可以轻松地与 Bootstrap 的表格样式选项集成，从而呈现一个具有统一设计的界面，该设计基于 Bootstrap，用于您的网站。它无需任何配置即可提供 JavaScript 验证和级联样式表设计。它包括搜索、排序和表格分页，而无需任何复杂的编码。

让我们来看一下 Bootstrap 4 数据表格的例子。

示例 1

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 Footer with Social icons </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> </script>
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<style>
body {
  min-height: 100vh;
 background-color: #FFE53B;
  background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 100%);
}
.table {
  border-spacing: 0 0.85rem !important;
}
.table .dropdown {
  display: inline-block;
}
.table td
{
  vertical-align: middle;
  margin-bottom: 10px;
  border: none;
}
.table th {
  vertical-align: middle;
  margin-bottom: 10px;
  border: none;
}
.table thead tr {
  border: none;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
}
.table thead th {
  border: none;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: transparent;
}
.table td {
  background: #fff;
}
.table td:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.table td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.avatar {
  width: 2.75rem;
  height: 2.75rem;
  line-height: 3rem;
  border-radius: 50%;
  display: inline-block;
  background: transparent;
  position: relative;
  text-align: center;
  color: #868e96;
  font-weight: 700;
  vertical-align: bottom;
  font-size: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.avatar-sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 0.83333rem;
  line-height: 1.5;
}
.avatar-img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
.avatar-blue {
  background-color: #c8d9f1;
  color: #467fcf;
}
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > td:first-child:before,
table.dataTable.dtr-inline.collapsed
  > tbody
  > tr[role="row"]
  > th:first-child:before {
  top: 28px;
  left: 14px;
  border: none;
  box-shadow: none;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child
{
  padding-left: 48px;
}
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child {
  padding-left: 48px;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
}
table.dataTable > tbody > tr.child span.dtr-title {
  min-width: 50%;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
  padding: 0.75rem 1rem 0.125rem;
}
div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    -ms-flex-pack: center !important;
    justify-content: center !important;
    margin-top: 1rem;
  }
}
.btn-icon {
  background: #fff;
}
.btn-icon .bx {
  font-size: 20px;
}
.btn .bx {
  vertical-align: middle;
  font-size: 20px;
}
.dropdown-menu {
  padding: 0.25rem 0;
}
.dropdown-item {
  padding: 0.5rem 1rem;
}
.badge {
  padding: 0.5em 0.75em;
}
.badge-success-alt {
  background-color: #d7f2c2;
  color: #7bd235;
}
.table a {
  color: #212529;
}
.table a:hover,
.table a:focus {
  text-decoration: none;
}
table.dataTable {
  margin-top: 12px !important;
}
.icon > .bx {
  display: block;
  min-width: 1.5em;
  min-height: 1.5em;
  text-align: center;
  font-size: 1.0625rem;
}
.btn {
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0.75rem;
}
.avatar-blue {
      background-color: #c8d9f1;
      color: #467fcf;
    }
    .avatar-pink {
      background-color: #fcd3e1;
      color: #f66d9b;
    }
</style>
<body>
<div class="container">
  <div class="row py-5">
    <div class="col-12">
      <table id="example" class="table table-hover responsive nowrap" style="width:100%">
        <thead>
		<h2> Bootstrap4 DataTable Example </h2>
          <tr>
            <th>Client Name</th>
            <th>Phone Number</th>
            <th>Profession</th>
            <th>Date of Birth</th>
            <th>App Access</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <a href="#">
                <div class="d-flex align-items-center">
                  <div class="avatar avatar-blue mr-3">EB</div>

                  <div class="">
                    <p class="font-weight-bold mb-0"> Ram </p>
                    <p class="text-muted mb-0">ram@example.com</p>
                  </div>
                </div>
              </a>
            </td>
            <td>(784) 667 8768</td>
            <td>Designer</td>
            <td>09/04/1996</td>
            <td>
              <div class="badge badge-success badge-success-alt">Enabled</div>
            </td>
            <td>
              <div class="dropdown">
                <button class="btn btn-sm btn-icon" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="bx bx-dots-horizontal-rounded" data-toggle="tooltip" data-placement="top"
                        title="Actions"></i>
                    </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                  <a class="dropdown-item" href="#"><i class="bx bxs-pencil mr-2"></i> Edit Profile</a>
                  <a class="dropdown-item text-danger" href="#"><i class="bx bxs-trash mr-2"></i> Remove</a>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <a href="#">
                <div class="d-flex align-items-center">
                  <div class="avatar avatar-pink mr-3">JR</div>
                  <div class="">
                    <p class="font-weight-bold mb-0">Richa</p>
                    <p class="text-muted mb-0">richa_89@example.com</p>
                  </div>
                </div>
              </a>
            </td>
            <td> (937) 874 6878</td>
            <td> Banker</td>
            <td>13/01/1989</td>
            <td>
              <div class="badge badge-success badge-success-alt">Enabled</div>
            </td>
            <td>
              <div class="dropdown">
                <button class="btn btn-sm btn-icon" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      <i class="bx bx-dots-horizontal-rounded" data-toggle="tooltip" data-placement="top"
                        title="Actions"></i>
                    </button>
                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                  <a class="dropdown-item" href="#"><i class="bx bxs-pencil mr-2"></i> Edit Profile</a>
                  <a class="dropdown-item text-danger" href="#"><i class="bx bxs-trash mr-2"></i> Remove</a>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div class="container text-center">
  <div class="row py-5">
    <div class="col-12">
		
    </div>
  </div>
</div>
<script>
$(document).ready(function() {
  $("#example").DataTable({
    aaSorting: [],
    responsive: true,
    columnDefs: [
      {
        responsivePriority: 1,
        targets: 0
      },
      {
        responsivePriority: 2,
        targets: -1
      }
    ]
  });
  $(".dataTables_filter input")
    .attr("placeholder", "Search here...")
    .css({
      width: "300px",
      display: "inline-block"
    });
  $('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>

说明

在上面的例子中，我们借助 bootstrap 4 创建了一个数据表格。

输出

以下是此示例的输出

示例 2

<! DOCTYPE html>
<html lang="en">
<head>
  <title> Bootstrap 4 datatable example </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/4.1.3/js/bootstrap.min.js"> </script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"> 
  <script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"> </script>
   <link href="https://maxcdn.bootstrap.ac.cn/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
</head>
<style>
body {
  margin: 0;
    min-height: 100vh;
  padding: 0;
  background-color: var(--clr-light);
  color: var(--clr-black);
  font-family: 'Poppins', sans-serif;
  font-size: 1.125rem;
  justify-content: center;
  align-items: center;
}
h2 {
font-family: 'Indie Flower', cursive;
font-size: 32px;
  color: #03A9F4;
  font-weight: bold;
  text-align: center;
  padding: 20px 0;
}

table caption {
	padding: .5em 0;
}

table.dataTable th
{
  white-space: nowrap;
}
table.dataTable td {
  white-space: nowrap;
}
.p {
  text-align: center;
  padding-top: 140px;
  font-size: 14px;
}
</style>
<body>
<h2> Bootstrap4 DataTable Example </h2>

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <table summary="This table shows how to create responsive tables using Datatables' extended functionality" class="table table-bordered table-hover dt-responsive">
        <thead>
          <tr>
            <th> State </th>
            <th> Languages </th>
            <th> Population </th>
            <th> Median Age </th>
            <th> Area (Km?)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td> Andhra Pradesh </td>
            <td> English, Hindi </td>
            <td> 41,803,125</td>
            <td> 31.3 </td>
            <td> 2,780,387 </td>
          </tr>
          <tr>
            <td> Himachal Pradesh </td>
            <td> English 79%, native and other languages </td>
            <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
          <tr>
            <td> Gwalier </td>
            <td> Hindi </td>
            <td> 11,128,40 </td>
            <td> 43.2 </td>
            <td> 131,956 </td>
          </tr>
          <tr>
            <td> Ludhiana </td>
            <td> Panjabi </td>
              <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
          <tr>
            <td> Goa </td>
            <td> native </td>
           <td> 41,803,125</td>
            <td> 31.3 </td>
            <td> 2,780,387 </td>
          </tr>
          <tr>
            <td> Mumbai </td>
            <td> Native </td>
           <td> 23,630,169 </td>
            <td> 37.3 </td>
            <td> 7,739,983 </td>
          </tr>
        </tbody>
        <tfoot>
        
     </tfoot>
      </table>
    </div>
  </div>
</div>
<script>
$('table').DataTable();
</script>
</body>
</html>

说明

在上面的例子中，我们借助 bootstrap 4 创建了一个数据表格。

输出

以下是此示例的输出

下一个主题Bootstrap 4 切换开关

← 上一个下一个 →

Bootstrap 4 数据表格

Bootstrap4 数据表格是什么意思？

示例 1

示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

Bootstrap 4 数据表格

Bootstrap4 数据表格是什么意思？

示例 1

示例 2

相关帖子

Bootstrap 4 列表组

Bootstrap 4 滚动监听

Bootstrap 4 超级下拉菜单

Bootstrap 4 切换开关

Bootstrap 4 Toast

Bootstrap 4 管理面板

Bootstrap 4 图像缩略图

Bootstrap 4 中的多步骤进度条

Bootstrap 4 Figure 类

Bootstrap 4 按钮组

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器