Bootstrap学习笔记--表格

最新推荐文章于 2022-02-16 16:40:01 发布

原创最新推荐文章于 2022-02-16 16:40:01 发布 · 323 阅读

1 ·

CC 4.0 BY-SA版权

网页前端专栏收录该内容

58 篇文章

订阅专栏

本文介绍如何使用不同类名实现各种样式的HTML表格，包括条纹、边框、悬停效果等，并展示了如何创建响应式表格以适应不同尺寸的屏幕。

先来个总体概括：
这里写图片描述
还有一个响应式表

实践出真知：
类：.table
一个轻的填充物和只有水平分隔符。
看代码：

<div class="container">        
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>

看效果图：
这里写图片描述

类：.table-striped
将斑马条纹添加到表格中：

<table class="table">
 改成
<table class="table table-striped">

效果图：
这里写图片描述

.类：table-bordered
加边框：

<table class="table">
 改成
<table class="table table-bordered">

效果图：
这里写图片描述

类：.table-hover
允许上表中的行悬停状态：基础的和table只有水平线一样但是当鼠标停留在列表的时候此行会变灰色但是不能点击

<table class="table">
 改成
 <table class="table table-hover">

效果图：
这里写图片描述

类：.table-condensed
没啥区别和table 只有水平线一样只是变得更紧凑而已

    <table class="table">
     改成
     <table class="table table-condensed">

这里不贴效果图了……差别不大。

为表格行（<tr>）或表格单元格（<td>）着色

 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr class="success">
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr class="danger">
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td class="info">July</td>
        <td>Dooley</td>
        <td class="danger">july@example.com</td>
      </tr>
    </tbody>
  </table>

效果图：
这里写图片描述

颜色选择：
这里写图片描述

还可以建造响应表：
类：.table-responsive
表格将在小设备上水平滚动（768px以下）。当查看大于768px宽的任何东西时，没有区别

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

栗子：

 <div class="table-responsive">          
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

效果图：
这里写图片描述

这个是响应式的之前那些类都没有滑轮缩小后或者有更通用

table要包含在<div class="table-responsive"> 里