Bootstrap创建深色条纹表格

119次阅读
没有评论

要创建深色条纹表格,可以使用Bootstrap5.1.3中的类来设置表格的颜色和样式。具体步骤如下:

  1. 在<head>标签中引入Bootstrap5.1.3的CSS文件和JS文件:
<head>
  <meta charset="UTF-8">
  <title>深色条纹表格示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
  1. 创建一个<table>标签,并添加.table和.table-striped类来设置表格的样式:
<table class="table table-striped">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>城市</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>22</td>
      <td>北京</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>上海</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>30</td>
      <td>广州</td>
    </tr>
  </tbody>
</table>
  1. 可以添加更多的类来自定义表格的样式,例如添加.table-dark类来设置表格的背景色为深色:
<table class="table table-striped table-dark">
  <!-- 表格内容 -->
</table>

完整示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>深色条纹表格示例</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
  <table class="table table-striped table-dark">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>张三</td>
        <td>22</td>
        <td>北京</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>25</td>
        <td>上海</td>
      </tr>
      <tr>
        <td>王五</td>
        <td>30</td>
        <td>广州</td>
      </tr>
    </tbody>
  </table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

运行以上代码,就可以看到一个具有深色背景和条纹行样式的表格。

正文完
 
评论(没有评论)