Java单体应用 - 常用框架 - 01.Bootstrap - 表格

原文地址：
更多教程：光束云 - 免费课程

表格 序号 文内章节 视频
1     -  
2     -  
3     -  
4     -  

请参照如上章节导航进行阅读

1.概述

Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素：

标签 描述
<table>   为表格添加基础样式  
<thead>   表格标题行的容器元素（<tr>），用来标识表格列  
<tbody>   表格主体中的表格行的容器元素（<tr>）  
<tr>   一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）  
<td>   默认的表格单元格  
<th>   特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用  
<caption>   关于表格存储内容的描述或总结  
2.表格类

下表样式可用于表格中：

类 描述
.table   为任意 <table> 添加基本样式 (只有横向分隔线)  
.table-striped   在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)  
.table-bordered   为所有表格的单元格添加边框  
.table-hover   在 <tbody> 内的任一行启用鼠标悬停状态  
.table-condensed   让表格更加紧凑  
3.表格元素类

表格元素包括：<tr>, <th> 和 <td>

下表的类可用于表格的行或者单元格：

类 描述
.active   将悬停的颜色应用在行或者单元格上  
.success   表示成功的操作  
.info   表示信息变化的操作  
.warning   表示一个警告的操作  
.danger   表示一个危险的操作  
4.基本的表格

如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加 class .table，如下面实例所示：

<table> <caption>基本的表格布局</caption> <thead> <tr> <th>名称</th> <th>城市</th> </tr> </thead> <tbody> <tr> <td>Tanmay</td> <td>Bangalore</td> </tr> <tr> <td>Sachin</td> <td>Mumbai</td> </tr> </tbody> </table> 源码获取

实例源码已经托管到如下地址：

https://github.com/work100-net/training-stage2/tree/master/hello-bootstrap

https://gitee.com/work100-net/training-stage2/tree/master/hello-bootstrap

上一篇：媒体查询

下一篇：字体图标

如果对课程内容感兴趣，可以扫码关注我们的 公众号 或 QQ群，及时关注我们的课程更新