关键词搜索

源码搜索 ×
×

BootStrap笔记-表格方面的配置

发布2022-01-17浏览670次

详情内容

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.     <div class="container-fluid">
  20.         <table class="table">
  21.             <thead>
  22.                 <tr>
  23.                     <th>FirstName</th>
  24.                     <th>LastName</th>
  25.                     <th>Email</th>
  26.                 </tr>
  27.             </thead>
  28.             <tbody>
  29.                 <tr>
  30.                     <td>AAA</td>
  31.                     <td>BBB</td>
  32.                     <td>570176391@qq.com</td>
  33.                 </tr>
  34.                 <tr>
  35.                     <td>AAA</td>
  36.                     <td>BBB</td>
  37.                     <td>570176391@qq.com</td>
  38.                 </tr>
  39.                 <tr>
  40.                     <td>AAA</td>
  41.                     <td>BBB</td>
  42.                     <td>570176391@qq.com</td>
  43.                 </tr>
  44.             </tbody>
  45.         </table>
  46.         <br/>
  47.         <table class="table table-striped">
  48.             <thead>
  49.             <tr>
  50.                 <th>FirstName</th>
  51.                 <th>LastName</th>
  52.                 <th>Email</th>
  53.             </tr>
  54.             </thead>
  55.             <tbody>
  56.             <tr>
  57.                 <td>AAA</td>
  58.                 <td>BBB</td>
  59.                 <td>570176391@qq.com</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>AAA</td>
  63.                 <td>BBB</td>
  64.                 <td>570176391@qq.com</td>
  65.             </tr>
  66.             <tr>
  67.                 <td>AAA</td>
  68.                 <td>BBB</td>
  69.                 <td>570176391@qq.com</td>
  70.             </tr>
  71.             </tbody>
  72.         </table>
  73.         <br/>
  74.         <table class="table table-bordered">
  75.             <thead>
  76.             <tr>
  77.                 <th>FirstName</th>
  78.                 <th>LastName</th>
  79.                 <th>Email</th>
  80.             </tr>
  81.             </thead>
  82.             <tbody>
  83.             <tr>
  84.                 <td>AAA</td>
  85.                 <td>BBB</td>
  86.                 <td>570176391@qq.com</td>
  87.             </tr>
  88.             <tr>
  89.                 <td>AAA</td>
  90.                 <td>BBB</td>
  91.                 <td>570176391@qq.com</td>
  92.             </tr>
  93.             <tr>
  94.                 <td>AAA</td>
  95.                 <td>BBB</td>
  96.                 <td>570176391@qq.com</td>
  97.             </tr>
  98.             </tbody>
  99.         </table>
  100.         <br/>
  101.         <table class="table table-hover">
  102.             <thead>
  103.             <tr>
  104.                 <th>FirstName</th>
  105.                 <th>LastName</th>
  106.                 <th>Email</th>
  107.             </tr>
  108.             </thead>
  109.             <tbody>
  110.             <tr>
  111.                 <td>AAA</td>
  112.                 <td>BBB</td>
  113.                 <td>570176391@qq.com</td>
  114.             </tr>
  115.             <tr>
  116.                 <td>AAA</td>
  117.                 <td>BBB</td>
  118.                 <td>570176391@qq.com</td>
  119.             </tr>
  120.             <tr>
  121.                 <td>AAA</td>
  122.                 <td>BBB</td>
  123.                 <td>570176391@qq.com</td>
  124.             </tr>
  125.             </tbody>
  126.         </table>
  127.         <br/>
  128.         <table class="table table-dark">
  129.         <thead>
  130.         <tr>
  131.             <th>FirstName</th>
  132.             <th>LastName</th>
  133.             <th>Email</th>
  134.         </tr>
  135.         </thead>
  136.         <tbody>
  137.         <tr>
  138.             <td>AAA</td>
  139.             <td>BBB</td>
  140.             <td>570176391@qq.com</td>
  141.         </tr>
  142.         <tr>
  143.             <td>AAA</td>
  144.             <td>BBB</td>
  145.             <td>570176391@qq.com</td>
  146.         </tr>
  147.         <tr>
  148.             <td>AAA</td>
  149.             <td>BBB</td>
  150.             <td>570176391@qq.com</td>
  151.         </tr>
  152.         </tbody>
  153.     </table>
  154.         <br/>
  155.         <table class="table table-hover">
  156.             <thead>
  157.             <tr class="table-primary">
  158.                 <th>FirstName</th>
  159.                 <th>LastName</th>
  160.                 <th>Email</th>
  161.             </tr>
  162.             </thead>
  163.             <tbody>
  164.             <tr class="table-success">
  165.                 <td>AAA</td>
  166.                 <td>BBB</td>
  167.                 <td>570176391@qq.com</td>
  168.             </tr>
  169.             <tr class="table-dark">
  170.                 <td>AAA</td>
  171.                 <td>BBB</td>
  172.                 <td>570176391@qq.com</td>
  173.             </tr>
  174.             <tr class="table-danger">
  175.                 <td>AAA</td>
  176.                 <td>BBB</td>
  177.                 <td>570176391@qq.com</td>
  178.             </tr>
  179.             </tbody>
  180.         </table>
  181.     </div>
  182. </body>
  183. </html>

运行截图如下：

其中的table-hover的含义是鼠标放上去有这样的效果：

其他方面说明：

类名描述
.table-primary重要的颜色
.table-success成功的颜色
.table-danger危险的颜色
.table-info通知的颜色
.table-warning橘色，注意的地方
.table-active灰色，鼠标悬停效果
.table-secondary灰色，表示内容不怎么重要
.table-light浅灰色，可用于表格行背景
.table-dark深灰色，可用于表格行背景

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载