使用Twitter Bootstrap将样式应用于表

有谁知道可以通过Twitter Bootstrap在表格上应用样式吗？我可以在一些较旧的教程中看到一些表示例，但在Bootstrap网站本身上却看不到。

我尝试进行设置，但是页面中的表几乎没有样式适用于它们。

<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Language</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Some</td>
            <td>One</td>
            <td>English</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Joe</td>
            <td>Sixpack</td>
            <td>English</td>
        </tr>
    </tbody>
</table>

我需要申请什么课程？

Bootstrap提供各种表格样式。看一下基础CSS-有关文档和示例的表。

以下样式提供了精美的表格：

<table class="table table-striped table-bordered table-condensed">
  ...
</table>

Twitter引导表的样式和设计合理。您只需在表上添加一些类即可对表进行样式设置，看起来会很不错。您可以在数据报告，显示信息等上使用它。

您可以使用 ：

basic table
Striped rows
Bordered table
Hover rows
Condensed table
Contextual classes
Responsive tables

条纹行表：

    <table class="table table-striped" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Name</th>
    <th>Address</th>
    <th>mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    </tbody>
    </table>

浓缩桌：

压缩表时，您需要添加类class =“ table table-condensed”。

    <table class="table table-condensed" width="647">
    <thead>
    <tr>
    <th>#</th>
    <th>Sample Name</th>
    <th>Address</th>
    <th>Mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1</td>
    <td>Thomas bell</td>
    <td>Brick lane, London</td>
    <td>thomas@yahoo.com</td>
    </tr>
    <tr>
    <td height="29">2</td>
    <td>Yan Chapel</td>
    <td>Toronto Australia</td>
    <td>Yan@yahoo.com</td>
    </tr>
    <tr>
    <td>3</td>
    <td>Pit Sampras</td>
    <td>Berlin, Germany</td>
    <td>Pit @yahoo.com</td>
    </tr>
    <tr>
    <td></td>
    <td colspan="3" align="center"></td>
    </tr>
    </tbody>
    </table>

参考：http : //twitterbootstrap.org/twitter-bootstrap-table-example-tutorial

您还可以应用TR类：信息，错误，警告或成功。

只是另一个好看的桌子。我添加了“ table-hover”类，因为它提供了很好的悬停效果。

   <h3>NATO Phonetic Alphabet</h3>    
   <table class="table table-striped table-bordered table-condensed table-hover">
   <thead>
    <tr> 
        <th>Letter</th>
        <th>Phonetic Letter</th>

    </tr>
    </thead>
  <tr>
    <th>A</th>
    <th>Alpha</th>

  </tr>
  <tr>
    <td>B</td>
    <td>Bravo</td>

  </tr>
  <tr>
    <td>C</td>
    <td>Charlie</td>

  </tr>

</table>

引导程序为表提供各种类

 <table class="table"></table>
 <table class="table table-bordered"></table>
 <table class="table table-hover"></table>
 <table class="table table-condensed"></table>
 <table class="table table-responsive"></table>

您可以将上下文类添加到每一行，如下所示：

<tr class="table-success"></tr>
<tr class="table-error"></tr>
<tr class="table-warning"></tr>
<tr class="table-info"></tr>
<tr class="table-danger"></tr>

您也可以将它们添加到与上述相同的表数据中

您可以通过将类设置为table-sm等来设置表的大小。

您可以添加自定义类并添加自己的样式：

<table class="table">
  <thead style = "color:red;background-color:blue">
    <tr>
      <th></th>
      <th>First Name</th>
      <th>Last Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>   
      <td>Asdf</td>
      <td>qwerty</td>
    </tr>
  </tbody>
</table>

这样，您可以添加自定义样式。我已经展示了内联样式，例如它是如何工作的，您可以添加类并在CSS中调用它们。