thead-dark在使用bootstrap的angular项目中不起作用

html5 • • 问答

我尝试添加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">
....

bootstrap 的最后一个版本不支持 thead-dark？

如何进行？

回答

你能检查一下下面的代码吗？希望它对你有用。在最新版本的引导程序中，我们可以使用“table-dark”类代替“thead-dark”。您可以使用“表暗”级thead，tr和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>
  <thead>
    <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>

以上是thead-dark在使用bootstrap的angular项目中不起作用的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>