原文地址:http://www.work100.net/training/monolithic-frameworks-bootstrap-table.html
更多教程:光束云 – 免费课程
表格
序号 | 文内章节 | 视频 |
---|---|---|
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 class="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群
,及时关注我们的课程更新