拼图开发文档

表格

框架用.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>