【问题标题】:how to add a checkbox in bootstrap table?如何在引导表中添加复选框?
【发布时间】:2021-05-08 09:57:17
【问题描述】:

我想在这个引导表中添加一个复选框,而不是“#”符号……请给我任何参考,我可以从中了解如何做这些事情,就像我们有关于引导表的明确文档一样。 ...我只需将该代码复制到我的 vs 代码中

image of bootstrap table

这是我从这个链接https://getbootstrap.com/docs/4.4/content/tables/复制的代码:

<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

【问题讨论】:

  • &lt;th scope="col"&gt;#&lt;/th&gt; 更改为 &lt;th scope="col"&gt;&lt;input type="checkbox" /&gt;&lt;/th&gt;
  • 您是否在文件中添加了 Bootstrap 4 CDN。

标签: reactjs bootstrap-4 react-bootstrap react-bootstrap-table


【解决方案1】:

在您的文件中添加 CDN,让我知道它是否正常工作。

  • 如果没有 CDN,它看起来是一样的。

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    

【讨论】:

    【解决方案2】:

    正如 codeMonkey 已经评论的那样,这对我有用:

        <th scope="col">#</th>
    

       <th scope="col"><input type="checkbox" /></th>
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-05-12
      • 1970-01-01
      • 1970-01-01
      • 2013-03-10
      相关资源
      最近更新 更多