Bootstrap 表格
-
基本表格
基本的 Bootstrap 表格带有浅色填充和水平分隔线。.table 类向表格添加基本样式:
尝试一下<div class ="container"> <h2>基本表格</h2> <p>.table类向表格添加基本样式(浅色填充和水平分隔线):</p> <table class ="table"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
.table-sm 类通过将单元格填充减半来使表变小:
尝试一下<div class ="container"> <h2>Small Table</h2> <table class ="table table-bordered table-sm"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
-
条纹行表格
.table-striped 类将斑马条纹添加到表中:
尝试一下<div class ="container"> <h2>条纹行</h2> <p>.table-striped类将斑马条纹添加到表中:</p> <table class ="table table-striped"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
-
边框表格
.table-bordered 类在表格和单元格的所有侧面添加边框:
尝试一下<div class ="container"> <h2>边框表格</h2> <p>.table-bordered类在表格和单元格的所有侧面添加边框:</p> <table class ="table table-bordered"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
.table-borderless 类从表格中删除边框:
尝试一下<div class ="container"> <h2>无边框表格</h2> <p>.table-borderless类从表格中删除边框:</p> <table class ="table table-borderless"> ... </table> </div>
-
悬停行
.table-bordered 类在表行上添加了悬停效果(鼠标经过悬停行时让行变成灰色背景色)
尝试一下<div class ="container"> <h2>悬停行</h2> <p>.table-hover类在表行上添加了悬停效果:</p> <table class ="table table-hover"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
-
黑色背景表格
.table-bordered 类在表行上添加了悬停效果(鼠标经过悬停行时让行变成灰色背景色)
尝试一下<div class ="container"> <h2>黑色背景</h2> <p>.table-dark类向表添加黑色背景:</p> <table class ="table table-dark"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
组合.table-dark和.table-striped创建一个黑色背景的,带条纹的表:
尝试一下<div class ="container"> <h2>黑色背景</h2> <p>组合.table-dark和.table-striped创建一个黑色背景的,带条纹的表:</p> <table class ="table table-dark table-striped"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td> John </td> <td> Doe </td> <td> john@example.com </td> </tr> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
当然你也可以组合.table-dark和.table-hover创建一个黑色背景的带有鼠标经过悬停效果的表格
-
表格类样式
表格类可用于为整个表(<table>),表行(<tr>)或表单元格(<td>)着色。可以使用的表格类有:类名 描述 .table-primary 蓝色:表示重要的动作 .table-success 绿色:表示成功或积极的行动 .table-danger 红色:表示危险或潜在的负面行为 .table-info 浅蓝色:指示中性的信息更改或操作 .table-warning 橙色:表示可能需要注意的警告 .table-active 灰色:将悬停颜色应用于表格行或表格单元格 .table-secondary 灰色:表示一个不太重要的操作 .table-light 浅灰色表或表行背景 .table-dark 深灰色表或表行背景 下面示例演示了各个类在表格中的使用:
尝试一下<div class ="container"> <h2>表格类</h2> <p>表格类可用于为表,表行或表单元格上色。可以使用的类为:.table-primary,.table-success,.table-info,.table-warning,.table-danger,.table-active,.table-secondary,.table-light和.table-dark:</p> <table class="table"> <thead> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td>默认</td> <td> Defaultson </td> <td> def@somemail.com </td> </tr> <tr class="table-primary"> <td>主要</td> <td>乔</td> <td> joe@example.com </td> </tr> <tr class="table-success"> <td>成功</td> <td> Doe </td> <td> john@example.com </td> </tr> <tr class="table-danger"> <td>危险</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr class="table-info"> <td>信息</td> <td>杜利</td> <td> july@example.com </td> </tr> <tr class="table-warning"> <td>警告</td> <td>参考</td> <td> bo@example.com </td> </tr> <tr class="table-active"> <td>活动</td> <td> Activeson </td> <td> act@example.com </td> </tr> <tr class="table-secondary"> <td>中学</td> <td>第二个</td> <td> sec@example.com </td> </tr> <tr class="table-light"> <td>光</td> <td>安吉</td> <td> angie@example.com </td> </tr> <tr class="table-dark text-dark"> <td>黑暗</td> <td> Bo </td> <td> bo@example.com </td> </tr> </tbody> </table> </div>
-
表头颜色
.thead-dark 类将黑色背景添加到表标题,.thead-light 类将灰色背景添加到表标题:
尝试一下<div class ="container"> <table class ="table"> <thead class="thead-dark"> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> <table class ="table"> <thead class="thead-light"> <tr> <th>名字</th> <th>姓氏</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td>玛丽</td> <td>萌</td> <td> mary@example.com </td> </tr> <tr> <td>七月</td> <td>杜利</td> <td> july@example.com </td> </tr> </tbody> </table> </div>
-
响应式表格
.table-sensitive 类创建一个响应表:在宽度小于992px的屏幕上(如果需要)将水平滚动条添加到该表。 在宽等于992px屏幕上观看时,没有区别:
尝试一下<div class ="container"> <div class ="table-responsive"> <table class="table table-bordered"> ...... </table> </div> </div>
您还可以根据屏幕宽度来决定何时该表格应具有滚动条:类名 屏幕宽度 .table-responsive-sm <576px ..table-responsive-md <768px .table-responsive-lg <992px .table-responsive-xl <1200px .table-sensitive-sm 类创建一个响应表,该表将在宽度小于576像素的屏幕上水平滚动。
尝试一下<div class ="container"> <div class ="table-responsive-sm"> <table class="table table-bordered"> ...... </table> </div> </div>