使用Twitter Bootstrap将样式应用于表
使用Twitter Bootstrap将样式应用于表
提问于 2012-03-07 12:00:49
有没有人知道是否可以使用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>我需要申请哪些课程？
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-03-07 12:11:34
Bootstrap提供了多种表格样式。看看Base CSS - Tables中的文档和示例。
下面的样式提供了非常漂亮的表格：
<table class="table table-striped table-bordered table-condensed">
...
</table>Stack Overflow用户
发布于 2013-09-13 06:18:25
Twitter bootstrap表可以设置样式并进行良好的设计。你可以在你的表格上添加一些类来设计你的表格，它看起来会很漂亮。您可以在数据报告、显示信息等方面使用它。
您可以使用：
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
Stack Overflow用户
发布于 2013-03-13 03:09:58
您还可以应用TR类: info、error、warning或success。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9595639
复制相关文章
相似问题