將樣式應用於使用Twitter Bootstrap的表格

有誰知道是否可以使用Twitter Bootstrap對錶格應用樣式？我可以在一些較老的教程中看到一些表格示例，但在Bootstrap網站本身沒有。將樣式應用於使用Twitter 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>

我需要申請哪些課程？

來源

2012-03-07 Chin

看看這裏以及http://v4-alpha.getbootstrap.com/content/tables/ – 2016-04-26 16:34:02

178

Bootstrap提供各種表格樣式。有關文檔和示例，請參閱Base CSS - Tables。

以下樣式提供了很大的期待表：

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

來源

2012-03-07 04:11:34

完美 - 感謝指出我在正確的方向。 – Chin 2012-03-07 04:26:45

您也可以申請TR類：信息，錯誤，警告或成功。

來源

2013-03-12 19:09:57 user1695595

只是另一張好看的桌子。我添加了「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>

來源

2013-07-26 21:49:22 itmilos

Twitter引導表可以設計風格和設計良好。你可以在你的桌子上添加一些類，並且它看起來很好。您可以使用它在你的數據報告，顯示信息等

enter image description here 您可以使用：

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>[email protected]</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>[email protected]</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>[email protected]</td> 
    </tr> 
    <tr> 
    <td height="29">2</td> 
    <td>Yan Chapel</td> 
    <td>Toronto Australia</td> 
    <td>[email protected]</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

來源

2013-09-12 22:18:24

引導提供了各種類表

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

來源

2015-02-13 04:59:30 Uiupdates

您可以添加上下文類，每一行如下：

<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中調用它們。

來源

2016-08-10 10:08:53

將樣式應用於使用Twitter Bootstrap的表格

回答

相關問題