Bootstarp入门教程（6） 表格

拼搏现实的明天。 2023-10-16 19:11 81阅读 0赞



基本案例：为任意<table>标签添加.table可以为其赋予基本的样式—少量的内补（padding）和水平方向的分隔线。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Demo</title>
  5. <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6. <meta http-equiv="description" content="this is my page">
  7. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  10. <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  11. <link rel="stylesheet" href="css/bootstrap.min.css">
  12. <!-- 可选的Bootstrap主题文件（一般不用引入） -->
  13. <!--<link rel="stylesheet" href="css/bootstrap-theme.min.css">-->
  14. <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15. <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
  16. <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17. <script src="js/bootstrap.min.js"></script>
  18. </head>
  19. <body>
  20.     <!--容器  -->
  21.     <div class="container">
  22.         <div class="row">            
  23.             <table class="table">
  24.                 <thead>
  25.                     <tr>
  26.                         <th>第一列</th>
  27.                         <th>第二列</th>
  28.                         <th>第三列</th>
  29.                         <th>第四列</th>
  30.                     </tr>
  31.                 </thead>
  32.                 <tbody>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body>
  44. </html>

Center

条纹状表格：利用.table-striped可以给<tbody>之内的每一样增加斑马条纹样式。

  1. <body>
  2.     <!--容器  -->
  3.     <div class="container">
  4.         <div class="row">            
  5.             <table class="table table-striped">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>第一列</th>
  9.                         <th>第二列</th>
  10.                         <th>第三列</th>
  11.                         <th>第四列</th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody>
  15.                     <tr>
  16.                         <td>1</td>
  17.                         <td>2</td>
  18.                         <td>3</td>
  19.                         <td>4</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td>1</td>
  23.                         <td>2</td>
  24.                         <td>3</td>
  25.                         <td>4</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2</td>
  30.                         <td>3</td>
  31.                         <td>4</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body>

Center 1

带边框的表格：利用.table-bordered为表格和其中的每个单元格增加边框。

  1. <body>
  2.     <!--容器  -->
  3.     <div class="container">
  4.         <div class="row">            
  5.             <table class="table table-striped table-bordered">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>第一列</th>
  9.                         <th>第二列</th>
  10.                         <th>第三列</th>
  11.                         <th>第四列</th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody>
  15.                     <tr>
  16.                         <td>1</td>
  17.                         <td>2</td>
  18.                         <td>3</td>
  19.                         <td>4</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td>1</td>
  23.                         <td>2</td>
  24.                         <td>3</td>
  25.                         <td>4</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2</td>
  30.                         <td>3</td>
  31.                         <td>4</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body>

Center 2

鼠标悬停：利用.table-hover可以让<tbody>中的每一行响应鼠标悬停状态。

  1. <body>
  2.     <!--容器  -->
  3.     <div class="container">
  4.         <div class="row">            
  5.             <table class="table table-striped table-bordered table-hover">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>第一列</th>
  9.                         <th>第二列</th>
  10.                         <th>第三列</th>
  11.                         <th>第四列</th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody>
  15.                     <tr>
  16.                         <td>1</td>
  17.                         <td>2</td>
  18.                         <td>3</td>
  19.                         <td>4</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td>1</td>
  23.                         <td>2</td>
  24.                         <td>3</td>
  25.                         <td>4</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2</td>
  30.                         <td>3</td>
  31.                         <td>4</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body>

Center 3

紧缩表格：利用.table-condensed可以让表格更加紧凑，单元格中的内部（padding）均会减半。

  1. <body>
  2.     <!--容器  -->
  3.     <div class="container">
  4.         <div class="row">            
  5.             <table class="table table-striped table-bordered table-hover table-condensed">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>第一列</th>
  9.                         <th>第二列</th>
  10.                         <th>第三列</th>
  11.                         <th>第四列</th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody>
  15.                     <tr>
  16.                         <td>1</td>
  17.                         <td>2</td>
  18.                         <td>3</td>
  19.                         <td>4</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td>1</td>
  23.                         <td>2</td>
  24.                         <td>3</td>
  25.                         <td>4</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2</td>
  30.                         <td>3</td>
  31.                         <td>4</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body>

Center 4

状态class：通过这些状态class可以为行货单元格设置颜色。

Center 5 

  1. <body>
  2.     <!--容器  -->
  3.     <div class="container">
  4.         <div class="row">            
  5.             <table class="table table-striped table-bordered table-hover table-condensed">
  6.                 <thead>
  7.                     <tr>
  8.                         <th>第一列</th>
  9.                         <th>第二列</th>
  10.                         <th>第三列</th>
  11.                         <th>第四列</th>
  12.                     </tr>
  13.                 </thead>
  14.                 <tbody>
  15.                     <tr>
  16.                         <td class="active">1</td>
  17.                         <td class="success">2</td>
  18.                         <td class="warning">3</td>
  19.                         <td class="danger">4</td>
  20.                     </tr>
  21.                     <tr>
  22.                         <td>1</td>
  23.                         <td>2</td>
  24.                         <td>3</td>
  25.                         <td>4</td>
  26.                     </tr>
  27.                     <tr>
  28.                         <td>1</td>
  29.                         <td>2</td>
  30.                         <td>3</td>
  31.                         <td>4</td>
  32.                     </tr>
  33.                     <tr>
  34.                         <td>1</td>
  35.                         <td>2</td>
  36.                         <td>3</td>
  37.                         <td>4</td>
  38.                     </tr>
  39.                 </tbody>
  40.             </table>
  41.         </div>
  42.     </div>
  43. </body

发表评论

表情：
评论列表 （有 0 条评论，81人围观）

还没有评论，来说两句吧...

相关阅读