时间戳

首页 > 解决方案 > thead-dark 在使用引导程序的角度项目中不起作用

html - thead-dark 在使用引导程序的角度项目中不起作用

问题描述

我尝试添加thead-dark到我的表中，但不起作用。我正在使用引导程序。

我的代码：

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>Name</th>
            <th>Price</th>
            <th>Units In Stock</th>
        </tr>
    </thead>

引导程序：

....
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
....

它的最后一个版本的引导程序不支持黑暗？

如何进行？

标签： htmlcssangulartwitter-bootstrap

解决方案

你能检查下面的代码吗？希望它对你有用。在最新版本的引导程序中，我们可以使用“table-dark”类代替“thead-dark”。thead您可以在、tr和中使用“table-dark”类td。

请参考此链接： https ://jsfiddle.net/yudizsolutions/qomrf9pk/

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<table class="table">
  <thead class="table-dark">
    <tr>
      <th>Name</th>
      <th>Price</th>
      <th>Units In Stock</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Demo Name</td>
      <td>500</td>
      <td>50</td>
    </tr>
  </tbody>
</table>

推荐阅读