表格
框架用.table
定义表格的基本样式,并在此基础上进行衍生。
基础表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格边框
默认表格为全包围边框,也可以使用以下样式,重新定义表格的边框效果。
无边框表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-none">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
水平分割表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-line">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
立体分割表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-cube">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格大小
还可以通过设置单元格的填充值改变表格的大小,除默认的表格外,框架定义了紧缩.table-small
和宽松.table-big
两个表格样式。
紧缩表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-small">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
宽松表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-big">
<tr class="align-left"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
单元格对齐
表格内的文本,默认为水平左对齐,垂直居中对齐,可以用.align-center
及.align-right
改变表格内文字的水平对齐方式,使用.align-top
及.align-bottom
改变单元格的垂直对齐方式。
默认对齐
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
水平居中
使用.align-center
文本居中,也可同时针对行tr或单元格td定义居左.align-left
或居右.align-right
显示。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table align-center">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr class="align-left"><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td class="align-right">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
水平居右
使用.align-right
文本居中,也可同时针对行tr或单元格td定义居左.align-left
或居中.align-center
显示。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table align-right">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr class="align-left"><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td class="align-center">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
顶部对齐
使用.align-top
单元格顶部对齐,也可同时针对单元格td定义顶部对齐.align-middle
或底部对齐.align-bottom
显示。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table align-top">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td class="align-middle">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td class="align-bottom">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
底部对齐
使用.align-bottom
所有单元格底部对齐,也可同时针对单元格td定义顶部对齐.align-top
或中间对齐.align-middle
显示。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table align-bottom">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td class="align-top">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td class="align-middle">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格文本色
可以用.text
-颜色改变表格内文字颜色。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table text-main">
<tr class="text-sub"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table text-dot">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr>
<td class="text-main">单元格</td>
<td class="text-sub">单元格</td>
<td class="text-success">单元格</td>
</tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格边框色
可以用.border
-颜色改变表格的边框颜色。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table border-main">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table border-gray text-dark">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格背景色
可以用.table-striped
定义条纹表格,用.table-hover
来定义悬停时的颜色,同时也可以用背景色.bg
-颜色来改变表格的背景。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-striped">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
悬停表格
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table table-hover">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
表格背景色
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table text-white border-success bg-main">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
行、单元格背景色
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<table class="table">
<tr class="bg-silver"><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td class="bg">单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
响应式表格
将任何.table
包裹在.table-auto
中即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于768px宽度时,水平滚动条消失。
标题 | 标题 | 标题 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
单元格 | 单元格 | 单元格 |
<div class="table-auto">
<table class="table">
<tr><th>标题</th><th>标题</th><th>标题</th></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
<tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>
</table>
</div>