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

我需要申请哪些课程?

6 Solutions collect form web for “使用Twitter Bootstrap将样式应用于表格”

Bootstrap提供各种表格样式。 看一下Base CSS – Tables的文档和例子。

下面的风格给出了很好看的表格:

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

Twitter引导表可以风格和devise良好。 你可以在你的桌子上添加一些类,这样看起来不错。 您可以在您的数据报告中使用它,显示信息等

在这里输入图像说明 您可以使用 :

 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

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

只是另一个好看的桌子。 我添加了“桌面hover”类,因为它提供了一个不错的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> 

bootstrap为表提供各种类

  <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中调用它们。

  • 什么是最好的Twitter的API包装/库的.NET?
  • TwitteR,ROAuth和Windows:注册成功,但证书validation失败
  • textarea中的Twitter式自动完成
  • 在其他应用程序 - Android的Twitter应用程序中打开页面
  • 垂直分频器在Bootstrap 3中不起作用
  • 桌面应用程序仅支持oauth_callback值“oob”/ oauth / request_token
  • iOS 5的Twitter框架:Tweeting没有用户input和确认(模态视图控制器)
  • 如何使用Twitter的Bootstrap在线显示列表
  • {“<用户xmlns =''>不是预期的。}反序列化Twitter的XML
  • 引导中心标题
  • Facebook和Twitterbutton错位