Bootstrap5创建基础表格

113次阅读
没有评论

Bootstrap 5提供了许多表格样式,可以快速创建基础表格。以下是一个简单的基础表格示例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Bootstrap Basic Table Example</title>
    <!--引入Bootstrap CSS文件-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container">
      <h1>Basic Table Example</h1>
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--引入Bootstrap JS文件-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
  </body>
</html>

在上面的示例中,我们使用了Bootstrap提供的.table类来定义表格。.table类具有以下特性:

  • 添加水平线和垂直线
  • 添加交替的背景颜色
  • 添加鼠标悬停效果

我们还使用了.container类来包裹内容,使其居中对齐。在表格中,我们使用了<thead>元素来定义表头,<th>元素来定义表头单元格,<tbody>元素来定义表格主体,<tr>元素来定义表格行,<td>元素来定义表格单元格。

此外,我们在页面头部引入了Bootstrap的CSS和JS文件,以便使用Bootstrap的样式和脚本。

以上是一个简单的基础表格示例,你可以根据自己的需求进行修改和定制。

正文完
 
评论(没有评论)