当前位置： 正文

bootstrap表table

03-19 前端/HTML/CSS 306

我们可以通过使用不同的类来样式化来创建不同类型的Bootstrap表。

Bootstrap基本表：

基本的Bootstrap表具有浅色填充物，只有水平分隔物。 .table类用于向表添加基本样式。

例：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Basic Table Example</h1>

<table class="table">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

自举条纹行表：

.table-striped类用于将斑马条纹添加到表中：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Striped Table Example</h1>

<table class="table table-striped">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap带边框表：

.table-bordered类用于在表格和单元格的所有侧面添加边框：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Bordered Table Example</h1>

<table class="table table-striped table-bordered">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

引导程序悬停行表：

.table-hover类用于在表行上启用悬停状态：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Hower rows Table Example</h1>

<table class="table table-hover">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

引导程序浓缩表：

.table-condensed类用于通过将单元格填充减半来使表更紧凑：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Condensed Table Example</h1>

<table class="table table-condensed">
  <tr><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr><td>103</td><td>Max</td><td>29</td></tr>
  <tr><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>


  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap上下文类：

上下文类用于为表行（<tr>）或表单元格（<td>）着色：

以下是不同的上下文类：

类 描述
.active 用于将悬停颜色应用于表格行或表格单元格
.success 表示成功或积极的行动
.info 它表明中性的信息变化或行动
.warning 它指定了可能需要注意的警告
.danger 它表示危险或潜在的负面行为

例：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Contextual classes</h1>

<table class="table">
  <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
  <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

响应表：

.table-sensitive类用于创建响应表。你甚至可以在小型设备（768像素以下）上打开责任表。然后，表格将水平滚动。显示宽度大于768像素，没有区别。

请参阅以下示例：

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
  <body>

<div class="container">
  <h1>Contextual classes</h1>
<div class="table-responsive">

<table class="table">
  <tr class="success"><th>Id</th><th>Name</th><th>Age</th></tr>
  <tr class="active"><td>101</td><td>Rahul</td><td>23</td></tr>
  <tr class="danger"><td>102</td><td>Umesh</td><td>22</td></tr>
  <tr class="info"><td>103</td><td>Max</td><td>29</td></tr>
  <tr class="warning"><td>104</td><td>Ajeet</td><td>21</td></tr>
</table>

</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap 4中一些新添加的表：

黑/黑表

.table-dark类用于向表添加黑色背景：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Black/Dark Table</h2>
  <p>The .table-dark class is used to add a black background to the table:</p>            
  <table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

深色条纹桌

结合使用.table-dark类和.table-striped类，以创建一个暗条纹表：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Dark Striped Table</h2>
  <p>Combine the .table-dark class and .table-striped class to create a dark, striped table: </p>            
  <table class="table table-dark table-striped">
        <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

可悬停的黑色桌子

.table-hover类用于在表行上添加悬停效果（灰色背景色）：

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Hoverable Dark Table</h2>
  <p>The .table-hover class is used to add a hover effect (grey background color) on table rows:</p>            
  <table class="table table-dark table-hover">
  <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

Bootstrap 4上下文表

上下文类可用于为整个表（<table>），表行（<tr>）或表单元格（<td>）着色。

可以使用的类是：

.table-primary，.table-success，.table-info，.table-warning，.table-danger，.table-active，.table-secondary，.table-light和.table-dark：

让我们以一个示例来看一下Bootstrap 4表中所有上下文类的用法。

例

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Contextual Classes Example</h2>
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td>
        <td>A</td>
        <td>a@jtp.com</td>
      </tr>      
      <tr class="table-primary">
        <td>Primary</td>
        <td>B</td>
        <td>b@jtp.com</td>
      </tr>
      <tr class="table-success">
        <td>Success</td>
        <td>C</td>
        <td>c@jtp.com</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td>
        <td>D</td>
        <td>d@jtp.com</td>
      </tr>
      <tr class="table-info">
        <td>Info</td>
        <td>E</td>
        <td>e@jtp.com</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td>
        <td>F</td>
        <td>f@jtp.com</td>
      </tr>
      <tr class="table-active">
        <td>Active</td>
        <td>G</td>
        <td>g@jtp.com</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td>
        <td>H</td>
        <td>h@jtp.com</td>
      </tr>
      <tr class="table-light">
        <td>Light</td>
        <td>I</td>
        <td>j@jtp.com</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td>
        <td>K</td>
        <td>k@jtp.com</td>
      </tr>
    </tbody>
  </table>
</div>

</body>
</html>

表头颜色

你可以通过使用.thead-dark类向表头添加黑色背景，并使用.thead-light类向表头添加灰色背景来更改表头的背景颜色。

例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Table Head Colors</h2>
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
            <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
           <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>

    </tbody>
  </table>
</div>

</body>
</html>

小桌子

.table-sm类用于通过将单元格填充减半来使表变小。

例：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Small Table Example</h2>
  <p>The .table-sm class is used to make the table smaller by cutting cell padding in half.</p>
  <table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Ajeet</td>
        <td>Kumar</td>
        <td>ajeet@jtp.com</td>
      </tr>
      <tr>
        <td>Mahesh</td>
        <td>Sharma</td>
        <td>mahesh@jtp.com</td>
      </tr>
      <tr>
        <td>Sonoo</td>
        <td>Jaiswal</td>
        <td>sonoo@jtp.com</td>
      </tr>

    </tbody>
  </table>
</div>

</body>
</html>
微信公众号
手机浏览(小程序)
0
分享到：

猜你喜欢

如何在Google AMP的amp-carousel中添加灯箱效果？
前端/HTML/CSS

03-21 801
从服务器响应(请求)返回HTML，好的还是不好的做法？
前端/HTML/CSS

03-20 738
如何使用自己的logo创建自定义加载栏
前端/HTML/CSS

03-20 692
如何在Dompdf中将图像与表格单元格的底部对齐
前端/HTML/CSS

03-20 671
如何使用wkhtmltopdf在PDF上添加新页面
前端/HTML/CSS

03-20 737
使用javascript html5在画布上绘制点(圆)
前端/HTML/CSS

03-20 730
没有账号？ 忘记密码？