对带 Bootstrap 的表应用样式

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

我需要申请哪些课程？

201392 次浏览
小开
最佳答案

Bootstrap 提供了各种表格样式。

下面这种风格的表格看起来很棒:

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

您还可以应用 TR 类: info、 error、 police 或 Success。

小开

只是另一个好看的表。我添加了“表悬停”类，因为它提供了一个漂亮的悬停效果。

   <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 的桌子可以设计得很有风格。您可以设置表的样式，只需在表上添加一些类，它就会看起来很漂亮。您可以在数据报告、显示信息等中使用它。

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>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-”。

    <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

小开

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


提交答案