BootstrapBootstrap表格

前边的话

  表格是Bootstrap的二个基础零部件之一,Bootstrap为表格提供了1种基础样式4种附加样式以及二个辅助响应式的报表。在使用Bootstrap的表格进程中,只供给添加对应的类名就能够得到区别的报表风格,本文将详细介绍Boostrap表格

 

着力实例

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

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)和水平方向的相间线 

  “.table”重要有八个职能:

  ☑ 给表格设置了margin-bottom:20px以及安装单元内距

  ☑ 在thead底部安装了三个2px的深茶青实线

  ☑ 每一个单元格顶部设置了2个1px的珍珠白实线

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

 

条纹状表格

  有时候为了让表格更具阅读性,供给将表格制作成类似于斑马线的效应。不难题说正是让表格带有背景条纹效果。在Bootstrap中落实那种表格效果并不困难,只须求在<table
class=”table”>的底子上加码类名“.table-striped”即可

  通过 .table-striped 类能够给 <tbody> 之内的每一行扩张斑马条纹样式。其效果与基础表格比较,仅是在tbody隔行有七个浅土褐的背景观

  [注意]条纹状表格是借助 :nth-child CSS
选取器达成的,而这一效应不被IE8-支持

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

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

 

带边框表格

  基础表格仅让表格部分地方有边框,但有时候需求总体表格具有边框效果。Bootstrap出于实际运用,也考虑那种表格效果,即具有单元格具有一条1px的边框

  Bootstrap中带边框的表格使用办法和斑马线表格的采纳情势类似,只须要在基础表格<table
class=”table”>基础上添加3个“.table-bordered”类名即可

  添加 .table-bordered 类为表格和中间的种种单元格扩张边框

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

 

鼠标悬停

  当鼠标悬停在报表的行方面有多少个高亮的背景象,这样能够随时告诉用户正在翻阅表格哪一行的数额

  通过丰硕 .table-hover 类能够让 <tbody>
中的每一行对鼠标悬停状态作出响应

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

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

 

缩短表格

  紧密型表格,或然叫紧缩表格,简单明了,正是单元格没内边距或许内边距较别的表格的内边距更小。换句话说,要落到实处紧密型表格只须要重置表格单元格的内边距padding的值

  通过添加 .table-condensed
类能够让表格尤其严格,单元格中的内补(padding)均会减半

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

 

状态类

  通过这一个情况类能够为行或单元格设置颜色

Bootstrap 1

<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>

 

响应式表格

Bootstrap,  将别的 .table 成分包裹在 .table-responsive
成分内,即可创制响应式表格,其会在小显示器设备上(小于768px)水平滚动。当显示屏大于
768px 宽度时,水平滚动条消失

<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>

 

相关文章