使用Twitter Bootstrap将样式应用于表

Question

有没有人知道是否可以使用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>

我需要申请哪些课程？

Answer 1

Bootstrap提供各种表格样式.查看Base CSS -用于文档和示例的表.

以下样式提供了漂亮的表格:

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

Answer 2

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 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

Answer 3

您还可以应用TR类:信息,错误,警告或成功.

Answer 4

只是另一张好看的桌子.我添加了"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>