Bootstrap5设置彩色表格单元格

97次阅读
没有评论

Bootstrap5提供了很多类名来为表格单元格设置不同的颜色和样式,可以根据需要自由选择。下面是一个示例代码,演示了如何根据表格单元格设置彩色表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colored Table Cells with Bootstrap 5</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
    <table class="table table-bordered table-striped">
        <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td class="table-primary">Apple</td>
            <td>$1.99</td>
            <td class="table-success">In Stock</td>
        </tr>
        <tr>
            <td class="table-secondary">Orange</td>
            <td>$2.49</td>
            <td class="table-warning">Out of Stock</td>
        </tr>
        <tr>
            <td class="table-success">Banana</td>
            <td>$0.99</td>
            <td class="table-danger">Discontinued</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

在这个示例中,我们使用了Bootstrap提供的一些表格单元格类,例如table-primary、table-secondary、table-success、table-danger和table-warning等。这些类会根据其名称的含义,分别为单元格设置不同的颜色和样式。我们还使用了table-bordered和table-striped类,分别为表格添加了边框和条纹效果。

这个示例演示了如何使用Bootstrap5根据表格单元格来设置彩色表格。根据需要可以自由选择和组合使用不同的表格单元格类,来创建出更多样化的表格样式。

正文完
 
评论(没有评论)