引导你的网页 4 - 整理表格

分享于 

10分钟阅读

Web开发

  繁體

序曲

继续从引导你的网页 3 - 制作文本,我们离开。 你已经学习了如何创建HTML文本的Bootstrap,我们现在应该了解 Bootstrap 如何装饰HTML表。

修整表格

我们使用HTML表格将数据列成行和列,以便在网页上显示。 默认的HTML table 按照以下类的Bootstrap 定位方式进行样式化 <表> 元素,我们来看看 <表> 目标类一个一个。

基本样式

添加 Bootstrap 表格 类的开始标记 <表> 元素如下面的代码所示,在下面的代码中将它的下载到 :

<divclass="container"><h2>Bootstrap's Table - Basic Style</h2> 
 <tableclass="table"><thead><tr><th>Name</th><th>Assignment</th><th>Project</th><th>Exam</th></tr></thead><tbody><tr><td>Peter</td><td>80</td><td>65</td><td>77</td></tr><tr><td>Mary</td><td>82</td><td>67</td><td>70</td></tr><tr><td>Linda</td><td>68</td><td>55</td><td>60</td></tr></tbody></table></div>

iPhone 7 还没出来,我们已经在iPhone上获取细节 8,或者不管是想到下一步。 表格 类将使用灯光和水平分隔符来样式化 HTML table,如图 1 below 所示,或者在第2 行显示它 :

Figure 1 : Bootstrap's Basic Table Style

图 1: Bootstrap table 风格的基础

行条纹

包含 。striped 类旁边 表格 在前面的代码中,换句话说, <表 class="表格表格带区"><tbody> 中的表格行添加斑纹条纹,如图 2所示,或者在第2 行查看它:

Figure 2 : Table with Striped Rows

图 2: 带条纹行的table

你可以在线下载代码

桌面边缘

类似地,包括 表格边框 类旁边 表格 类,换句话说, <表 class="表格表格边缘"> 在表格和单元格的所有侧面添加边框,如下面图 3所示,或者在第2 行查看它:

Figure 3 : Bordered Table and Cells

图 3: 带边界的table 和单元格

你可以在线下载代码

悬停行

当你将鼠标悬停在它上方时,只需包含一个 表格悬停 类旁边 表格 类,换句话说, <表 class="表格表格悬停"> 如图 4所示,below 或者在第行查看 :

Figure 4 : Hovering Effect on Rows

图 4: 行的悬停效果

你可以在线下载代码

压缩表

通过包含一个 table,可以使更为 compact 表压缩 类旁边 表格 类,换句话说, <表 class="表格表格"> ,图 5所示,将单元格填充缩小一半,或者在 line line查看 :

Figure 5 : Condensed Table

图 5: condensed 表

你可以在线下载代码

上下文类

Bootstrap 提供上下文类,用于通过 HTML table 中的行和单元格来传递含义。 他们是 活动 , 成功 , 信息 , 警告 以及 危险

若要将这些类应用到 table 行,请将它们添加到打开 <tr> 标记如下面的代码所示,或者在 line line上下载它:

<h2>Bootstrap's Table - Contextual Rows</h2><tableclass="table"><thead><tr><th>Contextual Class</th><th>Description</th></tr></thead><tbody><trclass="active"><td><code>.active</code></td><td>Apply the hover color to this row.</td></tr><trclass="success"><td><code>.success</code></td><td>Indicates a successful situation in this row.</td></tr><trclass="info"><td><code>.info</code></td><td>Convey information in this row.</td></tr><trclass="warning"><td><code>.warning</code></td><td>Conveys a warning to draw attentions in this row.</td></tr><trclass="danger"><td><code>.danger</code></td><td>Indicates a dangerous situation in this row.</td></tr></tbody></table>

下面的代码将按照下面图 6所示的上下文着色行呈现该表,或者在第2 行查看 :

Figure 6 : Contextual Table Rows

图 6: 上下文 table 行

若要将这些类应用到 table 单元格,请将它们添加到打开 <td> 标记如下面的代码所示,或者在 line line上下载它:

<h2>Bootstrap's Table - Contextual Cells</h2><tableclass="table"><thead><tr><th>Contextual Class</th><th>Description</th></tr></thead><tbody><tr><td><code>.active</code></td><tdclass="active">Apply the hover color to this cell.</td></tr><tr><td><code>.success</code></td><tdclass="success">Indicates a successful situation in this cell.</td></tr><tr><td><code>.info</code></td><tdclass="info">Convey information in this cell.</td></tr><tr><td><code>.warning</code></td><tdclass="warning">Conveys a warning to draw attentions in this cell.</td></tr><tr><td><code>.danger</code></td><tdclass="danger">Indicates a dangerous situation in this cell.</td></tr></tbody></table>

下面的代码将使用上下文颜色单元格呈现表格,如下面图 7所示,或者在第2 行查看 :

Figure 7 : Contextual Table Cells

图 7: 上下文 table 单元格

响应表

Bootstrap 为创建响应式 HTML table 提供了 .table-responsive 类,它将水平滚动到 xs大小的设备( 例如移动电话)。 为此,请将整个 HTML table inside 包装为 <div> 它接受 .table-responsive 类属性,如下面的代码所示,或者在 line中将它的下载到 :

<divclass="container"><h2>Bootstrap's Table - Responsive</h2><divclass="table-responsive"><tableclass="table"><thead><tr><th>Name</th><th>Assignment</th><th>Project</th><th>Exam</th></tr></thead><tbody><tr><td>Peter</td><td>80</td><td>65</td><td>77</td></tr><tr><td>Mary</td><td>82</td><td>67</td><td>70</td></tr><tr><td>Linda</td><td>68</td><td>55</td><td>60</td></tr></tbody></table></div><footer>© 2016 Peter Leow</footer></div>

如果你在中显示了水平滚动条,如图 8所示,如图3 所示,则这里代码将呈现为水平滚动条,或者在第行显示它:

Figure 8 : Responsive Table

图 8: 响应表

但是,如果没有在这个堆栈应答中提供的修复程序,这个功能就不能在 Firefox 浏览器上运行。

下一个

你已经了解了如何使用 Bootstrap 来修饰HTML表。 想知道下一次出货时有什么存货? 你会在适当的时候发现。 同时,请耐心等待。

的博客中,引导你的网页 4 - 整理表是首先出现在的代码上。


相关文章