bootstrap表格

时间 2019-11-08

原文原文链接

前面的话

　　Bootstrap为咱们提供了很是好看且易用的表格样式，利用Boostrap能够快速的建立出不一样样式的表格，本文将详细介绍Boostrap表格spa

基本实例

　　Boostrap将表格<table>的样式重置以下code

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Username</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

　　为任意<table>标签添加.table类能够为其赋予基本的样式—少许的内边距(padding)和水平方向的分隔线 blog

<table class="table">
  ...
</table>

条纹状表格

　　经过 .table-striped 类能够给 <tbody> 以内的每一行增长斑马条纹样式ip

　　[注意]条纹状表格是依赖 :nth-child CSS 选择器实现的，而这一功能不被IE8-支持ci

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

<table class="table table-striped">
  ...
</table>

带边框表格

　　添加 .table-bordered 类为表格和其中的每一个单元格增长边框it

<table class="table table-bordered">
  ...
</table>

鼠标悬停

　　经过添加 .table-hover 类能够让 <tbody> 中的每一行对鼠标悬停状态做出响应io

<table class="table table-hover">
  ...
</table>

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

紧缩表格

　　经过添加 .table-condensed 类能够让表格更加紧凑，单元格中的内补（padding）均会减半table

<table class="table table-condensed">
  ...
</table>

状态类

　　经过这些状态类能够为行或单元格设置颜色ast

Class    　　描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动做
.info    　　标识普通的提示信息或动做
.warning    标识警告或须要用户注意
.danger     标识危险或潜在的带来负面影响的动做

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Column heading</th>
      <th>Column heading</th>
      <th>Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th scope="row">1</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="success">
      <th scope="row">2</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="info">
      <th scope="row">3</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="warning">
      <th scope="row">4</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="danger">
      <th scope="row">5</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>

响应式表格

　　将任何 .table 元素包裹在 .table-responsive 元素内，便可建立响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失class

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Table heading</th>
        <th>Table heading</th>
        <th>Table heading</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Table cell</td>
        <td>Table cell</td>
        <td>Table cell</td>
      </tr>
    </tbody>
  </table>
</div>