bootstrap5制作带背景颜色的表格

71次阅读
没有评论

要设置Bootstrap 5表格的背景颜色,您可以使用内置的背景类。以下是一个简单的示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Gutters Example</title>
    <!-- 引入 Bootstrap 样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
    <h1>带背景颜色的表格</h1>
    <table class="table table-striped table-bordered table-primary">
        <thead>
        <tr>
            <th>表头 1</th>
            <th>表头 2</th>
            <th>表头 3</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>内容 1</td>
            <td>内容 2</td>
            <td>内容 3</td>
        </tr>
        <tr>
            <td>内容 4</td>
            <td>内容 5</td>
            <td>内容 6</td>
        </tr>
        <tr>
            <td>内容 7</td>
            <td>内容 8</td>
            <td>内容 9</td>
        </tr>
        </tbody>
    </table>

</div>
<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
</body>
</html>

在上面的示例中,我们使用了内置的 .table-primary 类来设置表格的背景颜色为主题颜色。您可以替换这个类来使用其他内置的背景类,如 .table-success、.table-danger、.table-warning 等。如果您想使用自定义的背景颜色,您可以在CSS中定义一个新的类并将其应用于表格。

请注意,我们还使用了 .table-striped 和 .table-bordered 类来设置斑马纹和边框样式,以使表格更具可读性和美观性。

还可以使用css的方法设置表格的背景颜色,例如:

.table-custom {
    background-color: #f8f9fa;
}

在这个样式中,我们定义了一个名为 .table-custom 的类,用于设置表格的背景颜色。注意:table-custom需要添加在table标签中,例如:

<table class="table table-striped table-hover table-bordered table-custom">
    ...
</table>
正文完
 
评论(没有评论)